Partial View中的MVC AJAX表单第一次发布到ajax,第二次发布完整帖子

时间:2013-05-24 19:32:54

标签: jquery asp.net-mvc razor asp.net-mvc-partialview

我遇到的问题是,我第一次发布表单时使用ajax和更新,但第二次发布完整的帖子并用部分视图替换页面。我已经检查过我UnobtrusiveJavaScriptEnabled = true并且在我不引人注目的脚本上用live替换了on ...仍然有同样的问题。

更新:仅在ModelState无效时发生。

这是关闭我找到答案,但仍然没有解决它: Ajax.BeginForm doesn't work properly

任何你能发光的光都将受到赞赏。

这是我的主要观点(测试员):

@{
ViewBag.Title = "testView";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>
    My TestView</h2>
    @{Html.RenderPartial("_Form", new Project.Models.TestModel());}
<div>
    @Html.ActionLink("Back to List", "Index")
</div>

这是我的部分视图表单(_Form):

@model Project.Models.TestModel
<div class="updatable">
<form method="post" action="@Url.Action("TestProjUpdate")" data-site-ajax="true" data-site-target=".updatable">
<fieldset>
    <div class="editor-label">
        @Html.LabelFor(model => model.TextField)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.TextField)
        @Html.ValidationMessageFor(model => model.TextField)
    </div>

    <p>
        <input type="submit" value="Create" />
    </p>
</fieldset>
</form>
</div>

这是我的控制者:

public ActionResult Tester()
{
    return View();
}

[HttpPost]
public PartialViewResult TesterProjUpdate(TestModel model)
{

    if (!ModelState.IsValid)
        return PartialView("_Form", model);

    TestProj.Vehicle vehicle = new TestProj.Vehicle();

    if (Request.IsAjaxRequest())
    {
        return PartialView("_Vehicle", vehicle);
    }

    return PartialView("_Form", model);

}

最后我的jQuery ajax调用:

$(function () {

var ajaxFormSubmit = function () {
    var $form = $(this);

    var options = {
        url: $form.attr("action"),
        type: $form.attr("method"),
        data: $form.serialize(),
    };

    $.ajax(options).done(function (data) {
        var $target = $($form.attr("data-site-target"));
        $target.replaceWith(data);
    });

    return false;
};

$("form[data-site-ajax='true']").submit(ajaxFormSubmit);

});

你能给我的任何帮助都会很棒!

1 个答案:

答案 0 :(得分:1)

尝试更改

$("form[data-site-ajax='true']").submit(ajaxFormSubmit);

$("form[data-site-ajax='true']").one('submit', ajaxFormSubmit);

然后在你的$ target.replaceWith(数据)之后;添加

$("form[data-site-ajax='true']").one('submit', ajaxFormSubmit);