webentwicklung-frage-antwort-db.com.de

Unauffällige Validierung funktioniert nicht bei dynamisch hinzugefügter Teilansicht

Ich habe derzeit ein Problem mit der Validierung nach dem dynamischen Hinzufügen von Inhalten.

Ich habe eine Ansicht, die stark auf ein Modell eingetippt wurde (Order). Diese Bestellung kann viele Artikel enthalten. Das Modell sieht ungefähr so ​​aus:

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

Ich gebe die Bestellinformationen und auch die Artikel für diese bestimmte Bestellung ein. Ich habe ein paar Möglichkeiten ausprobiert, um Inhalte dynamisch hinzuzufügen, und schlussendlich folgte Steven Sandersons Weg .

Aus meiner Sicht habe ich die regulären Bestellinformationen und dann die Artikel, bei denen mein Modell in etwa so aussieht:

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

Das sind einige der Dinge, die ich ausprobiert habe und nichts funktioniert. 

Ich habe die parseDynamicContent von Die unauffällige Jquery-Validierung auf dynamischen Inhalt in ASP.Net MVC angewendet. Ich habe es in jedem denkbaren Szenario ausprobiert, aber immer noch kein Glück.

Ich habe auch die normale Analyse versucht, die Validierung aus dem Formular entfernt und dann erneut angewendet. Die neu hinzugefügten Elemente werden jedoch nicht validiert:

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

... und meine teilweise Ansicht würde ungefähr so ​​aussehen:

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

Was also passiert ist, ich habe standardmäßig ein leeres Element vom Controller an die Ansicht gesendet, um eine leere Zeile anzuzeigen. Dieses Element ist validiert, aber was immer danach kommt, wenn ich auf "Element hinzufügen" klicke, erscheint eine weitere Zeile aus diesem Teil, aber ich kann es nicht zum Validieren bringen. Ich habe versucht, die Validierung in die Teilansicht (vor dem Dokument fertig im Hauptformular) zu bringen, und alles, was ich gelesen habe, habe ich angewendet, und es endet immer dasselbe: Validieren der ersten Zeile und nicht der anderen. Ich habe die Validierung von Steven Sanderson ausprobiert - zu diesem Zweck immer noch kein Glück - auch die Validierung für Partials, fand unter diesem Link Und die folgende Seite, die für die Partialvalidierung spezifisch ist ...

Was muss ich tun, damit diese Validierung funktioniert?

40
noobi

Ok, ich fange hier mit einer neuen Antwort an. 

Bevor Sie $.validator.unobtrusive.parse aufrufen, entfernen Sie den ursprünglichen Validator und die unauffällige Validierung aus dem Formular.

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

Dieselbe Antwort ist dokumentiert hier .

90
danludwig

Was für mich funktionierte, war, den Validator nach dem Aufruf erneut anzuwenden, um die Teilansicht zu laden. In meinem Fall verwende ich $.post().then(), aber Sie könnten etwas ähnliches mit einem .always()-Callback eines AJAX - Aufrufs tun.

$.post(url, model, function (data) {
    //load the partial view
    $("#Partial").html(data);
}).then(function () {
    $("form").each(function () { $.data($(this)[0], 'validator', false); });
    $.validator.unobtrusive.parse("form");
});
1
devlin carnate