从Ajax提交结果中填充DIV

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 。p>

Answer 1

您可以将MVC方法与Ajax形式helper

一起使用

@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"one_answers" updateTargetId"一起工作，以告诉您的观点，返回的数据需要插入指定的目标ID。