我想做什么:通过 ajax 提交表单并将部分视图返回到页面中的现有 div (无需导航远离当前页面)
我了解到ajaxSubmit允许表单提交而无需重定向到其他页面。
所以,我有一张表格:
<form id="addForm" method="post" action="_SaveConcession" enctype="multipart/form-data">
动作_SaveConcession
是控制器方法:
public ActionResult _SaveConcession(parameters ...)
{
return PartialView("Common/_PopUpSave");
}
返回部分视图。
剧本:
$('#addForm').submit(function (e) {
e.preventDefault();
...
if (formValid) {
$(this).ajaxSubmit({
type: 'POST',
dataType: "html",
complete: function (data) {
$('#div-for-partial').html(data);
$("#addConcessionWindow").data("kendoWindow").close();
}
});
}
});
使用ajaxSubmit
,行为不符合预期:div-for-partial
的内容已清除,并且未显示任何内容。如果我使用传统的 ajax ,则div-for-partial
会填充控制器方法中返回的部分视图。以下是 ajax ,按预期工作。
$.ajax({
type: 'POST',
url: "/MD/_SaveConcession",
data: { 'id': id },
dataType: "html",
complete: function (data) {
$('#div-for-partial').html(data);
}
});
但是,最后一种方法不适合我,因为部分视图会返回到新页面 - 这就是我尝试使用 ajaxSubmit 的原因。
答案 0 :(得分:2)
您可以将MVC方法与AJAX表单助手一起使用
@using (Ajax.BeginForm("_SaveConsession", "MD", new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "div-for-partial", OnSuccess = "postSuccess", OnFailure = "postFailed" }))
{
// your form fields here
}
<script>
function postSuccess() {
// anything else that needs handled after successful post
}
function postFailed() {
alert("Failed to submit");
}
</script>
ajaxOptions&#34; InsertionMode&#34;和&#34; UpdateTargetId&#34;共同努力告诉您的观点,即返回的数据需要插入到指定的目标ID中。