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时，我如何将返回的数据注入用户的DOM，用户可以看到调用OnSuccess方法时反映的更改？我可以在jQuery（.done（function（data））中完成函数中注入的“数据”对象在哪里？
这里最简单的方法是将我的控制器操作中的所有数据传输到OnSuccess方法，并让用户真正看到他们调用的方法的结果？

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

之前我曾经使用过纯jQuery，而且我是这样做的：

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

Answer 1

如果您要使用@Ajax.BeginForm()，请指定AjaxOptions的{{3}}属性，例如

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

会将<form>元素替换为ChangePassword()方法返回的视图。另请注意，您应该返回PartialView。

但是，您应该坚持使用$.ajax()方法，因为这些方法可以提供更大的灵活性。通常，您处理表单.submit()事件，检查.valid()方法（如果没有显示客户端验证消息，则取消ajax调用），然后使用方法返回的部分视图更新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()生成的占位符元素。您的控制器代码将是

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()占位符，并添加错误消息和相应的类名。

Html.BeginAjaxForm从操作返回数据并将其注入用户的DOM

1 个答案: