Asp.net MVC 4 Ajax.BeginForm 提交 + mvc.grid - 页面重新加载答案

【问题标题】：Asp.net MVC 4 Ajax.BeginForm submit + mvc.grid - page reloadingAsp.net MVC 4 Ajax.BeginForm 提交 + mvc.grid - 页面重新加载
【发布时间】：2013-10-07 09:27:10
【问题描述】：

我目前正在以实习生的身份从事 ASP.NET MVC 4 项目，并且正在尝试实现管理面板。目标是在网格 (MVC.GRID) 上显示所有用户并在同一页面上对其进行编辑。我已经设法在网格上显示所有用户，一旦选择了用户，它就会在网格下方显示信息并将其放入表单中（通过 ajax/jquery）。

问题是：表单验证显示在新页面上，而不是网格所在的页面上。我不知道为什么..

下面是我的代码。

这是放置表单的位置：

<div id="order-content">
  <p class="muted">
    Select a user to see his or her information
  </p>
</div>

表单本身（部分视图“_UserInfo）：

@using (Ajax.BeginForm("EditUser", "Admin", FormMethod.Post, 
  new AjaxOptions
  {
    InsertionMode = InsertionMode.Replace,
    HttpMethod = "POST",
    UpdateTargetId = "order-content"
  }))
{
  @Html.Bootstrap().ValidationSummary()
  @Html.Bootstrap().ControlGroup().TextBoxFor(x => x.Id)
  @Html.Bootstrap().ControlGroup().TextBoxFor(x => x.Name)
  @Html.Bootstrap().ControlGroup().TextBoxFor(x => x.Password)
  @Html.Bootstrap().SubmitButton().Text("Opslaan").Style(ButtonStyle.Primary)
}

选择一行后显示用户信息的 JQuery：

$(function () {
pageGrids.usersGrid.onRowSelect(function (e) {
  $.post("/Admin/GetUser?id=" + e.row.Id, function (data) {
    if (data.Status <= 0) {
      alert(data.Message);
      return;
    }
    $("#order-content").html(data.Content);
  });
});
});

我的管理员控制器：

[HttpPost]
public JsonResult GetUser(int id)
{
  var user = _UserService.Get(id);
  var input = _EditInputMapper.MapToInput(user);
  if (user == null)
    return Json(new { Status = 0, Message = "Not found" });

  return Json(new { Content = RenderPartialViewToString("_UserInfo", input) });
}

[HttpPost]
public ActionResult EditUser(AdminUserEditInput input)
{
  if (ModelState.IsValid)
  {
    // todo: update the user
    return View();
  }
  // This is where it probably goes wrong..
  return PartialView("_UserInfo",input);
}

谁能看到我的代码有什么问题？

谢谢。

【问题讨论】：

在“订单内容”中，您正在显示“_UserInfo”。并且这个 _UserInfo 与模型数据绑定。所以模型验证应该显示在“订单内容”中。不是吗？还是我不明白你的问题？
是的。但是当我提交空字段时，页面会重新加载并显示我的表单并进行验证，但我的网格消失了。似乎 mvc 创建了一个新页面，其中只有部分视图。
检查ajax提交，可以使用Firebug检查...页面不应该在ajax提交的情况下重新加载

标签： c# jquery ajax asp.net-mvc mvcgrid

【解决方案1】：

当 ModelState 有效并且您返回 View() 时，此完整视图是否嵌入到 order-content 中？我怀疑不是，如果是这样，那是因为没有发送 ajax 请求。您可能没有包含 jquery.unobtrusive-ajax js 文件

【讨论】：

不，它没有，但我还没有实现它。
为了能够使用不显眼的功能，您必须包含此 js 文件。我仍然想知道您是否包含了 jquery.unobtrusive-ajax.js 文件。正如 kandroid 还提到的那样，请求不是通过 ajax 发送的。 Ajax.BeginForm 无法正常工作，因为您返回的完整视图也应该嵌入“order-content”div

【解决方案2】：

我现在可以使用它了。使用 jsonvalidator。我不知道这是否是一个好的解决方案，但它现在可以完成工作..

这是我在 AdminController

中所做的更改

[HttpPost]
public ActionResult EditUser(AdminUserEditInput input)
{
  int id = (int)TempData["UserID"];

  if (ModelState.IsValid)
  {
    _UserService.ChangeMail(id, input.Mail);
    _UserService.ChangeName(id, input.Firstname, input.Name);

    return new RedirectResult(Url.Action("Users", "Admin") + "#id=" + id);
  }
  else
  {

    return new JsonResult { Data = new { Valid = false, Errors = Validator.CheckModelErrors(ModelState) } };
  }
}

添加了一个 JsonValidator 类：

  public static class Validator // todo: doesn't belong in the controllers directory ?
  {
    public static List<JsonError> CheckModelErrors(System.Web.Mvc.ModelStateDictionary modelstate)
    {
      List<JsonError> errorlist = new List<JsonError>();
      if (modelstate != null && modelstate.Values != null)
      {
        foreach (var m in modelstate.Values)
        {
          if (m.Errors != null)
          {
            foreach (var e in m.Errors)
            {
              errorlist.Add(new JsonError() { ErrorMessage = e.ErrorMessage ?? "" });
            }
          }
        }
      }
      return errorlist;
    }
  }

还有一个 JsonError 类..

  public class JsonError // todo: doesn't belong in the controllers directory ?
  {
    public string ErrorMessage { get; set; }
    public bool HasError { get; set; }
    public bool CanPerform { get; set; }
  }

最后一点，js：

$(document).on('submit', '#UserForm', function (e) {
    e.defaultPrevented();
    $('#UserForm').validate();
    $.post($(this).attr("action"), $(this).serialize(), function (json) {
      if (json.Valid) {
        $("#order-content").html('<p class="muted"> Select a user.</p>');
      }
      else {
        $("#ShowValidation").empty();
        var list = $("#ShowValidation").append('<ul></ul>').find('ul');
        $.each(json.Errors, function (index, optionData) {
          list.append('<li>' + optionData.ErrorMessage + '</li>');
        })
      }
    }, "json");
  });

我正在考虑另一种方法来管理它，因为这只是暂时的.. 将输入与验证消息一起存储在会话中并让 js 将其放入 _UserInfo 视图中是否是一个好主意？

【讨论】：