Utilisation de Bootstrap Modal window comme PartialView

Oui, nous avons fait cela.

Dans votre Index.cshtml, vous aurez quelque chose comme …

<div id='gameModal' class='modal hide fade in' data-url='@Url.Action("GetGameListing")'> <div id='gameContainer'> </div> </div> <button id='showGame'>Show Game Listing</button> 

Ensuite, dans JS pour la même page (inlined ou dans un fichier séparé, vous aurez quelque chose comme ça …

 $(document).ready(function() { $('#showGame').click(function() { var url = $('#gameModal').data('url'); $.get(url, function(data) { $('#gameContainer').html(data); $('#gameModal').modal('show'); }); }); }); 

Avec une méthode sur votre contrôleur qui ressemble à ceci …

 [HttpGet] public ActionResult GetGameListing() { var model = // do whatever you need to get your model return PartialView(model); } 

Vous aurez évidemment besoin d'une vue appelée GetGameListing.cshtml dans votre dossier Views.

Je fais ceci avec les moustaches.js et les modèles (vous pourriez utiliser n'importe quelle bibliothèque de modèles JavaScript).

À mon avis, j'ai quelque chose comme ça:

 <script type="text/x-mustache-template" id="modalTemplate"> <%Html.RenderPartial("Modal");%> </script> 

… ce qui me permet de garder mes modèles dans une vue partielle appelée Modal.ascx :

 <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %> <div> <div class="modal-header"> <a class="close" data-dismiss="modal">&times;</a> <h3>{{Name}}</h3> </div> <div class="modal-body"> <table class="table table-striped table-condensed"> <tbody> <tr><td>ID</td><td>{{Id}}</td></tr> <tr><td>Name</td><td>{{Name}}</td></tr> </tbody> </table> </div> <div class="modal-footer"> <a class="btn" data-dismiss="modal">Close</a> </div> </div> 

Je crée des espaces réservés pour chaque modal à mon avis:

 <%foreach (var item in Model) {%> <div data-id="<%=Html.Encode(item.Id)%>" id="modelModal<%=Html.Encode(item.Id)%>" class="modal hide fade"> </div> <%}%> 

… et faire des appels ajax avec jQuery:

 <script type="text/javascript"> var modalTemplate = $("#modalTemplate").html() $(".modal[data-id]").each(function() { var $this = $(this) var id = $this.attr("data-id") $this.on("show", function() { if ($this.html()) return $.ajax({ type: "POST", url: "<%=Url.Action("SomeAction")%>", data: { id: id }, success: function(data) { $this.append(Mustache.to_html(modalTemplate, data)) } }) }) }) </script> 

Ensuite, vous avez juste besoin d'un déclencheur quelque part:

 <%foreach (var item in Model) {%> <a data-toggle="modal" href="#modelModal<%=Html.Encode(item.Id)%>"> <%=Html.Encode(item.DutModel.Name)%> </a> <%}%> 

J'ai réussi à utiliser un bon exemple que j'ai trouvé ici . J'ai remplacé la boîte de dialogue jquery utilisée dans cet exemple avec les fenêtres Twitter Bootstrap Modal.

Projet d'exemple complet et clair http://www.codeproject.com/Articles/786085/ASP-NET-MVC-List-Editor-with-Bootstrap-Modals Il affiche créer, éditer et supprimer des modes d'opération d'entité avec bootstrap et inclut également le code Pour gérer le résultat renvoyé de ces opérations d'entité (c #, JSON, javascript)

J'utilise AJAX pour faire cela. Vous avez votre partiel avec votre modèle typique de Twitter modèle html:

 <div class="container"> <!-- Modal --> <div class="modal fade" id="LocationNumberModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> &times; </button> <h4 class="modal-title"> Serial Numbers </h4> </div> <div class="modal-body"> <span id="test"></span> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal"> Close </button> </div> </div> </div> </div> </div> 

Ensuite, vous avez votre méthode de contrôleur, j'utilise JSON et j'ai une classe personnalisée qui rend la vue à une chaîne. Je fais cela afin que je puisse effectuer plusieurs mises à jour ajax sur l'écran avec un appel ajax. Référence ici: Exemple, mais vous pouvez utiliser un PartialViewResult / ActionResult sur return si vous faites simplement un seul appel. Je vais le montrer en utilisant JSON ..

Et la méthode JSON dans Controller:

 public JsonResult LocationNumberModal(string partNumber = "") { //Business Layer/DAL to get information return Json(new { LocationModal = ViewUtility.RenderRazorViewToString(this.ControllerContext, "LocationNumberModal.cshtml", new SomeModelObject()) }, JsonRequestBehavior.AllowGet ); } 

Et puis, dans la vue en utilisant votre modal: vous pouvez emballer l'AJAX dans votre partiel et appeler @ {Html.RenderPartial … Ou vous pouvez avoir un espace réservé avec un div:

 <div id="LocationNumberModalContainer"></div> 

Alors votre ajax:

 function LocationNumberModal() { var partNumber = "1234"; var src = '@Url.Action("LocationNumberModal", "Home", new { area = "Part" })' + '?partNumber='' + partNumber; $.ajax({ type: "GET", url: src, dataType: "json", contentType: "application/json; charset=utf-8", success: function (data) { $("#LocationNumberModalContainer").html(data.LocationNumberModal); $('#LocationNumberModal').modal('show'); } }); }; 

Ensuite, le bouton de votre mode:

 <button type="button" id="GetLocBtn" class="btn btn-default" onclick="LocationNumberModal()">Get</button>