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

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

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

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

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

谢谢你的帮助。

是的,我们已经做到了。

在您的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视图文件夹。

我用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> <%}%> 

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

我使用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>