使用引导模式窗口作为部分视图
Using Bootstrap Modal window as PartialView
我希望使用Twitter Bootstrap Modal Windows作为部分视图。 但是,我真的不认为它被设计成以这种方式使用;它似乎应该以相当静态的方式使用。 尽管如此,我认为能够将其用作部分视图会很酷。
例如,假设我有一个游戏列表。 单击给定游戏的链接后,我想从服务器请求数据,然后在当前页面"顶部"的模态窗口中显示有关该游戏的信息。
我做了一些研究,发现这篇文章相似但不完全相同。
有没有人尝试过成功或失败? 有人在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);
}
当然,您需要在Views文件夹中有一个名为GetGameListing.cshtml的视图。
我用胡子.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>
<%}%>
我通过使用我在这里找到的一个很好的例子来实现这一点。我已将该示例中使用的jquery对话框替换为Twitter Bootstrap Modal 窗口。
完整清晰的示例项目http://www.codeproject.com/Articles/786085/ASP-NET-MVC-List-Editor-with-Bootstrap-Modals它使用引导程序显示创建、编辑和删除实体操作模式,还包括用于处理从这些实体操作(c#、JSON、javascript)返回的结果的代码。
我使用AJAX来做到这一点。你有你典型的推特模态模板 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 更新。参考此处:示例,但如果您只执行一次调用,则可以在返回时使用 PartViewResult/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>
然后你的 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>
将模态和 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>
爪哇语
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#Coordinate").on('submit',
function (e) {
if ($("#ServiceOrder").val() == '') {
e.preventDefault();
$('#confirmDialog').modal('show');
}
});
});
</script>
然后只需在页面形式中调用您的部分。
Create.cshtml
@using (Html.BeginForm("Edit","Home",FormMethod.Post, new {id ="Coordinate"}))
{
//Form Code
@Html.Partial("ConfirmDialog")
}
- asp.net MVC,重定向到视图,视图打开新窗口到外部url,它'It’’’’我们被当成一种风景
- 如何在网格视图中每次单击按钮或链接时打开不同的新弹出窗口
- jquery-mobile的列表视图中的两个弹出窗口
- AngularJS:触发从子窗口加载视图(OAuth)
- Kendo UI窗口不会打开具有布局的视图
- titanium:窗口和视图之间的区别
- 带有部分视图的模式弹出窗口
- 如何为模式窗口中呈现的部分视图添加滚动条
- 创建呈现分部视图的弹出窗口
- 使用引导模式窗口作为部分视图
- Angular JS将msg广播到多个视图,包括模态窗口
- 模式弹出窗口中的按钮单击事件,在网格视图中未触发
- 窗口之间有什么区别.主干网中的视图名称和视图名称.js
- 如何在 dialog() 模式弹出窗口中的部分视图之间保留字段数据
- Openerp 可编辑表单视图弹出窗口
- 在 Web 视图中打开弹出窗口
- 将弹出窗口定位在局部视图上
- 在列表视图窗口 8 中进行分页
- jQuery JavaScript在视图/窗口中检测对象
- .NET MVC3:避免在控制器仍在加载数据时关闭视图窗口