Question

在此应用程序中，我已经获得了部分视图＆＃39; MessageForm ＆＃39;有一个简单的Ajax表单，如下所示：

@using (Ajax.BeginForm("", "", new AjaxOptions { HttpMethod = "POST" }, new { id = "addForm", enctype = "multipart/form-data" }))
{
    @Html.LabelFor(model => model.Message) //displays "Hello"
}

提交表单后，将调用控制器上的 ChangeMessage 函数：

$('#addForm').submit(function () {
    var formdata = new FormData(document.forms.namedItem("addForm")); 
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '@Url.Action("ChangeMessage")');
    xhr.send(formdata);
    return false;
});

此ChangeMessage（）方法只是修改模型中的Message属性，并再次返回相同的局部视图：

[HttpPost]
[ValidateAntiForgeryToken]
public PartialViewResult ChangeMessage(MessageModel model)
{
    model.Message = "Goodbye";
    return PartialView("MessageForm", model);
}

消息更新为＆＃34; Goodbye＆＃34;在模型中正确（我已经调试了视图），但输出中显示不，输出HTML仍显示＆＃34; Hello＆＃34;返回视图时。表单中的以下行仍在输出以下旧消息：

@Html.LabelFor(model => model.Message) //correct when debugged as "Goodbye", but still displaying "Hello" in the browser

好像视图已经再次渲染，但没有实际输出。

Ajax很新，所以我最有可能在这里误解了什么？

Answer 1

Ajax.BeginForm帮助程序是Microsoft Unobtrusive Ajax库的一部分，但您并没有完全使用它。确保您已完成以下操作：

添加Javascript库：Install-Package Microsoft.jQuery.Unobtrusive.Ajax
确保您的布局引用了jquery.unobtrusive-ajax.js文件

使用@Ajax.BeginForm，您需要指定AjaxOptions告诉它如何处理响应。在您的情况下，我怀疑您想要用结果替换表单的内容：

<div id="myform">
    @using (Ajax.BeginForm("ChangeMessage", new AjaxOptions { UpdateTargetId = "myform" }))
    {
        @Html.EditorFor(m => m.Message)
        <input type="submit" />
    }
</div>

您不需要使用Javascript来使用jquery提交表单 - 不显眼的库会为您执行此操作。

最后，您需要修改ChangeMessage视图，因为LabelFor只显示字段名称，而不是模型的内容。

MVC - 在Ajax POST之后没有更新PartialView

1 个答案: