ASP.NET MVC jquery.UI對話框 - 如何驗證服務器上的對話框輸入並返回錯誤？

Question

我使用jQuery1.4.2，ASP.NET MVC 2和jQuery.UI-1.8。

我正在創建一個數據輸入對話框，它在所有數據都有效時工作正常，但我想驗證服務器上的輸入數據並將錯誤返回給描述錯誤的對話框，我不太清楚如何做到這一點，並保持對話框打開。單擊鏈接時會打開該對話框。解決方案可能是嘗試繞過MVC框架的默認綁定處理提交按鈕點擊並創建期望的ProfilePermission對象，並調用Controller的AddPermission POST Action方法，但我希望可以有一個更簡單的方法，而不必寫更多的jQuery/JavaScript代碼來處理按鈕點擊並將數據傳遞到/從服務器。

我的腳本代碼看起來像

$("#dialog").dialog({ modal: true, 
    position: ['center', 180], 
    width: 500, 
    height: 130, 
    autoOpen: false 
}); 

$(".addPermissionDialog").click(function (event) { 
    event.preventDefault(); 
    $("#dialog").dialog('open'); 
    return false; 
}); 

我查看

<div id="dialog" title="Add Permission"> 
<%: Html.ValidationSummary("") %> 
<% using (Html.BeginForm("AddPermission", "Profile")) 
{ %> 
    <%: Html.Hidden("PersonId") %> 
    <%: Html.Hidden("ProfileId") %> 
    <div class="editor-label"> 
     <label for="PersonName">User Name:</label> 
     <%: Html.TextBox("PersonName")%> 
     <label for="PermissionType">Permission:</label> 
     <select name="PermissionTypeId" id="PermissionTypeId" > 
      <option value="2">Edit</option> 
      <option value="3">View</option> 
     </select> 
    </div> 
    <br /> 
    <p> 
    <input type="submit" name="saveButton" value="Add Permission" /> 
    <input type="submit" id="cancelButton" name="cancelButton" value="Cancel" /> 
    <script type="text/javascript"> 
     document.getElementById("cancelButton").disableValidation = true; 
    </script> 
    </p> 
<% } %> 
</div> 
<br /> 
<p> 
    <%: Html.ActionLink("Add Permission", "AddPermission", new { profileId = Model.First().ProfileId }, new { @class = "addPermissionDialog" })%> 
</p> 

我的控制器行動

[AcceptVerbs("Post")] 
    [HandleError] 
    public ActionResult AddPermission(string cancelButton, ProfilePermission profilePermission) 
    { 
     ViewData["Controller"] = controllerName; 
     ViewData["CurrentCategory"] = "AddPermission"; 
     ViewData["ProfileId"] = profilePermission.ProfileId; 

     PermissionTypes permission = repository.GetAccessRights(profilePermission.ProfileId); 
     if (permission == PermissionTypes.View || permission == PermissionTypes.None) 
     { 
      ViewData["Message"] = "You do not have access rights (Edit or Owner permissions) to this profile"; 
      return View("Error"); 
     } 

     // If cancel return to previous page 
     if (cancelButton != null) 
     { 
      return RedirectToAction("ManagePermissions", new { profileId = profilePermission.ProfileId }); 
     } 

     if (ModelState.IsValid) 
     { 
      repository.SavePermission(profilePermission); 

      return RedirectToAction("ManagePermissions", new { profileId = profilePermission.ProfileId }); 
     } 

     // IF YOU GET HERE THERE WAS AN ERROR 
     return PartialView(profilePermission); // The desire is to redisplay the dialog with error message 
    } 

以後編輯 我希望建立一種機制，將錯誤返回到對話框使用MVC的管道，我最終打破了並通過添加一個保存按鈕jquery.ui.dialog API並以這種方式處理問題。我從.aspx頁面中刪除了按鈕。我返回新的EmptyResult（）;從控制器的行動，如果一切正常，如果有錯誤 Response.StatusCode =（int）HttpStatusCode.BadRequest; 返回內容（errorMessage，MediaTypeNames.Text.Plain）;

// To add a button and bypass more of MVC plumbing 
    buttons: { 
     "Save": function() { 
      var dlg = $(this); 
      $.ajax({ 
       url: "/Profile/AddPermission", 
       type: 'POST', 
       data: { 
        PersonId: $("#PersonId").val(), 
        ProfileId: $("#ProfileId").val(), 
        PermissionTypeId: $("#PermissionTypeId").val(), 
        PersonName: $("#PersonName").val() 
       }, 
       success: function (data) { 
        dlg.dialog('close'); 
       }, 
       error: function (data) { 
        alert(data.responseText); 
       } 
      }); 
     } 
    } 

Answer 1

我正在做這種東西使用jquery.form和jquery對話框; 在後行動，如果一切都很好，你return Content("OK")如果不是你在處理成功後的響應功能後PartialView()（包含的ModelState錯誤）返回您檢查if it is "OK" close the dialog如果不是你設置$("#yourDialogDiv").html(responseHtmlThatYouGotFromTheServer)

Answer 2

我建議改變輸入型提交到正常的按鈕，使按鈕的點擊Ajax調用，以確保該對話框不會被關閉。根據Phils post，使用MVC2期貨庫中的JsonValueProviderFactory將數據發送到服務器。如果驗證失敗，則會在ajax error：選項中捕獲錯誤。如果數據有效，則從Ajax complete：選項關閉對話框。希望這可以幫助。