添加一個新行我的看法動態

Question

好了，所以我有這個類：

public class BackstoreInventoryUtility 
{ 
    public BackstoreInventoryInfo Item { get; set; } 

    public List<ItemListingUtility> ListItemUtility { get; set; } 

    public BackstoreInventoryUtility() 
    { 
     Item = new BackstoreInventoryInfo(); 

     ListItemUtility = new List<ItemListingUtility>(); 
    } 
} 

而這裏的ListItemUtility類：

public class ItemListingUtility 
{ 
    public int Quantity { get; set; } 

    public string Duration { get; set; } 

    public List<string> AvailableDurations { get; set; } 

    public ItemListingUtility() 
    { 
     AvailableDurations = new List<string>(); 
    } 
} 

在視圖中我建設，我顯示1 BackstoreInventoryUtility根據我的用戶當前瀏覽的BackstoreInventoryInfo項目。

ListItemUtility是一個允許用戶進行某種操作的類，例如在設定的時間內顯示設定的數量。

視圖呈現這樣的：

@model MyApp.Utilities.BackstoreInventoryUtility 

@using (Html.BeginForm()) 
{ 
    <div> 
     @if (Model.Item.Quantity > 0) 
     { 
      <input type="submit" value="Display"/>  
     } 

     @Html.HiddenFor(_item => _item.Item.BackstoreInventoryID) 

     <div class="bigFontSize bold formStyle"> 
      <label class="center">Options will eventually be displayed here.</label> 
      <div> 
       <div class="float-left">Quantity Allocated:</div> 
       <div class="float-right">@Html.DisplayFor(_item => _item.Item.Quantity) 
        @Html.HiddenFor(_item => _item.Item.Quantity) 
       </div> 
       <div class="clear"></div> 
      </div> 
     <div class="formStyle" id="itemUtilityZone"> 
      <label>Options</label> 
      @for (int i = 0; i < Model.ListItemUtility.Count; i++) 
      { 
       <div> 
        <div class="float-left"> 
         Quantity To Display: 
        </div> 
        <div class="float-right"> 
         @Html.TextBoxFor(_item => _item.ListItemUtility[i].Quantity, new { @class = "positive-integer numberTextBox" }) 
        </div> 
        <div class="clear"></div> 
       </div> 
      } 
     </div> 
     @if (Model.Item.Quantity > 0) 
     { 
      <input type="submit" value="Display"/>  
     } 
    </div> 
} 

我想我的用戶動態地添加一個新行到視圖，然後在視圖提交時，所有行會被包括在內。

到目前爲止，我在一開始，我想這一點：

[HttpGet] 
public ActionResult AddItemUtilityRow() 
{ 
    return PartialView(new ItemListingUtility()); 
} 

其中呈現的局部視圖可以等同於表採用的股利。但我不確定我該如何做到這一點，我應該使用jQuery調用？我該怎麼做？

編輯好吧，jQuery的，所以我曾嘗試一些東西，在視覺上做什麼，我想：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#addUtility").click(function() { 
      $.get("@Url.Action("AddItemUtilityRow")", { 
      }, function(data) { 
       $('#itemUtilityZone').append(data); 
      }); 
     }); 
    }); 
</script> 

所以，正如我所說，這工作，但只是部分，因爲當用戶只提交默認號碼列表中的項目被提交。我該如何做到這一點，以便每次用戶添加一個與模型相加的行並在以後提交？

Answer 1

哇的觀點！這比我想象的要複雜得多，但是要感謝這個鏈接：http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/我能夠讓整件事情奏效！

我第一次轉移中的局部視圖創建這樣的每一行：

<div class="formStyle" id="itemUtilityZone"> 
    <label>Options</label> 
    @foreach (var utilityRow in Model.ListItemUtility) 
    { 
     Html.RenderPartial("ItemUtilityRow", utilityRow); 
    } 
</div> 

這使得這樣的：

@using HtmlHelpers.BeginCollectionItem 
@model MyApp.Utilities.ItemListingUtility 
@using (Html.BeginCollectionItem("listItems")) 
{ 
    <div> 
     <div class="float-left"> 
      Quantity To Display: 
     </div> 
     <div class="float-right"> 
      @Html.TextBoxFor(_item => _item.Quantity, new { @class = "positive-integer numberTextBox" }) 
     </div> 
     <div class="clear"></div> 
    </div>  
} 

注：爲Html.BeginCollectionItem HTML輔助，我不得不尋找他在上面的鏈接中提到了Steven Sanderson的幫手。你可以在這裏找到它：

https://github.com/danludwig/BeginCollectionItem

接下來，我的javascript調用如下：

$(document).ready(function() { 
    $("#addUtility").click(function() { 
     $.ajax({ 
      url: '@Url.Action("AddItemUtilityRow")', 
      cache: false, 
      success: function(html) { 
       $('#ItemUtilityZone').append(html); 
      } 
     }); 
    }); 
}); 

而且，增加了一個新行的控制方法：

[HttpGet] 
public ActionResult AddEbayUtilityRow() 
{ 
    return PartialView("ItemUtilityRow", new ItemListingUtility()); 
} 

而行現在顯示得很好。問題是，我如何在我的post方法中捕獲它？那麼，遵循Steve Sanderson的博客，我明白listItems變量實際上是將發送回post方法的集合的名稱。

所以加入這個參數來控制POST方法：

IEnumerable<EBayListingUtility> listItems 

名單確實送回post方法與統計是它應該是。歡呼！

Answer 2

我們通過以下兩種方式之一來解決此：

1）客戶端方法 - 您可以使用jQuery /淘汰賽任何附加的項目到表。對於簡單的添加，這很好，但是否定了視圖中c＃的使用。

2）服務器端方法（通常使用） - 基本上，發表您的視圖模型回到那個手動添加列表項的動作;

[HttpGet] 
public ActionResult AddItemUtilityRow() 
{ 
    return PartialView(new ItemListingUtility()); 
} 

[HttpPost] 
public ActionResult AddItemUtilityRow(BackstoreInventoryUtility viewModel) 
{ 
    viewModel.ListItemUtility.Add(new ItemListingUtility()); 

    return PartialView(viewModel); 
} 

我們有一些使用「發佈」的jQuery來不同的動作（一個簡單的增加一個項目）的方式。我會考慮使用jQuery的ajax調用來實現這一點。

但前提是相同的：

1. 從你的網頁的數據發送到服務器
2. 操縱數據
3. 重用你創建