asp.net mvc3 jquery ui對話框和客戶端驗證

我有asp.net mvc3應用程序中的客戶端驗證問題。asp.net mvc3 jquery ui對話框和客戶端驗證

我的代碼如下：

function loadEditCategoryDialog(categoryId) { 
    $.ajax({ 
     url : "/rovastamp3/Admin/CategoryEditDialog", 
     data : "categoryId="+categoryId, 
     success : function(data){ 
      $("#popup_dialog").html(data); 
      $("#popup_dialog").dialog({   
       modal: true, 
       draggable: false, 
       resizable: false, 
       title: "Upravit kategorii", 
       width: 600, 
       height: 500, 
      });        
     } 
    }); 
}

控制器：

[HttpGet] 
public ActionResult CategoryEditDialog(int categoryId) 
{ 
    CategoryEditViewModel categoryEditViewModel = new CategoryEditViewModel(); 
    categoryEditViewModel.Category = _postAuctionCategoryRepo.Query() 
     .SingleOrDefault(x => x.Id == categoryId); 

    return PartialView(categoryEditViewModel); 
} 

[HttpPost] 
public ActionResult CreateNewCategory(CategoryEditViewModel categoryEditViewModel) 
{ 
    if (ModelState.IsValid) 
    { 
     return RedirectToAction("Index"); 
    } 
    return View("CategoryEditDialog", categoryEditViewModel); 
}

最後我的部分觀點：

@model Rovastamp.MVC3.ViewModels.AdminController.CategoryEditViewModel 
<h2>Upravit kategorii @Model.Category.Name</h2> 
@{Html.EnableClientValidation();} 
@using (Html.BeginForm("CreateNewCategory", "Admin")) 
{ 
    @Html.ValidationSummary(true) 
    <fieldset> 
     <legend>Objednávkový formulář</legend> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.Category.Name) 
     </div> 
     <div class="editor-field"> 
      @Html.TextBoxFor(model => model.Category.Name) 
      @Html.ValidationMessageFor(model => model.Category.Name) 
     </div> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.Category.Position) 
     </div> 
     <div class="editor-field"> 
      @Html.TextBoxFor(model => model.Category.Position) 
      @Html.ValidationMessageFor(model => model.Category.Position) 
     </div> 

     <input type="submit" value="Upravit" class="submit_button" />    
    </fieldset> 
}

在我的web.config我打開UnobtrusiveJavaScript和ClientValidatin應用程序設置。

如果我clock在jquery ui對話框上提交按鈕，mvc會進行全面刷新而無需客戶端驗證？

問題在哪裏？

感謝所有幫助

編輯：

在我的佈局頁我包括此腳本：

jquery.unobtrusive-ajax.js
jquery.validate.js
jquery.validate.unobtrusive.js

EDIT 2

在我exemaple我把：

jQuery.validator.unobtrusive.parse('#popup_dialog');

之前，我打電話jQuery UI的對話和客戶端驗證完美的作品。

來源

2011-02-06 Mennion

這是因爲你被加載PartialView放入已由jquery.validator.unobstrusive庫解析的View中。您需要指示庫重新解析頁面以考慮注入的PartialView驗證屬性。請閱讀我的主題this blog post，希望能回答你的問題。

來源

2011-02-06 13:10:40 davidferguson

非常感謝。它的作品:) – Mennion 2011-02-06 17:43:08

您是否包含適合客戶端驗證的JavaScript文件？

檢查，當你執行提交操作的JavaScript控制檯，我敢打賭，有一個的錯誤是造成JavaScript的錯誤出來，然後表單的默認提交操作在踢。

來源

2011-02-06 01:20:02 TheRightChoyce

那麼，試試看，並控制檯顯示0錯誤。奇怪的 – Mennion 2011-02-06 02:33:28

你可能需要`MicrosoftAjax.js`和 `MicrosoftMvcAjax.js`？但我不確定。我還沒有機會使用不顯眼的jQuery邏輯。 – TheRightChoyce 2011-02-06 03:21:59

我在這個問題上苦苦掙扎，幾個小時後，我得出結論，jQuery在表單元素之外呈現DIALOG HTML元素。由於jQuery。驗證插件只能內的表單元素有必要即可返回對話框的形式範圍內，這可以通過以下開放事件處理來完成：

$('#dialogDivId').dialog({ 
     autoOpen: false, 
     width: 500, 
     height: 500, 
     minheight: options.minheight, 
     minwidth: options.minwidth, 
     modal:false, 
     open: function (type, data) { 
      $(this).appendTo($('form')); // reinsert the dialog to the form 
     } // And Solve your validation inside Jquery dialog 
});

來源

2012-01-19 14:09:33

除了佈線你喜歡的提交按鈕所以

$("#SubmitButton").click(function(){ 
    if (!$("#editForm").valid()){ 
     return false; 
    } 
     });

您需要具體的HTML表單解析，它不適用於我使用默認的構造函數。

$.validator.unobtrusive.parse("#editForm");

我想弄清楚一種方法，以便您不必在每個窗體上連接每個提交按鈕，如果我找到方法將在這裏發佈。

來源

2012-06-29 13:33:52 Jonathan

asp.net mvc3 jquery ui對話框和客戶端驗證

回答

相關問題