我希望使用 Twitter Bootstrap Modal windows 作为局部视图。但是，我真的不认为它是为这种方式设计的。似乎它是为了以相当静态的方式使用。不过，我认为能够将其用作局部视图会很酷。
例如，假设我有一个游戏列表。单击给定游戏的链接后，我想从服务器请求数据，然后在当前页面“顶部”的模式窗口中显示有关该游戏的信息。
我做了一些研究，发现this post 相似但不完全相同。
有没有人尝试过这个成功或失败？任何人都有关于 jsFiddle 的内容或他们愿意分享的资源吗？
感谢您的帮助。
【问题讨论】：
标签： javascript asp.net-mvc twitter-bootstrap modal-dialog
我使用 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">×</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>
我在我的视图中为每个模态创建占位符：
<%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>
<%}%>
【讨论】：
是的，我们已经这样做了。
在您的 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);
}
您当然需要在 Views 文件夹中创建一个名为 GetGameListing.cshtml 的视图。
【讨论】：
我通过使用我找到的一个很好的例子来实现这一点here。 我已经用 Twitter Bootstrap 模态窗口替换了该示例中使用的 jquery 对话框。
【讨论】：
完整清晰的示例项目 http://www.codeproject.com/Articles/786085/ASP-NET-MVC-List-Editor-with-Bootstrap-Modals 它使用引导程序显示创建、编辑和删除实体操作模式，还包括处理从这些实体操作（c#、JSON、javascript）返回的结果的代码
【讨论】：
我使用 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">
×
</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 并有一个自定义类，将视图呈现为一个字符串。我这样做是为了通过一个 ajax 调用在屏幕上执行多个 ajax 更新。在此处参考：Example 但如果您只是打一个电话，则可以在返回时使用 PartialViewResult/ActionResult。我将使用 JSON 显示它..
以及Controller中的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>
然后是你的 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.LocationModal);
$('#LocationNumberModal').modal('show');
}
});
};
然后是你的模态按钮：
<button type="button" id="GetLocBtn" class="btn btn-default" onclick="LocationNumberModal()">Get</button>
【讨论】：
将 modal 和 javascript 放入局部视图。然后在您的页面中调用局部视图。 这也将处理表单提交。
局部视图
<div id="confirmDialog" class="modal fade" data-backdrop="false">
<div class="modal-dialog" data-backdrop="false">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Missing Service Order</h4>
</div>
<div class="modal-body">
<p>You have not entered a Service Order. Do you want to continue?</p>
</div>
<div class="modal-footer">
<input id="btnSubmit" type="submit" class="btn btn-primary"
value="Submit" href="javascript:"
onClick="document.getElementById('Coordinate').submit()" />
<button type="button" class="btn btn-default" data-
dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
Javascript
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#Coordinate").on('submit',
function (e) {
if ($("#ServiceOrder").val() == '') {
e.preventDefault();
$('#confirmDialog').modal('show');
}
});
});
</script>
然后只需在页面的表单中调用您的部分。
创建.cshtml
@using (Html.BeginForm("Edit","Home",FormMethod.Post, new {id ="Coordinate"}))
{
//Form Code
@Html.Partial("ConfirmDialog")
}
【讨论】：