net mvc3 jquery ui对话框和客户端验证

I have problem with client validation in asp.net mvc3 application.

我对asp.net mvc3应用程序中的客户端验证有问题。

My code looks :

我的代码:

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,
            });                             
        }
    });
 }

Controller :

控制器:

[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);
}

And finally my partial view :

最后我的部分观点是

@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>
}

In my web.config I turned on UnobtrusiveJavaScript and ClientValidatin app settings.

在我的网站。我打开了UnobtrusiveJavaScript和ClientValidatin应用程序设置。

If I clik on submit button on jquery ui dialog, mvc does full refresh without client validation?

如果我在jquery ui对话框上点击submit按钮，mvc会在没有客户端验证的情况下进行完全刷新吗?

Where is the problem?

问题在哪里?

Thanks for any help

感谢任何帮助

EDIT :

编辑:

In my Layout page i include this scripts :

在我的版面中，我包括了以下脚本:

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

EDIT 2

编辑2

In my exemaple i put :

我举个例子:

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

before i call jquery ui dialog and client validation works perfectly.

在我调用jquery ui对话框和客户端验证之前，它工作得很好。

4 个解决方案

#1

It is because you are loading a PartialView into a View that has already been parsed by the jquery.validator.unobstrusive library. You need to instruct the library to re-parse the page to take into account your injected PartialView validation attributes. Read this blog post of mine on the subject it will hopefully answer your question.

这是因为您正在将PartialView加载到jquery.validator已经解析过的视图中。unobstrusive图书馆。您需要指示库重新解析页面，以考虑注入的PartialView验证属性。阅读这篇博客文章，希望能回答你的问题。

#2

In addition to wiring up your submit button like so

除了像这样连接你的提交按钮

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

You need to specific the html form to parse, it didn't work for me using the default constructor.

您需要指定要解析的html表单，使用默认构造函数时，它对我不起作用。

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

I am trying to figure out a way so that you do not have to wire up each submit button on each form, will post here if I find a way.

我正在想办法，这样你就不用把每个表单上的每个提交按钮连接起来，如果我找到办法，我会在这里发布。

#3

I struggled hard with this issue, After several hours I concluded that jQuery render the DIALOG HTML element, outside the form element. Since jQuery.Validation plugin works only within the FORM element, It is necessary to return back the Dialog inside the Form scope, this can be done by the following open event handling:

我努力解决这个问题，几个小时后我得出结论，jQuery在表单元素之外呈现了对话框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
});

#4

Are you including the proper JavaScript files for the client side validation?

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

Check the JavaScript console when you execute the submit action, I bet there's an error there that's causing the JavaScript to error out and then the form's default submit action is kicking in.

当您执行提交操作时，请检查JavaScript控制台，我敢打赌这里有一个错误导致JavaScript出错，然后表单的默认提交操作开始启动。

#1

#2