asp.net mvc3 jquery ui dialog e validazione client

Question

Ho un problema con la convalida del client nell'applicazione asp.net mvc3.

mio codice è:

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

E infine la mia visione parziale:

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

Nel mio web.config ho acceso impostazioni dell'applicazione UnobtrusiveJavaScript e ClientValidatin .

Se clicco sul pulsante di invio sulla finestra di dialogo ui jquery, mvc si aggiorna completamente senza la convalida del client?

Dov'è il problema?

Grazie per qualsiasi aiuto

EDIT:

Nella mia pagina layout abbia inserito questo script:

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

EDIT 2

Nel mio exemaple metto:

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

prima che chiami dialogo ui jquery e convalida del client funziona perfettamente.

Answer 1

È perché si sta caricando un PartialView in una vista che è già stata analizzata dalla libreria jquery.validator.unobstrusive. È necessario istruire la libreria per ri-analizzare la pagina per tenere conto degli attributi di convalida di PartialView iniettati. Leggete il numero this blog post di mio sull'argomento, si spera che risponda alla vostra domanda.

Answer 2

Sono inclusi i file JavaScript corretti per la convalida del lato client?

Controllare la console JavaScript quando si esegue l'azione presentare, scommetto che c'è un errore ci che sta causando all'errore il JavaScript e quindi di default del form azione di invio è calci in.

Answer 3

Ho faticato molto con questo problema, Dopo diverse ore ho concluso che jQuery esegue il rendering dell'elemento HTML DIALOG, al di fuori dell'elemento del modulo. Poiché jQuery.plugin di convalida funziona solo all'interno dell'elemento FORM, E 'necessario tornare alla finestra di dialogo all'interno del campo di applicazione Modulo, questo può essere fatto dalla seguente gestione degli eventi aperti:

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

Oltre al cablaggio il vostro pulsante di invio come so

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

È necessario analizzare il modulo html specifico, non ha funzionato con il costruttore predefinito.

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

Sto cercando di trovare un modo in modo che non c'è bisogno di cablare ciascun pulsante di invio in ogni forma, pubblicheremo qui se trovo un modo.