我跟着这个pproach链接到上面的博客中,并添加了一些可能对某些人有用的细节 - 特别是因为我想动态添加任意数量的行但不想使用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; }
}
然后在页面中使用它们(带日期选择器):
<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)
创建。
隐藏“模板:集合中
我想随意添加行,而无需使用AJAX发布数据传回,我做到了通过创建一个包含一个“行”的模板,一个隐藏的div服务器/项目“行:
<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/
看看这个:http://stackoverflow.com/questions/ 7807127 /非顺序列表结合 - 不工作。该问题显示了非顺序绑定的语法(并且答案确认了它在MVC2及更高版本中的可用性)。我有时使用过它。至于你原来的问题:如果我记得正确的话,它会失败......但在打乱手动索引,非顺序绑定之前,尝试很容易。 – 2013-02-11 23:11:11
@TimMedora,谢谢 - 非顺序绑定是我缺乏的有用的术语。 – Eric 2013-02-11 23:22:28
这个话题令人惊讶的模糊。如果你四处搜索,有关于这个主题的一些好博客,本书将在后面的章节中详细介绍:http://www.amazon.com/Pro-ASP-NET-MVC-3-Framework/dp/1430234040 – 2013-02-11 23:29:14