使用Bootstrap模式窗口作为部分视图

我正在使用Twitter Bootstrap Modal窗口作为部分视图。 但是，我并不认为它是以这种方式使用的; 它似乎是为了以相当静态的方式使用。 尽pipe如此，我认为能够把它作为一个部分的观点来使用会很酷。

举个例子，比方说，我有一个游戏列表。 在点击给定游戏的链接后，我想要从服务器请求数据，然后在本页面的“顶部”模式窗口中显示关于该游戏的信息。

我做了一些研究，发现这个post是相似的，但不完全相同。

有没有人试过这个成功或失败？ 任何人都有jsFiddle或他们愿意分享的一些来源？

谢谢你的帮助。

Answer 1

是的，我们已经做到了。

在您的Index.cshtml中，您将拥有类似…

<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> 

然后在JS的同一页面（内联或在一个单独的文件，你会有这样的事情..

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

用你的控制器上的方法看起来像这样..

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

你当然需要一个名为GetGameListing.cshtml的Views视图文件夹。

Answer 2

我用mustache.js和模板（你可以使用任何JavaScript模板库）来做这个。

在我看来，我有这样的东西：

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

…它让我保持我的模板在一个名为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> 

在我看来，我为每个模式创build占位符：

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

…并使用jQuery进行ajax调用：

 <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> 

那么，你只需要一个触发器：

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

Answer 3

我已经通过使用我在这里find的一个很好的例子来实现这一点 。 我用Twitter Bootstrap Modal窗口replace了那个例子中使用的jquery对话框。

Answer 4

完整和清晰的示例项目http://www.codeproject.com/Articles/786085/ASP-NET-MVC-List-Editor-with-Bootstrap-Modals它显示创build，编辑和删除实体操作模式与引导，还包括代码处理这些实体操作返回的结果（c＃，JSON，javascript）;

Answer 5

我使用AJAX来做到这一点。 你有你的部分典型的twitter模板模板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> 

然后你有你的控制器方法，我使用JSON和一个自定义的类，把视图转换为一个string。 我这样做，所以我可以在一个Ajax调用屏幕上执行多个Ajax更新。 在这里引用： 例子，但如果你只是做一个调用，你可以使用PartialViewResult / ActionResult返回。 我将使用JSON显示它

和控制器中的JSON方法：

 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 ); } 

然后，在视图中使用你的模式：你可以打包AJAX在你的部分和调用@ {Html.RenderPartial …或者你可以有一个div的占位符：

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

那么你的阿贾克斯：

 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'); } }); }; 

然后button到你的模式：

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