title: How to Add new Row Dynamically in ASP.Net MVC 5
body: <p>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.</p>
  
  <p>Here is my Invoice model class</p>
  
  <pre><code>public class Invoice
      {
          public int Id { get; set; }
          public int InvoiceNumber { get; set; }
          public List&lt;LineItem&gt; LineItems { get; set; }
          public Client Customer { get; set; }
          public DateTime DateCreated { get; set; }        
          public decimal Total { get; set; }            
  
  
          public Invoice()
          {
              LineItems = new List&lt;LineItem&gt;();
          }
  </code></pre>
  
  <p>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</p>
  
  <pre><code>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; }
  
      }
  </code></pre>
  
  <p>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.</p>
  
  <p>Here is the Table showing the invoice</p>
  
  <pre><code>&lt;table class="table table-condensed" id="invoiceTable"&gt; 
        &lt;thead&gt;
           &lt;tr id="invoiceTableHead"&gt;
               &lt;td&gt;&lt;strong&gt;Item Name&lt;/strong&gt;&lt;/td&gt;
               &lt;td class="text-center"&gt;&lt;strong&gt;Item Description&lt;/strong&gt;&lt;/td&gt;
               &lt;td class="text-center"&gt;&lt;strong&gt;Item Price&lt;/strong&gt;&lt;/td&gt;
               &lt;td class="text-center"&gt;&lt;strong&gt;Item Quantity&lt;/strong&gt;&lt;/td&gt;
               &lt;td class="text-right"&gt;&lt;strong&gt;Total&lt;/strong&gt;&lt;/td&gt;
            &lt;/tr&gt;
         &lt;/thead&gt;
  
       &lt;tbody&gt;
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>  &lt;script type="text/javascript"&gt;
      $("#lineItemButton").click(function () {
          debugger;
          // Create elements dynamically
          var newRow = "&lt;tr&gt;&lt;td&gt;'@Html.TextBoxFor(x =&gt; x.LineItems, new { ??? What do int public here)'&lt;/td&gt;&lt;/tr&gt;";
  
          // Add the new dynamic row after the last row
              $('#invoiceTable tr:last').after(newRow);
          });
  
      &lt;/script&gt;
  </code></pre>