如何在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

回答

相关问题