如何在 ASP.Net MVC 5 中动态添加新行 [英] How to Add new Row Dynamically in ASP.Net MVC 5

问题描述

我正在寻求有关如何在 ASP.Net MVC 5 应用程序的创建 Razor 视图中向发票添加新行的 LineItem 的帮助.我已经阅读了几乎所有类似的问题，但没有一个解决了我认为是一个简单用例的问题.

I am looking for help on how to add a new row of LineItems to an Invoice in a create Razor view of an ASP.Net MVC 5 application. I have read almost all similar questions but none have addressed what I thought was a simple use case.

这是我的发票模型类

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 列表，每个 Line Item 都是一个简单的对象.并且在 Invoice 构造函数中创建了一个行项目列表.这是 LineItem 模型类

Take note that this invoice contains a List of LineItems and each line Item is a simple object. And a List of line items is created in the Invoice constructor. Here is the LineItem model class

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 Razor 视图无法识别对象的 LineItems 列表，也没有为其创建任何条目.我想在下表中动态添加一行，并且我想让该行成为订单项的实例.

The generated ASP.Net MVC 5 Razor views did not recognize the LineItems list of the object and did not create any entry for it. I want to dynamically add a row to the table below and I want to make that row an instance of Line items.

这是显示发票的表格

<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 动态向该表追加一行的尝试，这就是我卡住的地方，任何帮助或指针将不胜感激.

And here is my attempt at using JQuery to append a row to this table dynamically and I that is where I am stuck, any help or pointers that will be greatly appreciated.

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

推荐答案

我不会通过以您描述的方式修改 dom 来动态执行此类操作.我的偏好是在 razor 视图中生成所有必要的代码，就好像它总是在那里一样，然后简单地切换行本身的可见性.这样，在生成视图时，文本框会正确呈现为表单元素，并且您仍然可以完全访问使用 jQuery 修改表，以等待任何 AJAX 请求.

I would not do this sort of thing dynamically by modifying the dom in the manner you describe. My preference would be to generate all of the necessary code in the razor view as if it was always there and then simply toggle the visibility of the row itself. This way the textbox is rendered properly as a form element when the view is generated, and you still have full access to modify the table with jQuery pending any AJAX requests.

顺便说一句，您所描述的行为听起来像是您在尝试添加更多客户端行为并减少到服务器的往返次数/大小.如果这是真的，我建议探索 JavaScript MVVM 框架，如 Knockout、Ember 或 Angular.

On a side note, the behavior you're describing makes it sound like you're attempting to add more client side behaviors and reduce the number/size of the round trips to the server. If this is true, I would suggest exploring a JavaScript MVVM framework like Knockout, Ember or Angular.

这篇关于如何在 ASP.Net MVC 5 中动态添加新行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！