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視圖中？