Śledziłem to na Pproach połączono z powyższymi blogami i dodałem kilka szczegółów, które mogą być pomocne dla niektórych - zwłaszcza, że chciałem dynamicznie dodawać dowolną liczbę wierszy, ale nie chciałem używać AJAX, aby to zrobić (chciałem, aby formularz był tylko przesyłany w poście). Nie chciałem też martwić się utrzymywaniem identyfikatorów sekwencyjnych.Byłem przechwytywania listę dat rozpoczęcia i zakończenia:
Zobacz Model:
public class WhenViewModel : BaseViewModel {
public List<DateViewModel> Dates { get; set; }
//... Other properties
}
Start/End Data View Model:
public class DateViewModel {
public string DateID { get; set; }
public DateTime? StartDate { get; set; }
public DateTime? EndDate { get; set; }
}
Następnie wykorzystując je na stronie (z 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>
Jako że blog opisany w temacie @ErikTheVikings powyżej opisuje, kolekcja jest tworzona przez powtarzający się ukryty element: @Html.Hidden("Dates.Index", d.DateID) dla każdego wpisu w kolekcji na stronie.
Chciałem dowolnie dodawać wierszy bez użycia AJAX w celu wysłania danych do serwera, który zrobiłem tworząc ukryty div zawierający szablon jednego „wiersz”/pozycja w kolekcji:
Ukryte „Template "rząd:
<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>
następnie wykorzystywane jQuery której klony szablonu zapewnia losowy identyfikator do nowego rzędu i dodaje się teraz widoczny sklonowany wiersz zawierającego div powyżej:
jQuery do zakończenia procesu:
<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 przykład w wyniku: http://jsfiddle.net/mdares/7JZh4/
spojrzeć na to: http://stackoverflow.com/questions/ 7807127/nie-sekwencyjne powiązanie list-nie działa. Pytanie pokazuje składnię dla niesekwencyjnego powiązania (a odpowiedź potwierdza jej dostępność w MVC2 i wyższych). Używałem go przy okazji. Co do twojego pierwotnego pytania: jeśli dobrze pamiętam, to się nie powiedzie ... ale łatwo jest spróbować, zanim zawracasz sobie głowę ręcznym indeksowanym, niesekwencyjnym wiązaniem. –
@TimMedora, Dzięki - niesekwencyjne powiązanie było pomocne w terminologii, której mi brakowało. – Eric
Temat jest zaskakująco mało znany. Jeśli przeszukujesz wokół, jest kilka dobrych blogów na ten temat, a ta książka obejmuje je dobrze w jednym z późniejszych rozdziałów: http://www.amazon.com/PROAS-NET-MVC-3-Framework/dp/1430234040 –