2010-05-13 38 views
1

我使用jQuery1.4.2,ASP.NET MVC 2和jQuery.UI-1.8。ASP.NET MVC jquery.UI對話框 - 如何驗證服務器上的對話框輸入並返回錯誤?

我正在創建一個數據輸入對話框,它在所有數據都有效時工作正常,但我想驗證服務器上的輸入數據並將錯誤返回給描述錯誤的對話框,我不太清楚如何做到這一點,並保持對話框打開。單擊鏈接時會打開該對話框。解決方案可能是嘗試繞過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); 
       } 
      }); 
     } 
    } 
+0

而不是函數(數據)dlg.dialog('close')檢查響應是否「OK」 - >真正關閉它不是真的用新的html設置div $(「#dialog」)。html(data)' – Omu 2010-05-15 19:19:38

+1

Thanks Omu那是我爲之奮鬥的解決方案。 – Rick 2010-05-16 15:33:33

回答

1

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

+0

謝謝,您的解決方案將使生活變得更加輕鬆......我感謝您的幫助! – Rick 2010-05-16 15:30:11

0

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

+0

感謝您的建議!我只是希望有一種機制可以讓我使用更多的MVC管道......我不知道JsonValueProvider工廠。這看起來很有趣。我會試一試...再次感謝。 – Rick 2010-05-14 01:31:46