我有一个局部视图，希望从该视图显示包含更新数据的模式对话框。用户单击div将同时触发模态的显示和ajax调用，以更新模态的内容。
<div class="nMmenuItem" >
@using (Ajax.BeginForm("editItem","nMrestaurant",new { id = Model.ID },
new AjaxOptions
{
HttpMethod = "get",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "myModalDocument"
}, new { id = "ajaxEditItem" }))
{
<div data-toggle="modal" data-target="#myModal"
onclick="$('form#ajaxEditItem').submit();">
<div class="text-center">
@Model.name
</div>
</div>
}
</div>我在父视图中有一个模态的占位符：
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document" id="myModalDocument">
@Html.Partial("_editItem", new nMvMmenuItem())
</div>
</div>但是，当控制器动作期望AjaxResquest时，控制器将Request.IsAjaxRequest（）评估为false。
public async Task<ActionResult> editItem(int? id)
{
if (Request.IsAjaxRequest())
{
return PartialView("_editItem", await db.nMmenuItems.FindAsync(id));
}
return View();
}
这会刷新整个视图并阻止模态工作。
我在_Layout.cshtml页面中捆绑了以下脚本：
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery-ui-{version}.js",
"~/Scripts/jquery.unobstrusive*",
"~/Scripts/jquery.validate",
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"
谢谢你的帮助！
我发现将Submit（）附加到表单的onclick事件不会执行ajax请求。因此，我的解决方案是删除Ajax.SubmitForm，而是处理我的js中的click事件：
更新后的视图如下所示：
<div class="nMmenuItem">
<form method="get" action="@Url.Action("editItem","nMrestaurant",new { id = Model.ID })"
data-nM-ajax="true" data-nM-target="#myModalContent">
<div>
<div class="text-center">
@Model.name
</div>
</div>
</form>
在js中，我将表单提交绑定到父div的click事件：
$('.nMmenuItem').click(ajaxFormSubmit);
以及处理表单提交并打开结果模式对话框的函数：
var ajaxFormSubmit = function () {
var $form = $(this).children('form:first');
var options = {
url: $form.attr("action"),
type: $form.attr("method"),
data: $form.serialize()
};
$.ajax(options).done(function (data) {
var $target = $($form.attr("data-nM-target"));
$target.replaceWith(data);
$("#myModal").modal(dialogOpts);
});
return false;
};
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句