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

问题描述

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

下面是我的发票的模型类

 公共类发票
    {
        公众诠释标识{搞定;组; }
        公众诠释InvoiceNumber {搞定;组; }
        公开名单＆LT;＆LineItem的GT; {了LineItem获得;组; }
        公众客户客户{搞定;组; }
        公众的DateTime dateCreated会获得{;组; }
        公共小数总{搞定;组; }
        公共发票（）
        {
            了LineItem =新的List＆LT;＆LineItem的GT;（）;
        }
 

请留意，此发票包含了LineItem的列表，每一行项目是一个简单的对象。和订单项列表在发票构造函数创建。这里是LineItem的模型类

 公共类的LineItem
    {
        公众诠释标识{搞定;组; }
        公共字符串名称{;组; }
        公共字符串描述{搞定;组; }
        公众诠释数量{搞定;组; }
        公共十进制价格{搞定;组; }
        公共小数总{搞定;组; }    }
 

生成的ASP.Net MVC 5剃刀意见不承认的对象了LineItem名单，并没有为它创建的任何条目。我想动态添加一行到下表，我想使该行的行项目的实例。

下面是显示发票表

 ＆LT;表类=表的表冷凝ID =invoiceTable＆GT;
      ＆LT;＆THEAD GT;
         ＆所述; TR的id =invoiceTableHead＆GT;
             ＆LT; TD＆GT;＆LT;强＆GT;产品名称＆LT; / STRONG＆GT;＆LT; / TD＆GT;
             ＆LT; TD类=TEXT-中心＆GT;＆LT;强＆GT;项目描述：LT; / STRONG＆GT;＆LT; / TD＆GT;
             ＆LT; TD类=TEXT-中心＆GT;＆LT;强＆GT;产品价格和LT; / STRONG＆GT;＆LT; / TD＆GT;
             ＆LT; TD类=TEXT-中心＆GT;＆LT;强＆GT;项目数量＆LT; / STRONG＆GT;＆LT; / TD＆GT;
             ＆LT; TD类=TEXT-右＆GT;＆LT;强＆GT;总计＆LT; / STRONG＆GT;＆LT; / TD＆GT;
          ＆LT; / TR＆GT;
       ＆LT; / THEAD＆GT;     ＆LT;＆TBODY GT;
 

这是我使用jQuery动态添加一行到这个表格的尝试，我这是我在哪里卡住，任何帮助或指针，这将大大AP preciated。

 ＆LT;脚本类型=文/ JavaScript的＆GT;
    $（＃lineItemButton）。点击（函数（）{
        调试器;
        //动态创建元素
        VAR NEWROW =＆LT; TR＆GT;＆LT; TD＆GT;'@ Html.TextBoxFor（X =＆GT; x.LineItems，新{？怎么在这里做INT公众）'＆LT; / TD＆GT;＆LT; / TR＆gt;中;        //最后一行之后添加新的动态行
            $（'＃invoiceTable TR：去年'）后（NEWROW）。
        }）;    ＆LT; / SCRIPT＆GT;
 

解决方案

我不会动态通过修改您所描述的方式做DOM这样的事情。我的preference将产生所有的剃刀视图必要的code，因为如果它总是在那里，然后简单地切换行本身的知名度。通过这种方式，文本框正确呈现为一个表单元素生成视图时，你仍然可以完全访问修改表使用jQuery任何等待AJAX​​请求。

在一个侧面说明，您所描述的行为，使得它听起来像你试图添加更多的客户端的行为，减少往返服务器的数量/大小。如果这是真的，我会建议探索像淘汰赛，灰烬或角一个JavaScript框架MVVM。

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.

Here is my Invoice model class

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>();
        }

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

    }

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.

Here is the Table showing the invoice

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

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>

解决方案

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.

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