Question

我想做什么：通过 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 的原因。

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＆＃34; InsertionMode＆＃34;和＆＃34; UpdateTargetId＆＃34;共同努力告诉您的观点，即返回的数据需要插入到指定的目标ID中。

使用ajax提交结果

1 个答案: