[英]Cannot display bootstrap dialog with an asp.net mvc url.action link
我显然无法显示带有url操作链接的模式对话框。
我知道如何从jQuery click事件显示引导对话框,但是我希望做的是以下操作:
我有一个带有url.action链接的索引页面。 当用户单击链接时,我将链接到适当的控制器操作方法(编辑),而没有问题(在调试过程中看到),希望显示引导程序模式弹出对话框。 但是,不会弹出模式对话框。
如果我在操作链接上包含数据目标,则该链接甚至无法正常工作。 如果删除它,它将进入“视图”,但不会弹出模式对话框,因为链接上没有任何内容说明数据目标是什么。 我希望模式链接目标的链接上的语法不正确。 我希望如果为对话框包含适当的引导程序属性,它将弹出。
我真的可以在这里使用一些帮助,将不胜感激。
这是我的“索引”页面上的链接(包括数据目标)。 再次注意,如果我从下面的代码片段中排除了“数据切换”和“数据目标”,则会进入“视图”,但不会弹出对话框。
data-toggle="modal", data-target="#categoryEditModal"
<a href="@Url.Action("Edit", "Category", new { area = "Categories", id = item.CategoryID }) data-toggle="modal", data-target="#categoryEditModal"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span>Edit</a>
这是我的目的地视图。 我可以验证在调试时是否在模型中填充了Model.CategoryID和Model.CategoryDescription。
<div class="modal" id="categoryEditModal" tabindex="-1" role="dialog" aria-labelledby="categoryModal-label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="categoryModal-label">Category Description</h4>
</div>
<div class="modal-body">
<div class="form-group">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.CategoryDescription, htmlAttributes: new { @class = "control-label required col-md-2 col-sm-2 col-xs-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.CategoryDescription, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.CategoryDescription, "", new { @class = "text-danger" })
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" id="btnSaveCategory">Save</button>
</div>
</div>
</div>
</div>
<a href="@Url.Action("Edit", "Category", new { area="Categories", id = item.CategoryID })"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span>Edit</a>
在你看来有
<a href="@Url.Action("Edit", "Category", new { area = "Categories", id = item.CategoryID }) data-toggle="modal", data-target="#categoryEditModal" data-modal=""><span class="glyphicon glyphicon-edit" aria-hidden="true"></span>Edit</a>
<div id='myModal' class='modal fade in'>
<div class="modal-dialog">
<div class="modal-content">
<div id='myModalContent'></div>
</div>
</div>
</div>
添加jQuery:
$(function () {
$.ajaxSetup({ cache: false });
$("a[data-modal]").on("click", function (e) {
$('#myModalContent').load(this.href, function () {
$('#myModal').modal({
/*backdrop: 'static',*/
keyboard: true
}, 'show');
});
return false;
});
});
并在您的控制器中返回部分视图:
Return PartialView("partialviewname")
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.