上記のブログにリンクされているこのアプローチに従い、一部の人に役立つ可能性のある詳細をいくつか追加しました。特に、任意の数の行を動的に追加したいが、AJAX を使用して追加したくないためです (フォームを送信するだけにしたかった)。ポストで）。また、連続した ID を維持することについて心配する必要もありませんでした。開始日と終了日のリストを取得していました。
モデルを見る:
public class WhenViewModel : BaseViewModel {
public List<DateViewModel> Dates { get; set; }
//... Other properties
}
開始日/終了日表示モデル:
public class DateViewModel {
public string DateID { get; set; }
public DateTime? StartDate { get; set; }
public DateTime? EndDate { get; set; }
}
次に、ページでそれらを使用します（datepickerを使用）：
<div class="grid-8-12 clear" id="DatesBlock">
@{
foreach (DateViewModel d in Model.Dates) {
@:<div class="grid-5-12 left clear">
@Html.Hidden("Dates.Index", d.DateID)
@Html.Hidden("Dates[" + d.DateID + "].DateID", d.DateID) //ID again to populate the view model
@Html.TextBox("Dates[" + d.DateID + "].StartDate",
d.StartDate.Value.ToString("yyyy-MM-dd"))
@:</div>
@:<div class="grid-5-12">
@Html.TextBox("Dates[" + d.DateID + "].EndDate",
d.EndDate.Value.ToString("yyyy-MM-dd"))
@:</div>
<script type="text/javascript">
$('input[name="Dates[@d.DateID].StartDate"]')
.datepicker({ dateFormat: 'yy-mm-dd'});
$('input[name="Dates[@d.DateID].EndDate"]')
.datepicker({dateFormat: 'yy-mm-dd'});
</script>
}
}
</div>
<a href="#" onclick="AddDatesRow()">Add Dates</a>
上記の @ErikTheVikings 投稿にリンクされているブログ投稿で説明されているように、コレクションは@Html.Hidden("Dates.Index", d.DateID)、ページ上のコレクション内の各エントリに対して、非表示要素が繰り返されることによって作成されます。
コレクション内の1つの「行」/アイテムのテンプレートを含む非表示のdivを作成することで、AJAXを使用せずに任意に行を追加してサーバーにデータを送信したかったのです。
非表示の「テンプレート」行:
<div id="RowTemplate" style="display: none">
<div class="grid-5-12 clear">
@Html.Hidden("Dates.Index", "REPLACE_ID")
@Html.Hidden("Dates[REPLACE_ID].DateID", "REPLACE_ID")
@Html.TextBox("Dates[REPLACE_ID].StartDate", "")
</div>
<div class="grid-5-12">
@Html.TextBox("Dates[REPLACE_ID].EndDate", "")
</div>
</div>
次に、テンプレートを複製する jQuery を使用し、新しい行に使用するランダム ID を提供し、現在表示されている複製された行を上記の含まれる div に追加します。
jQuery でプロセスを完了します。
<script type="text/javascript">
function AddDatesRow() {
var tempIndex = Math.random().toString(36).substr(2, 5);
var template = $('#RowTemplate');
var insertRow = template.clone(false);
insertRow.find('input').each(function(){ //Run replace on each input
this.id = this.id.replace('REPLACE_ID', tempIndex);
this.name = this.name.replace('REPLACE_ID', tempIndex);
this.value = this.value.replace('REPLACE_ID', tempIndex);
});
insertRow.show();
$('#DatesBlock').append(insertRow.contents());
//Attach datepicker to new elements
$('input[name="Dates['+tempIndex+'].StartDate"]')
.datepicker({dateFormat: 'yy-mm-dd' });
$('input[name="Dates['+tempIndex+'].EndDate"]')
.datepicker({dateFormat: 'yy-mm-dd' });
}
</script>
結果の JSFiddle の例: http://jsfiddle.net/mdares/7JZh4/