asp.net mvc3 jquery UI диалог и проверка клиента

Question

У меня проблема с проверкой клиента в приложении asp.net mvc3.

Мой код выглядит так:

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

И, наконец, мой частичный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>
}

В моем файле web.config я включил настройки приложения UnobtrusiveJavaScript и ClientValidatin.

Если я нажимаю кнопку подтверждения в диалоговом окне пользовательского интерфейса jquery, mvc полностью обновляется без проверки клиента?

В чем проблема?

Спасибо за любую помощь

РЕДАКТИРОВАТЬ:

На моей странице макета я включаю следующие сценарии:

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

РЕДАКТИРОВАТЬ 2

В моем примере я положил:

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

, прежде чем я вызову диалоговое окно jquery ui, и проверка клиента работает отлично.

Answer 1

Это происходит потому, что вы загружаете PartialView в представление, которое уже было проанализировано библиотекой jquery.validator.unobstrusive. Вам нужно дать указание библиотеке повторно проанализировать страницу, чтобы учесть введенные атрибуты проверки PartialView. Прочитайте эту запись моего блога на эту тему, надеюсь, она ответит на ваш вопрос.

Answer 2

В дополнение к подключению кнопки отправки следующим образом:

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

Вам необходимо указать html-форму для разбора, у меня не получилось использовать конструктор по умолчанию.

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

Я пытаюсь найти способ, чтобы вам не приходилось связывать каждую кнопку отправки в каждой форме, я буду публиковать здесь, если я найду способ.

Answer 3

Я боролся с этой проблемой, Через несколько часов я пришел к выводу, что jQuery отображает HTML-элемент DIALOG вне элемента формы. Поскольку плагин jQuery.Validation работает только внутри элемента FORM, Необходимо вернуть обратно диалог внутри области формы, это можно сделать с помощью следующей открытой обработки событий:

  $('#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
});

Answer 4

Включаете ли вы правильные файлы JavaScript для проверки на стороне клиента?

Проверьте консоль JavaScript при выполнении действия отправки, держу пари, что там есть ошибка, из-за которой JavaScript выдает ошибку, а затем запускается действие отправки формы по умолчанию.