クライアント側でmvc 3.0で動的に生成されたフォーム要素を検証する

Question

xhalentが と書かれているなど、mvc 3.0で動的に生成されたコンテンツの検証方法についてたくさん読んだことがありますが、つまり、動的に生成されるフォーム要素では機能しません。これでフォームが表示され始めるある

public class Person 
{ 
    [Required] 
    public string Name { get; set; } 

    [Required] 
    public string Phone { get; set; } 

    public IList<Address> Addresses{get;set;} 

    public Person() 
    { 
     Addresses = new List<Address>() 
          { 
           new Address(){Street="1"},new Address(){Street="2"} 
          }; 
    } 


} 

public class Address 
{ 
    [Required(ErrorMessage="Error")] 
    public string Street { get; set; } 
} 

そして、このビュー：

<script src="<%: Url.Content("~/Scripts/jquery-1.5.1.min.js") %>" type="text/javascript"></script> 
<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> 

<% using (Html.BeginForm()) 
     { %> 
    <%: Html.ValidationSummary(true) %> 
    <fieldset> 
     <legend>Person</legend> 
     <%: Html.EditorForModel() %> 
      <div class="phone-numbers"> 
       <% 
      foreach (var item in Model.Addresses) 
     { 

      %> 
      <%Html.RenderPartial("EditorTemplates/Addresses", item);%> 
      <%} %> 
     </div> 

    <div style="padding: 10px 0px 10px 0px"> 
     <a id="add-phone" href="javascript:void(0);">Add another</a> 
    </div> 
    <input type="submit" value="Create" /> 
</fieldset> 
<% } %> 
</div> 

$().ready(function() { 
      $("#add-phone").click(function() { 
       $.ajax({ 
        url: '<%: Url.Action("GetNewAddress") %>', 
        success: function (data) { 
         $(".phone-numbers").append(data);     
        } 
       }); 
      }); 
     }); 

そして、これは、アドレスの部分図である。 はここに私のモデルクラスです

<div style="padding: 5px 0px 5px 0px" name="editorRow" id="editorRow"> 
     <%: Html.LabelFor(m => m.Street) %> 
     <%: Html.EditorFor(m => m.Street)%> 
     <%:Html.ValidationMessageFor(m=>m.Street) %> 
    </div> 

Answer 1

まず、あなたの部分図あれば、これは控えめなデータ-val- *検証が生成されたコンテンツに属性を追加する必要があり、トップ

<% 
if (Html.ViewContext.FormContext == null) 
    { 
     Html.ViewContext.FormContext = new FormContext(); 
    } 
%> 

でこれを追加します。そして、AJAXのダウンロードのあなたの成功の機能では、最後にthisを挿入

$().ready(function() { 
      $("#add-phone").click(function() { 
       $.ajax({ 
        url: '<%: Url.Action("GetNewAddress") %>', 
        success: function (data) { 
         $(".phone-numbers").append(data);  

         $("form").removeData("validator"); 
         $("form").removeData("unobtrusiveValidation"); 
         $.validator.unobtrusive.parse("form"); 

        } 
       }); 
      }); 
     }); 

それが自動的にダウンロードされたコンテンツを解析し、それに

を検証を適用する必要があります。この時間は、私はあなたのプロジェクトを見ていたとの理由を発見しました動的検証は機能しません。実際には、検証よりも多くの問題があります。まず、アドレスのレンダリングに使用する手法が正しくありません。そのようにして、生成するすべての入力は同じIDと名前の値を持ちます。そのため、バリデータが動的に追加されたコンテンツと前のコンテンツを区別できない理由は、すべての入力が同じであると考えて、最初の通りに従ってすべての通りを検証します。さらに、サーバー上で作成するコンテンツを投稿した場合、asp.net mvcモデルのバインダーは、ストリートの配列をバインドできませんでした。なぜなら、バリデーターが機能しないのと同じ理由からです。クライアント側でリストコンテンツを適切に生成するには、thisの記事をご覧ください。そして、後で、動的注入のためにコントローラのコードを変更することができます

public ActionResult GetNewAddress(string id) 
     { 
      ViewData.TemplateInfo.HtmlFieldPrefix = string.Format("[{0}]", id); 
      return View("EditorTemplates/Addresses", new Address()); 
     } 

クライアント側からの正しいIDの受け渡しはあなた次第です:)。

また、EditorTemplatesは正しく使用されていません。Html.DisplayFor()で使用するためのものであり、手動で名前を指定する必要はありません。それらについてもっと読む、そこに何十もの記事があります。