33

Actualmente estoy enfrentando un problema con la validación después de agregar contenido dinámicamente.La validación no intrusiva no funciona en la vista parcial añadida dinámicamente

Tengo una vista fuertemente tipada a un modelo (Order). Esta orden puede tener muchos artículos. El modelo tiene el aspecto siguiente:

public class Order 
{ 
    [Key] 
    [HiddenInput] 
    public int id { get; set; } 

    [Display(Name = "Order Number")] 
    public string number { get; set; } 

    [Display(Name = "Order Date")] 
    [DataType(DataType.Date)] 
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:MM/dd/yyyy}")] 
    public DateTime date { get; set; } 

    [Required(ErrorMessage = "Beneficiary is required.")] 
    [Display(Name = "Beneficiary")] 
    public int beneficiary_id { get; set; } 

    [Display(Name = "Beneficiary")] 
    public Beneficiary beneficiary { get; set; } 

    [Display(Name = "Items")] 
    public List<Item> items { get; set; } 

    [Display(Name = "Payment Method")] 
    public List<PaymentMethod> payment_methods { get; set; } 
} 

Introduzco la información del pedido y también los artículos para ese orden específico. Intenté un par de formas de agregar contenido dinámicamente y finalmente fui con Steven Sanderson's way.

En mi opinión, no tengo la información periódica Orden y entonces los artículos, donde mi modelo es como la siguiente:

@model trackmeMvc.Models.Model.Order 
@{ 
    ViewBag.Title = "Create"; 
    Html.EnableClientValidation(); 
    Html.EnableUnobtrusiveJavaScript(); 
} 

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> 

<script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/MicrosoftMvcValidation.js")" type="text/javascript"></script> 

@using (Html.BeginForm("Create", "Order", FormMethod.Post, new { @id = "create_order" })) 
    { 
    @Html.ValidationSummary(true, "Order creation was unsuccessful. Please correct the errors and try again.") 

    <div class="editor-label"> 
     @Html.LabelFor(m => m.date)<req>*</req> 
    </div> 
    <div class="editor-field"> 
     @Html.TextBoxFor(m => m.date, new { @id = "order_date" })<br /> 
     @Html.ValidationMessageFor(m => m.date) 
    </div> 

...

<script type="text/javascript"> 

    $(document).ready(function() { 

     $("#addItem").click(function() { 

      var formData = $("#main_div").closest("form").serializeArray(); 

      $.ajax({ 
       url: "/IPO/BlankItemRow", 
       type: "POST", 
       //data: formData, 
       cache: false, 
       success: function (html) { 
        $("#editorRows").append(html); 
         //$.validator.uobtrusive.parseDynamicContent("form *"); 
         //$("#editorRows").removeData("validator"); 
         //$("#editorRows").removeData("unobtrusiveValidation"); 
         //$.validator.unobtrusive.parse("#editorRows"); 
         //$.validator.unobtrusive.parse("#create_ipo"); 
         //$.validator.unobtrusive.parseDynamicContent($(this).first().closest("form")); 
         //$.validator.unobtrusive.parse($("#new_ipo_item")); 

         //$.validator.unobtrusive.parseElement($("#editorRows").find(".editRow:last").children().find("select")); 
          //$("#editorRows").find(".editRow:last").find("select").each(function() { 
          //alert($(this).attr("id")); 
          //$.validator.unobtrusive.parseElement($(this)); 
          //$.validator.unobtrusive.parseDynamicContent($(this)); 
          //$.validator.unobtrusive.parseDynamicContent($(this).attr("name")); 
         //}); 
          //$("#editorRows").children().find(".editRows:last").find("*").each(function() { 
          // alert($(this).attr('id')); 

          //$.validator.unobtrusive.parseDynamicContent('input'); 
         //}); 
         //var form = $(this).closest("form").attr("id"); 
         //$(form).removeData("validator"); 
         //$(form).removeData("unobtrusiveValidation"); 
         //$.validator.unobtrusive.parse(form); 
        } 
       }); 
      return false; 
     }); 
    }); 

</script> 

Estas son algunas de las cosas Lo intenté, y nada funciona.

Obtuve el parseDynamicContent de Applying unobtrusive jquery validation to dynamic content in ASP.Net MVC. Lo intenté en todos los escenarios en los que pude pensar, pero todavía no tuve suerte.

También probé el análisis sintáctico regular, la eliminación de la validación del formulario y luego aplicarlo de nuevo, pero aún así los elementos agregados recientemente no se validan:

<div id="editorRows"> 
    @foreach (var item in Model.items) 
    { 
     @Html.Partial("_NewItem", item) 
    } 
</div> 

... y mi vista parcial podría ser algo como esto :

@model trackmeMvc.Models.Model.Item 

@{ 
    Layout = "";  
    Html.EnableClientValidation(true); 

    if (this.ViewContext.FormContext == null) 
    { 
     this.ViewContext.FormContext = new FormContext(); 
    } 
} 

<div class="editRow"> 

@using (Html.BeginCollectionItem("order_items")) 
{ 

    @Html.DropDownListFor(m => m.item_id, @items, "None", new { @style = "width:205px;", @id = "ddlItems", @class="ddlItem", @name="ddlItemList" }) 
    @Html.ValidationMessageFor(m => m.item_id) 

    ... 

} 

</div> 

Así que lo que está sucediendo es que tengo un elemento vacío enviado desde el controlador a la vista por defecto, para mostrar una fila vacía. Ese elemento está validado, pero cualquier cosa que aparezca después de hacer clic en Agregar elemento, aparecerá otra fila, de ese parcial, pero no puedo obtener la validación. Traté de poner la validación en la vista parcial, (antes de que el documento estuviera listo en el formulario principal) y todo lo que leí apliqué, y siempre termina igual: validando la primera fila, y no las otras. Probé la validación de Steven Sanderson efectuado para ello - sigue sin suerte - incluso la validación de los parciales, encontré at this link y la página que sigue, que es específico para la validación parcial ...

¿Qué debo hacer para obtener este validación trabajando?

+0

posible duplicado de [jquery.validate.unobtrusive no funciona con elementos dinámicos inyectados] (http://stackoverflow.com/questions/4406291/jquery-validate-unobtrusive-not-working-with-dynamic-injected-elements) – Liam

Respuesta

82

Bien, voy a empezar de nuevo con una nueva respuesta aquí.

Antes de llamar $.validator.unobtrusive.parse, retire el validador original y la validación de la forma discreta de este modo:

var form = $("#main_div").closest("form"); 
form.removeData('validator'); 
form.removeData('unobtrusiveValidation'); 
$.validator.unobtrusive.parse(form); 

Esta misma respuesta se documenta here.

+0

Hola y gracias por su respuesta. Estoy usando MVC 3, y lo siento por los "elementos de orden" en realidad son "elementos" simplemente un error tipográfico. y @items es una lista de selección que obtengo de la base de datos de todos los artículos.en la lista elementos de la clase de pedido se requieren todas las propiedades del elemento, y lo que está sucediendo en mi controlador es colocar un elemento vacío de manera predeterminada y esa fila se valida en el lado del cliente. Así que he reemplazado la secuencia de comandos para no usar la versión minificada como sugirió. Ahora he comprobado y el data-val = "true" y todo lo que se está agregando al control agregado dinámicamente ... Continúa ... – noobi

+0

así que cuando trato de eliminar la validación discreta ya no está, y cuando intento ponerlo de vuelta, solo valida los elementos que estaban en la primera página cargada, nada que se haya agregado dinámicamente ... he intentado depurar con chrome, pero cuando toco el $ .validator.unobtrusive.parse ($ ("# main_div ") .closest (" forma ")); va al final de la función que golpea el archivo de script "jquery-1.5.1.min.js" ¿no se supone que va al script del validador? No estoy muy familiarizado con esta cuestión de depuración de Chrome ... pero, ¿dónde puede estar el enlace que falta? porque cuando elimino los validadores y los vuelvo a agregar, vuelven a funcionar – noobi

+0

, lo que significa que se llama, pero por alguna razón, no afecta el contenido agregado dinámicamente, solo valida todo lo que estaba allí para comenzar antes de agregar controles. Entonces, ¿qué podría ser eso? – noobi

Cuestiones relacionadas