用 ajax 的部分视图填充 div 提交结果

Question

我想做什么：通过 ajax 和 return 提交一个 局部视图 的表单到页面中现有 div（不离开当前页面）

我了解到 ajaxSubmit 允许提交表单而无需重定向到其他页面。

所以，我有一个表格：

<form id="addForm" method="post" action="_SaveConcession" enctype="multipart/form-data">

动作_SaveConcession是控制器方法：

public ActionResult _SaveConcession(parameters ...)
{
     return PartialView("Common/_PopUpSave");
}

其中 return 是局部视图。

脚本：

$('#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 将填充 partial view returned in控制器方法。下面是按预期工作的 ajax。

$.ajax({
    type: 'POST',
    url: "/MD/_SaveConcession",
    data: { 'id': id },
    dataType: "html",
    complete: function (data) {
        $('#div-for-partial').html(data);
    }
});

但是，最后一种方法不适合我，因为 部分视图 被 return 编辑到新页面中 - 这就是我尝试使用 ajax提交.

Answer 1

您可以将 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 "InsertionMode" 和 "UpdateTargetId" 一起工作，告诉您的视图返回的数据需要插入指定的目标 id。

用 ajax 的部分视图填充 div 提交结果

Filling div with partial view from ajax submit result

jquery

ajax

asp.net-mvc

form-submit

ajaxsubmit