在能够显示带有 url 操作链接的模态对话框方面,我显然遗漏了一些东西。
我知道如何通过 jQuery 单击事件显示 Bootstrap 对话框,但我希望做的是:
我有一个索引页面,上面有一个 url.action 链接。当用户单击链接时,我链接到适当的 Controller 操作方法(编辑),没有任何问题(在调试期间看到),希望显示 Bootstrap 模式弹出对话框。但是,没有模式对话框弹出。
如果我在操作链接上包含数据目标,该链接甚至都不起作用。如果我删除它,它会到达 View ,但不会弹出模式对话框,因为链接上没有任何内容说明数据目标是什么。我希望我在模式弹出窗口目标的链接上的语法不正确。我希望如果我为对话框包含适当的 Bootstrap 属性,它就会弹出。
我真的需要一些帮助,我将不胜感激。
这是我的索引页面上的链接(包含数据目标)。再次注意,如果我从下面的代码片段中排除“data-toggle”和“data-target”,我会进入 View ,但没有弹出对话框。
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>
这是我的目标 View 。我可以在调试时验证模型中填充了 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>
在Index页面编辑代码,弹出对话框
<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;
});
});
然后在您的 Controller 中返回局部 View :
Return PartialView("partialviewname")
关于javascript - 无法显示带有 asp.net mvc url.action 链接的 Bootstrap 对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28101693/