MVCの作成ビューでリスト<object>を正しくバインドするには

Question

私は以下の仮説に似た問題があります。私は別のビューに複数回部分ビューを追加しましたが、ビューモデルなどに正しくバインドさせる方法がわかりません。また、単一のfooNameが間違っていると、単一のfooNameに対して検証が行われるようです。私はあなたが見ることができるように、ビューバックにインデックスを追加しましたが、私は実際にそれをどのように使用するかは分かりません。

注：MVC5.2

ビューモデル

public class Thing 
{ 
    public String thingName { get; set; } 
    public List<Foo> Foos { get; set; } 
} 
public class Foo 
{ 
    public String fooName { get; set; } 
} 

Fooのビュー

@model Project.Models.Foo 

<div class="form-horizontal"> 
    @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 

    <div class="form-group"> 
     <div class="col-md-12"> 
      @Html.LabelFor(model => model.fooName, htmlAttributes: new { @class = "control-label" }) 
      @Html.EditorFor(model => model.fooName, new { htmlAttributes = new { @class = "form-control" } }) 
      @Html.ValidationMessageFor(model => model.fooName, "", new { @class = "text-danger" }) 
     </div> 
    </div> 
</div> 

シングビュー

を使用して

@model Project.Models.Thing 
@using (Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken() 
    <div class="form-horizontal"> 
     @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 

     <div class="form-group"> 
      <div class="col-md-12"> 
       @Html.LabelFor(model => model.thingName, htmlAttributes: new { @class = "control-label" }) 
       @Html.EditorFor(model => model.thingName, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.thingName, "", new { @class = "text-danger" }) 
      </div> 
     </div> 
    </div> 
    <div class="add-foo"> 
     @* at some point add more foos with ajax, for now k.i.s.s. *@ 
     @Html.Partial("/Views/Foo/Create.cshtml", new ViewDataDictionary { { "id", 1 } }) 
     @Html.Partial("/Views/Foo/Create.cshtml", new ViewDataDictionary { { "id", 2 } }) 
    </div> 
    <div class="form-group"> 
     <div class="col-md-offset-2 col-md-10"> 
      <input type="submit" value="Create" class="btn btn-default" /> 
     </div> 
    </div> 
} 

Answer 1

ここでの問題は、そのFooパーです遊びに大きなモデルのコンテキストなしでレンダリングされています。その結果、あなたは、すべて同じ名前とIDを持つ入力の束を取得しているすなわちそれらはすべて同じであるため検証は、それらのすべてでトリガされる理由です

<input type="text" name="fooName" id="fooName" class="form-control"> 
... 
<input type="text" name="fooName" id="fooName" class="form-control"> 
... 

：

。部分的な振る舞いを正しくするには、その中にいくつかのコンテキストを渡す必要があります。たとえば、あなたはあなたができる何かの既存のインスタンスを反復処理しているか： Model.Foos[i]ビットに基づいて

@for (var i = 0; i < Model.Foos.Count; i++) 
{ 
    @Html.Partial("_Foo", Model.Foos[i]) 
} 

、カミソリは、その後Foos[0].fooName、Foos[1].fooNameなどの適切な入力名を生成する、など

または、 HtmlFieldPrefixを上書きすることができます。

​​

あなたはJavaScriptで動的に追加のものを追加することができることを計画しているので、あなたの最善の策はしかし何か李に依存することですke KnockoutまたはAngularを使用して、JavaScript配列に基づいてフィールドをレンダリングします。次に、新しい配列Fooをその配列に追加すると、ライブラリはインデックス付きの名前属性を持つフィールドをページに自動的に追加します。