33

現在、コンテンツを動的に追加した後で検証に問題が発生しています。動的に追加された部分表示で邪魔されない検証が機能しない

私はモデルに強く型付けされたビューを持っています(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> 

もの

は、物事の一部です:私の見解では

は、私は私のモデルは次のようになり、その後、通常の注文情報やアイテムを、持っています私は試して、何も動作しません。

私はparseDynamicContentApplying unobtrusive jquery validation to dynamic content in ASP.Net MVCから得ました。私は考えることができるすべてのシナリオでそれを試しましたが、まだ運がありません。

また、私は再びそれを適用し、その後、フォームから検証を削除し、定期的な解析を試みたが、まだ新しく追加された要素が検証されていません。

<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つの空のアイテムを送信しています。そのアイテムは検証されますが、アイテムの追加をクリックすると、その部分から別の行が表示されますが、それを検証することはできません。私は部分的なビュー(メインフォームの準備が整う前に)と、私が適用したすべてのものを検証しました。そして、常に同じように終わる:最初の行を検証し、他は検証しません。 、パーシャルのためにも、検証、私はこれを取得するために何をすべきかat this link 及び部分検証に固有の次のページ...

を発見した - まだ運 - 私はその目的のために行わスティーブン・サンダーソンの検証を試みました検証作業ですか?

+0

可能な複製[jquery.validate.unobtrusiveは動的注入要素で動作しません](http://stackoverflow.com/questions/4406291/jquery-validate-unobtrusive-not-working-with-dynamic-injected-elements) – Liam

答えて

82

[OK]をここでは、新しい回答から始めます。あなたが$.validator.unobtrusive.parseを呼び出す前に

、そのようにフォームからオリジナルのバリデータと控えめな検証を削除します。

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

これと同じ答えがhereに記載されています。

+0

こんにちは、お返事ありがとうございます。私はMVC 3を使用しています、そして、 "order_items"についてはごめんなさい。 @itemsはすべてのアイテムのデータベースから取得する選択リストです。リスト内のアイテムクラスのアイテムすべてのアイテムのプロパティが必要です。何が起こっているのかは私のコントローラにあります。私はデフォルトで空のアイテムを1つ入れ、その行はクライアントサイドで検証されます。だから私はあなたが提案したように、ミニバージョンを使用しないようにスクリプトを置き換えました。今私はチェックして、データのval = "true"と動的に追加されたすべてのコントロールに追加されている..続き... – noobi

+0

私は控えめな検証を削除しようとすると、それがなくなって、それは動的に追加されたものではありません。私はchromeでデバッグしようとしましたが、$ .validator.unobtrusive.parse($( "#main_div ").closest(" form "));スクリプトファイル "jquery-1.5.1.min.js"にヒットした関数の最後に行くと、バリデータスクリプトに行くはずがありませんか?私はこのクロムデバッグのことにあまり慣れていません..しかし、欠けているリンクはどこにありますか?なぜなら、バリデータを削除して再追加すると、それは呼び出されているということを意味する – noobi

+0

です。何らかの理由で、動的に追加されたコンテンツには影響しません。それで何ができるの? – noobi

関連する問題