2011-02-06 22 views
9

Tengo un problema con la validación del cliente en la aplicación asp.net mvc3.asp.net mvc3 jquery ui diálogo y validación del cliente

Mi código es:

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

controlador:

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

Y por último, mi vista parcial:

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

En mi web.config Encendí configuración de la aplicación javascript no obstructivo y ClientValidatin .

Si hago clic en el botón Enviar en el diálogo de jquery ui, mvc realiza una actualización completa sin la validación del cliente?

¿Dónde está el problema?

Gracias por cualquier ayuda

EDIT:

En mi página Diseño Incluyo este guiones:

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

EDIT 2

En mi exemaple que puse:

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

antes de que llame de diálogo jQuery UI y validación del cliente funciona perfectamente.

Respuesta

30

Es porque se carga un Vista parcial en una vista que ya ha sido analizada por la biblioteca jquery.validator.unobstrusive. Debe indicar a la biblioteca que vuelva a analizar la página para tener en cuenta los atributos de validación de PartialView inyectados. Lea this blog post mía sobre el tema que con suerte responderá a su pregunta.

+0

Muchas gracias. Funciona :) – Mennion

+0

+1 Desearía poder animarte más David. Exactamente lo que he estado necesitando. – gnome

+0

@gnome :) puede abrir su perfil y upvote todos sus respuestas y preguntas, todo es posible – Omu

0

¿Está incluyendo los archivos JavaScript adecuados para la validación del lado del cliente?

Comprobar la consola de JavaScript cuando se ejecuta la acción de envío, apuesto a que hay un error ahí que está causando el código JavaScript a error y luego por defecto del formulario presente acción es patear en.

+0

Bien, pruébalo y la consola muestra 0 error. Extraño – Mennion

+0

Es posible que necesite 'MicrosoftAjax.js' y ' MicrosoftMvcAjax.js'? no estoy seguro, sin embargo. No he tenido la oportunidad de utilizar la discreta lógica jquery todavía. – TheRightChoyce

1

Luché mucho con este problema, Después de varias horas, llegué a la conclusión de que jQuery representa el elemento DIALOG HTML, fuera del elemento de formulario. Desde jQuery.plugin de validación funciona sólo dentro del elemento FORM, Es necesario volver al diálogo dentro del alcance de forma, esto se puede hacer mediante el siguiente manejo de eventos abiertos:

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

Este es el problema correcto, pero interfiere con la interfaz de usuario de diálogo. Lo resolví con: 'open: function (type, data) { $ (this) .wrap ("

"); } ' – codekaizen

3

Además de cableado de su botón de enviar al igual por lo

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

es necesario específica del formulario hTML para analizar, no funcionó para mí utilizando el constructor por defecto.

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

estoy tratando de encontrar una manera para que usted no tiene que cablear cada botón de enviar en cada formulario, será puesto aquí si encuentro un camino.

Cuestiones relacionadas