Javascript Html.BeginAjaxForm从操作返回数据并将其注入用户'；多姆

假设我有一个这样的表格：

@using (Ajax.BeginForm("ChangePassword", "User", new { area = "UserSettings" }, new
 AjaxOptions
 {
  HttpMethod = "POST",
  OnSuccess = "ShowMessage('Password successfully changed')"

 }, null))
 {
 @Html.TextBoxFor(m => m.Password, new { placeholder = "Password", @class = "form-control", @type = "password" })<br />
 @Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger", @style = "float:right;" })
 @Html.TextBoxFor(m => m.PasswordConfirm, new { placeholder = "Confirm password", @class = "form-control", @type = "password" })<br />
 @Html.ValidationMessageFor(model => model.PasswordConfirm, "", new { @class = "text-danger", @style = "float:right;" })
 <button type="submit" class="btn btn-primary">Change Password</button>
 }

我的问题是：

• 当我返回一个包含所有数据的视图时，如何将返回的数据注入到用户的DOM中，以便用户能够看到调用OnSuccess方法时所反映的更改？我可以注入jQuery中类似于done函数（.done（function（data）））的“data”对象在哪里

• 现在，将所有数据从我的控制器操作传输到OnSuccess方法并让用户看到他们调用的方法的结果的最简单方法是什么

有人能帮我解决这个问题吗？解决这个问题的最好办法是什么

我以前使用纯jQuery，我是这样做的：

$.post("/linktomymethod",{/*some parameters*/).done(function(data){
// then inject the returned data into the browser's DOM
}));

---

如果要使用

@Ajax.BeginForm（）

，则可以指定

AjaxOptions

的属性

<div id="changepassword">
    @using (Ajax.BeginForm(..., new AjaxOptions { UpdateTargetId = "changepassword" }, null))
    {
        ....
    }
<div>

并添加以下脚本

var url = '@Url.Action("ChangePassword", "User", new { area = "UserSettings" })';
$('form').submit(function (ev) {
    ev.preventDefault(); // prevent the default submit
    if (!$(this).valid()) { // check if the data is valid
        return; // exit the function
    }
    var formdata = $(this).serialize();`
    $.post(url, formdata, function(response) {
        $('changepassword').html(response);
    });
});

为了进一步提高性能，您只需返回一个包含无效属性及其相关错误的

JsonResult

，并更新由

@Html.ValidationMessageFor（）

生成的占位符元素。您的控制器代码将是

if (!ModelState.IsValid)
{
    var errors = ModelState.Keys.Where(k => ModelState[k].Errors.Count > 0).Select(k => new { propertyName = k, errorMessage = ModelState[k].Errors[0].ErrorMessage });
    return Json(errors);
}
// Save data
return Json(null);

---

在成功回调中，您可以循环遍历集合，根据属性名找到相应的

ValidationMessageFor（）

占位符，并添加错误消息和适当的类名。

为什么要使用

Ajax

方法而不是

$.Ajax（）

？@StephenMuecke不确定您的意思是什么？你能再给我澄清一下吗？：）我试着使用Ajax表单，但这里灵活性有限，我建议你使用jquery Ajax而不是Ajax begin表单，原因是a>易于理解且更灵活，b>我真的不认为这里的Ajax有多好。begin表单MVC团队甚至不再支持

Ajax

方法。使用jQuery方法可以为您提供更大的灵活性。但是既然你返回了一个视图（这应该是部分视图，您只需指定

UpdateTargetID

选项。您可以使用带有jquery加载方法的部分视图将部分视图填充到目标dom元素中。并且您可以使用UpdateTargetID作为@StephenMuecke saidAs always，这是最好的答案！非常感谢。您的回复为这个社区带来了光明！：-）

var url = '@Url.Action("ChangePassword", "User", new { area = "UserSettings" })';
$('form').submit(function (ev) {
    ev.preventDefault(); // prevent the default submit
    if (!$(this).valid()) { // check if the data is valid
        return; // exit the function
    }
    var formdata = $(this).serialize();`
    $.post(url, formdata, function(response) {
        $('changepassword').html(response);
    });
});

if (!ModelState.IsValid)
{
    var errors = ModelState.Keys.Where(k => ModelState[k].Errors.Count > 0).Select(k => new { propertyName = k, errorMessage = ModelState[k].Errors[0].ErrorMessage });
    return Json(errors);
}
// Save data
return Json(null);