2011-02-06 60 views
9

我有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的对话和客户端验证完美的作品。

回答

30

这是因为你被加载PartialView放入已由jquery.validator.unobstrusive库解析的View中。您需要指示库重新解析页面以考虑注入的PartialView验证属性。请阅读我的主题this blog post,希望能回答你的问题。

+0

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

0

您是否包含适合客户端验证的JavaScript文件?

检查,当你执行提交操作的JavaScript控制台,我敢打赌,有一个的错误是造成JavaScript的错误出来,然后表单的默认提交操作在踢。

+0

那么,试试看,并控制台显示0错误。奇怪的 – Mennion 2011-02-06 02:33:28

+0

你可能需要`MicrosoftAjax.js`和 `MicrosoftMvcAjax.js`?但我不确定。我还没有机会使用不显眼的jQuery逻辑。 – TheRightChoyce 2011-02-06 03:21:59

1

我在这个问题上苦苦挣扎, 几个小时后,我得出结论,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 
}); 
3

除了布线你喜欢的提交按钮所以

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

您需要具体的HTML表单解析,它不适用于我使用默认的构造函数。

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

我想弄清楚一种方法,以便您不必在每个窗体上连接每个提交按钮,如果我找到方法将在这里发布。