複数のオブジェクトを1つの部分的に必要とする場合、ビューからアイテムを動的に追加する方法はありますか？

Question

私の見解に表示されている項目のリストがあります。私は手動で追加ボタンでUIからこのリストに項目を追加できるようにする必要があります。私は新しい項目を表示させるためにjavascriptで部分的なビューをロードする必要があることを知っています。私のアイテムは、テキストボックスとコードが移入されDropDownListコントロール、両方が含まれているため

@{var count = 0;} 
@foreach (var dx in Model.Patient.DxList) 
{  
    <div class="form-field"> 
     <label>@(++count)</label> 
     @Html.HiddenFor(d => dx.DxIndex) 
     @Html.TextBoxFor(d => dx.Dx, new { @class = "small" }) 
     <span class="description">@((dx.DxRef != null) ? dx.DxRef.Title : "")</span> 
     @Html.DropDownListFor(d=> dx.Indicator, new SelectList(Model.Codes, "Value", "Description", dx.Indicator), "Please select", new { @class = "" }) 
    </div> 
} 

しかし、私の部分図は、ViewModelにも必要なのですか？ Dxだけでなく、リストを作成するための適切なコードのリストを含めるには？

public class DxSingleViewModel 
{ 
    public Dx Dx { get; set; } 
    public List<Code> Codes { get; set; } 
} 

これが一般的なアプローチであるのか、私がベースから外れているのかわかりません。

Answer 1

あなたは一つのアイテムのマークアップを定義する1つの場所jsutているのであなたが、別の部分ビュー/エディタテンプレートに一つのアイテムのレンダリングを分離して、foreachループ内で呼び出す必要があります。

@foreach (var dx in Model.Patient.DxList) 
{ 
    @Html.EditorFor(m => dx) 
} 

をアクションは、単にコールする部分ビューを返すことができます@Html.EditorForModel()

動的に行を追加および削除するときは、衝突を避けるために独自のインデックス（たとえばguid文字列）をアイテムに埋め込む必要があります。カスタムHTMLヘルパーでこれを実装する方法を説明し、この偉大な記事を見てみましょう：http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/

次のようになりますあなたのEditorTemplate：

@using (Html.BeginCollectionItem("DxList")) 
{ 
    @Html.TextBoxFor(d => dx.Dx, new { @class = "small" }) 
    .... 
} 

のviewmodelがためのリストを含めるかどうかについてのご質問についてあなたのドロップダウンかどうか：viewmodelには、ビューをレンダリングするのに必要なすべてのデータが含まれているはずです。だから、私はそう言う、そのリストをビューに渡すのに良い場所だ。

あなたはビューバックにも渡すことができますが、私は強力な型付きデータバッグの友達ですので、私はviewmodelを好むでしょう。

Answer 2

このアプローチを試すことができます。 自動バインディングの正しい入力名をレンダリングするために、プロパティの名前（パス）を覚えておく必要があるという欠点が1つあります（リファクタリングツールで簡単に変更することはできません）。

ビュー

@foreach (int i=0;i < Model.Patient.DxList.Count;i++) 
{ 
    @{Html.RenderPartial("PartialDx", Model.Patient.DxList[i] ,new ViewDataDictionary() { {"count",i}});} 
} 

PartialViewからは強くDxSingleViewModel

@{string collectionName = string.Format("Patient.DxList[{0}].", ViewBag.count);} 

<div class="form-field"> 
    <label>@{ViewBag.count + 1}</label> 
    @Html.Hidden(collectionName+"Dx.DxIndex", Model.Dx.DxIndex) 

</div>