javascript - Html.BeginAjaxForm 从操作返回数据并将其注入(inject)到用户的 DOM 中

Question

假设我有一个这样的表单:

@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>
 }

本质上，它是一个通过验证设置来更改密码的表单。

现在我的问题是，如果我有这样的操作:

[HttpPost]
[ActionName("ChangePassword")]
public ActionResult ChangePassword(MyObjectClass model)
{
if(!ModelState.IsValid)
{
return View(model);
}
else{
ViewBag.MyData = // some data here;
return View();
}
}

我的问题是:

• 当我返回一个包含所有数据的 View 时，我实际上如何将返回的数据注入(inject)到用户的 DOM 中，以便用户可以在调用 OnSuccess 方法时看到反射(reflect)的更改？我可以像 jQuery 中的 did 函数一样注入(inject)的“数据”对象在哪里(.done(function(data)))？

• 现在将 Controller 操作中的所有数据传输到 OnSuccess 方法并实际让用户看到他们调用的方法的结果的最简单方法是什么？

有人可以帮我解决这个问题吗？解决这个问题的最佳方法是什么？

我之前曾经使用纯 jQuery，并且我是这样做的:

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

Answer 1

如果您想使用@Ajax.BeginForm() ，然后指定 UpdateTargetId AjaxOptions的属性(property)，例如

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

它将取代您的 <form>具有由您的 ChangePassword() 返回的 View 的元素方法。另请注意，您应该返回 PartialView .

但是，您应该坚持使用 $.ajax()这些方法为您提供了更大的灵 active 。通常您处理表格 .submit()事件，查看.valid()方法(如果没有显示客户端验证消息，则取消 ajax 调用)，然后使用该方法返回的部分 View 更新 DOM。

替换您的@using (Ajax.BeginForm(..) {代码很简单

<div id="changepassword">
    @using (Html.BeginForm()) {
        ....

并添加以下脚本

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() 生成的占位符元素。您的 Controller 代码将是

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()根据属性名称占位符，并添加错误消息和适当的类名称。