web-dev-qa-db-ja.com

動的に追加された部分ビューで控えめな検証が機能しない

現在、コンテンツを動的に追加した後の検証で問題に直面しています。

モデルに強く型付けされたビュー（Order）があります。この注文には多くのアイテムを含めることができます。モデルは次のようになります。

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

注文情報とその特定の注文のアイテムを入力します。コンテンツを動的に追加する方法をいくつか試し、最終的に Steven Sanderson's way を使用しました。

私の見解では、通常の注文情報とアイテムがあり、モデルは次のようになります。

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

これらは私が試したものの一部であり、何も機能しません。

ASP.Net MVCの動的コンテンツへの控えめなjquery検証の適用 からparseDynamicContentを取得しました。考え得るあらゆるシナリオで試しましたが、それでも運はありません。

また、通常の解析を試みて、フォームから検証を削除してから再度適用しましたが、新しく追加された要素はまだ検証されていません。

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

...そして、私の部分的なビューは次のようになります：

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

何が起こっているのかというと、1つの空の行を表示するために、デフォルトでコントローラーからビューに1つの空のアイテムが送信されています。そのアイテムは検証されますが、「アイテムを追加」をクリックすると、そのパーシャルから別の行が表示されますが、検証することはできません。検証を部分ビュー（メインフォームでドキュメントの準備ができる前）に配置しようとしましたが、読んだすべてのものを適用しましたが、常に同じ結果になりました。他の行ではなく最初の行を検証します。私はその目的のために行われたスティーブン・サンダーソンの検証を試みました-まだ運がありません-パーシャルの検証でさえ、 このリンクで と部分的な検証に固有の次のページが見つかりました...

この検証を機能させるにはどうすればよいですか？

asp.net-mvcrazorpartial-viewsunobtrusive-validationdynamically-generated
43
noobi

わかりました、私はここで新しい答えからやり直すつもりです。

$.validator.unobtrusive.parseを呼び出す前に、次のようにフォームから元のバリデーターと控えめな検証を削除します。

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

これと同じ答えが文書化されています here 。

93
danludwig

私のために働いたのは、部分ビューをロードするための呼び出しの後にバリデータを再適用することでした。私の場合、$.post().then()を使用していますが、AJAX呼び出しの.always()コールバックで同様のことができます。

$.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