如何在ASP.Net MVC中動態添加新行5

我正在尋找關於如何在ASP.Net MVC 5應用程序的創建Razor視圖中將LineItems的新行添加到發票的幫助。我已經閱讀了幾乎所有類似的問題，但沒有一篇提到我認爲是一個簡單的用例。如何在ASP.Net MVC中動態添加新行5

這裏是我的發票的模型類

public class Invoice 
    { 
     public int Id { get; set; } 
     public int InvoiceNumber { get; set; } 
     public List<LineItem> LineItems { get; set; } 
     public Client Customer { get; set; } 
     public DateTime DateCreated { get; set; }   
     public decimal Total { get; set; }    


     public Invoice() 
     { 
      LineItems = new List<LineItem>(); 
     }

注意到，該發票包含了LineItem的名單和各行項目是一個簡單的對象。並且在發票構造函數中創建一個行項目列表。這裏是LineItem的模型類

public class LineItem 
    { 
     public int Id { get; set; } 
     public string Name { get; set; } 
     public string Description { get; set; } 
     public int Quantity { get; set; } 
     public decimal Price { get; set; }   
     public decimal Total { get; set; } 

    }

產生的ASP.Net MVC 5剃刀意見不承認的對象了LineItem列表，並沒有爲它創建的任何條目。我想動態地向下面的表添加一行，並且我想讓該行成爲訂單項的實例。

下面是表顯示發票

<table class="table table-condensed" id="invoiceTable"> 
     <thead> 
     <tr id="invoiceTableHead"> 
      <td><strong>Item Name</strong></td> 
      <td class="text-center"><strong>Item Description</strong></td> 
      <td class="text-center"><strong>Item Price</strong></td> 
      <td class="text-center"><strong>Item Quantity</strong></td> 
      <td class="text-right"><strong>Total</strong></td> 
      </tr> 
     </thead> 

    <tbody>

這裏是我在使用jQuery動態添加一行到這個表的嘗試，我認爲是我在哪裏卡住了，任何幫助或指針，這將是不勝感激。

<script type="text/javascript"> 
    $("#lineItemButton").click(function() { 
     debugger; 
     // Create elements dynamically 
     var newRow = "<tr><td>'@Html.TextBoxFor(x => x.LineItems, new { ??? What do int public here)'</td></tr>"; 

     // Add the new dynamic row after the last row 
      $('#invoiceTable tr:last').after(newRow); 
     }); 

    </script>

來源

2015-02-24 Val Okafor

這幾乎是這樣做的一種方式，但我相信剃刀的語法不會工作。您需要生成標準的HTML文本框（輸入類型）。您還需要保持計數有多少元素/項目存在，並計算正確的數字，然後允許模型活頁夾，在回發，正確綁定項目的集合 - 所以索引必須是正確的 – 2015-02-24 08:50:37

[This answer ]（http://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308）給出了2個選項。您需要確保控件與索引器的名稱正確，以便在回發後將其綁定到集合。 – 2015-02-24 08:53:41

我不會通過以你描述的方式修改dom動態地做這種事情。我的首選是在剃鬚刀視圖中生成所有必要的代碼，就好像它總是在那裏一樣，然後簡單地切換行本身的可見性。通過這種方式，當生成視圖時，文本框就會以表單元素的形式正確呈現，並且您仍然可以完全訪問jQuery修改表，以等待任何AJAX請求。

在一個側面說明中，您所描述的行爲使您聽起來像試圖添加更多客戶端行爲並減少往返服務器的次數/大小。如果這是真的，我會建議探索像Knockout，Ember或Angular這樣的JavaScript MVVM框架。

來源

2015-06-08 13:06:54

如何在ASP.Net MVC中動態添加新行5

回答

相關問題