title: Using Jquery to append rows in MVC
body: <p>I have a dynamically generated gridview which is made of table and textbox controls and an add and remove button.</p>
  
  <p>The add button calls a jquery function which adds new row at the bottom of the grid and the remove button removes a particular row.</p>
  
  <p>Problem:</p>
  
  <p>Assuming I have 5 rows from the database and I add a new row and perform a count to check the number of textboxs I discover that it count only newly added textbox.</p>
  
  <p>View:</p>
  
  <pre><code>@{
  
          for (var i = 0; i &lt; Model.Image_Count; i++ )
          {
  
  
                                  &lt;tbody id="image-row"&gt;
                                      &lt;tr&gt;
                                          &lt;td class="left"&gt;
                                              &lt;table&gt;
                                                  &lt;tr&gt;
                                                      &lt;td&gt;
                                                          &lt;img class="img-tag" id="img-row-tag" src="@Model.Product_ImageLink[i]" alt="no-image" /&gt;
                                                          @Html.HiddenFor(x =&gt; x.Product_ImageLink[i])
                                                      &lt;/td&gt;
                                                  &lt;/tr&gt;
                                                  &lt;tr&gt;
                                                      &lt;td&gt;
                                                          &lt;a id="lnk" onclick="_file_upload(this);" class="button"&gt;Upload File&lt;/a&gt;
                                                          &lt;input id="file_row" class="file-tag" onchange="readURL_(this, i);" type="file" name="file_row" /&gt;
                                                          &lt;div class="validation-area"&gt;
                                                              @Html.ValidationMessageFor(x =&gt; x.Product_ImageLink[i])
                                                          &lt;/div&gt;
                                                      &lt;/td&gt;
                                                  &lt;/tr&gt;
                                              &lt;/table&gt;
  
                                          &lt;/td&gt;
                                          &lt;td class="right"&gt;
                                              @Html.TextBoxFor(x =&gt; x.Product_SortOrder[i])
                                          &lt;/td&gt;
                                          &lt;td class="left"&gt;&lt;a onclick="$('#image-row' + i).remove();" class="button"&gt;-&lt;/a&gt;&lt;/td&gt;
                                      &lt;/tr&gt;
                                  &lt;/tbody&gt;
          }
  
                              }
  </code></pre>
  
  <p>JQuery:</p>
  
  <pre><code>var attribute_row = 1; 
  function addattribute(){
       html = '&lt;tbody id="attribute-row' + attribute_row + '"&gt;';
       html += '  &lt;tr&gt;';
       html += '    &lt;td class="left"&gt;@Html.TextBoxFor(x=&gt;x.AttributeName)&lt;div class="validation-area"&gt;@Html.ValidationMessageFor(x =&gt; x.AttributeName)&lt;/div&gt;&lt;/td&gt;';
       html += '    &lt;td class="right"&gt;&lt;input type="text" name="Attribute_SortOrder" id="Attribute_SortOrder"&gt;&lt;/td&gt;';
       html += '    &lt;td class="left"&gt;&lt;a onclick="$(\'#attribute-row' + attribute_row + '\').remove();" class="button"&gt;-&lt;/a&gt;&lt;/td&gt;';html += '  &lt;/tr&gt;';
       html += '&lt;/tbody&gt;';$('#attribute tfoot').before(html);
       attribute_row++;$('#Attribute_Count').val(attribute_row);
   }
  </code></pre>
  
  <p>Model:</p>
  
  <pre><code> public bool[] IsDefault { get; set; }
      public string Image_Link { get; set; }
      public string Image_Path { get; set; }
      public string[] Product_ImageLink { get; set; }
      public int[] Product_SortOrder { get; set; }
      public int Image_Count { get; set; }
  
      public int iCount { get; set; }
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>    public ActionResult Products(int? id)
      {
  
  
          if (id == null)
          {
  
  
  
  
  
          }
          else
          {
  
              var y = _repository.GetProductImage(id);
              List&lt;string&gt; _Product_ImageLink = new List&lt;string&gt;();
              List&lt;int&gt; _Product_SortOrder = new List&lt;int&gt;();
  
               foreach (var z in y)
                  {
                      _Product_ImageLink.Add(z.Product_ImageLink);
                      _Product_SortOrder.Add(z.Product_SortOrder);
                  }
  
  
              model.Product_SortOrder = _Product_SortOrder.ToArray();
              model.Product_ImageLink = _Product_ImageLink.ToArray();
  
  
  
          }
  
          return View(model);
      }
  
  [HttpPost]
      public ActionResult Products(ProductModel _model, int? id)
      {
  
          if (ModelState.IsValid)
          {
  
              if (_model.ProductId == 0)
              {
  
  
  
              }
              else
              {
  
                  int jCount = _model.Product_ImageLink.Count();                
              }              
          }
          else
          {
              _Message("Error", "Please check the form carefully for errors!");
  
          }
  
          ViewBag.IsButtonClick = true;
          return View(_model);
  
      }
  </code></pre>