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?
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