Если мне нужен набор входов в форме для привязки к List в MVC 4, я знаю, что следующее соглашение об именах для атрибутов input name будет работать:
<input name="[0].Id" type="text" />
<input name="[1].Id" type="text" />
<input name="[2].Id" type="text" />
Но мне любопытно, как прощается модельное связующее. Например, как насчет следующего:
<input name="[0].Id" type="text" />
<input name="[3].Id" type="text" />
<input name="[8].Id" type="text" />
Как бы справиться с этим связующим устройством модели? Будет ли он привязан к List длины 9 с нулями? Или он будет привязан к List длины 3? Или это вообще задохнется?
Почему я забочусь
Я хочу реализовать динамическую форму, в которой пользователь может добавлять строки в форму, а также может удалять строки из формы. Поэтому, если я удаляю строку 2 из 8 общих строк, я хочу знать, нужно ли мне перенумеровать все последующие входы.
Существует определенный формат проводки для использования с коллекциями. Об этом говорится в блоге Скотта Хансельмана:
Еще одна запись в блоге от Фила Хаака рассказывает об этом здесь:
http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx
Наконец, запись в блоге, которая делает именно то, что вы хотите здесь:
http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/
Я следил за этим подходом, связанным в блогах выше, и добавил несколько подробностей, которые могут быть полезны для некоторых - особенно, поскольку я хотел динамически добавлять любое количество строк, но не хотел использовать AJAX для этого (мне нужна форма только представить в почте). Я также не хотел беспокоиться о сохранении последовательных идентификаторов. Я записывал список дат начала и окончания:
Показать модель:
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) для каждой записи в коллекции на странице.
Я хотел произвольно добавить строки, не используя 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, который клонирует шаблон, предоставляет случайный идентификатор для использования для новой строки и добавляет теперь видимую клонированную строку к содержащему 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/
У меня есть динамический список, который выглядит так:
<ul id="okvedList" class="unstyled span8 editableList">
<li>
<input data-val="true" data-val-required="The Guid field is required." id="Okveds_0__Guid" name="Okveds[0].Guid" type="hidden" value="2627d99a-1fcd-438e-8109-5705dd0ac7bb">
--//--
</li>
поэтому, когда я добавляю или удаляю строку (элемент li), я должен переупорядочить элементы
this.reorderItems = function () {
var li = this.el_list.find('li');
for (var i = 0; i < li.length; i++) {
var inputs = $(li[i]).find('input');
$.each(inputs, function () {
var input = $(this);
var name = input.attr('name');
input.attr('name', name.replace(new RegExp("\\[.*\\]", 'gi'), '[' + i + ']'));
var id = input.attr('id');
input.attr('id', id.replace(new RegExp('_.*__', 'i'), '_' + i + '__'));
});
}
};
этот список помещается в простой Html.BeginFrom из clientide и как параметр List in action на serveride
Я также сталкивался с аналогичной проблемой в прошлом, и я использую KnockoutJS для обработки такого сценария.
В принципе, нокаут отправляет коллекцию в строку JSON, и я десериализую их в своем контроллере.
За дополнительной информацией: http://learn.knockoutjs.com/#/?tutorial=collections
У меня возникли небольшие проблемы, когда я пользуюсь браузером Chrome и нажимаю кнопку "Назад", и я нахожу вход с типом = "скрытым", когда динамически установленные значения не обрабатываются должным образом браузером Chrome.
возможно, мы сможем изменить
<input type="hidden" name="Detes.Index" value="2016/01/06" />
to
<div style="display: none">
<input type="text" name="Detes.Index" value="2016/01/06" />
</div>
Форма больше информации: Chrome не кэширует значения полей скрытой формы для использования в истории браузера http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx/