MVC 4列表模型綁定如何工作？

如果我想要一組輸入的形式結合在MVC 4 List，我知道，inputname屬性以下命名約定將工作：MVC 4列表模型綁定如何工作？

<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" />

模型活頁夾如何處理？它會綁定到長度爲9的List，是否爲空值？或者它還會綁定到長度爲3的List？或者它會完全窒息？

爲什麼我關心

我想實現一個動態的形式，其中用戶可以添加行的形式，也可以從表格中刪除行。因此，如果我的用戶刪除了總共8行中的第2行，我想知道是否需要重新編號所有後續輸入。

來源

2013-02-11 Eric

看看這個：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

有用於收藏使用特定的有線格式。這是斯科特Hanselman的博客在這裏討論：

http://www.hanselman.com/blog/ASPNETWireFormatForModelBindingToArraysListsCollectionsDictionaries.aspx

從菲爾哈克另一個博客條目關於此舉行了會談：

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/

來源

2013-02-12 04:51:56

完美，謝謝 – Eric 2013-02-12 15:30:50

@shashwat - 對於開放式問題，答案不可能是肯定答案或否定答案，如何給出肯定答案或否定答案？ – 2014-02-27 06:03:52

@AnimalsAreNotOursToEat'MVC 4列表模型綁定如何工作？**是** – Jonesopolis 2015-03-27 19:09:04

我有動態列表，看起來像這樣：

<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中，並且像服務器上的List in action參數一樣

來源

2013-02-12 04:35:41

我在過去也面臨類似的問題，我使用KnockoutJS來處理這種情況。

基本上，Knockout發送集合在一個JSON字符串中，並且我在我的控制器中將它們反序列化。

欲瞭解更多信息：http://learn.knockoutjs.com/#/?tutorial=collections

來源

2013-02-12 04:43:24 andri

我跟着這個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/

來源

2014-02-06 16:37:31 Matthew

我在使用我的Chrome瀏覽器，然後單擊後退按鈕，有小問題，我覺得有型輸入= Chrome瀏覽器無法正確處理動態設置值時「隱藏」。

也許我們可以改變

<input type="hidden" name="Detes.Index" value="2016/01/06" />

到

<div style="display: none"> 
    <input type="text" name="Detes.Index" value="2016/01/06" /> 
</div>

來源

2016-01-06 02:52:34

MVC 4列表模型綁定如何工作？

回答

相關問題