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

Question

我目前正在研究一个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); 
    }); 
}); 
}); 

我的AdminController：

[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); 
} 

任何人都可以看到我的代码有什么问题吗？

谢谢。

Answer 1

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

Answer 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视图中？