title: append row to table using jquery ajax post
body: <p>I'm trying to append rows to a table dynamically in my asp.net MVC 5 application. this is the table:</p>
  
  <pre><code>&lt;table class="table" id="acquisition-cost"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th class="text-left"&gt;Description&lt;/th&gt;
              &lt;th class="text-center" style="width: 180px"&gt;Quantity&lt;/th&gt;
              &lt;th class="text-right" style="width: 180px"&gt;Rate ($)&lt;/th&gt;
              &lt;th class="text-right" style="width: 180px"&gt;Amount ($)&lt;/th&gt;
              &lt;th class="text-center" style="width: 60px"&gt;Delete&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          @foreach (var item in Model.AcquisitionCosts) {
              @Html.Partial("CostViewModel", item);
          }
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>when the add row button is clicked, it calls the jquery ajax function. This makes a call the controller which returns a partial view. </p>
  
  <p>the returned partial view looks like this:</p>
  
  <pre><code>&lt;input type="hidden" name="costrow.index" autocomplete="off" value="a8a41a6a-f42c-48ae-9afb-eb61f734f65e" /&gt;    
  &lt;tr&gt;  
    &lt;td&gt;&lt;input class="form-control text-left" id="costrow_a8a41a6a-f42c-48ae-9afb-eb61f734f65e__Description" maxlength="50" name="costrow[a8a41a6a-f42c-48ae-9afb-eb61f734f65e].Description" type="text" value="" /&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input class="form-control text-center auto" data-v-max="9999999999999" data-v-min="0" id="costrow_a8a41a6a-f42c-48ae-9afb-eb61f734f65e__Quantity" maxlength="15" name="costrow[a8a41a6a-f42c-48ae-9afb-eb61f734f65e].Quantity" placeholder="0" type="text" value="" /&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input class="form-control text-right auto" id="costrow_a8a41a6a-f42c-48ae-9afb-eb61f734f65e__Rate" maxlength="15" name="costrow[a8a41a6a-f42c-48ae-9afb-eb61f734f65e].Rate" placeholder="0" type="text" value="" /&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input class="form-control text-right auto" id="costrow_a8a41a6a-f42c-48ae-9afb-eb61f734f65e__Amount" maxlength="15" name="costrow[a8a41a6a-f42c-48ae-9afb-eb61f734f65e].Amount" placeholder="0" type="text" value="" /&gt;&lt;/td&gt;
    &lt;td class="text-center"&gt;&lt;button class="btn icon-only" type="button"&gt;&lt;i class="fa fa-trash-o"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/td&gt;    
  &lt;/tr&gt;
  </code></pre>
  
  <p>However, after I append to the table. the <code>&lt;tr&gt; and &lt;td&gt;</code> tags are stripped from the html and only the input tags are appended. </p>
  
  <pre><code>$("#addstrategy").click(function () {
      $.ajax({
          type: "post",
          url: "/Wizard/StrategyRow",
          cache: false,
          datatype: "html",
          success: function (html) {
              alert(html);
              $("#acquisition-cost tbody").append(html);
          }
      });
  });
  </code></pre>
  
  <p>Alert on the response, all tags are there and he html is properly formed. </p>
  
  <p>Controller Event:</p>
  
  <p>[HttpPost]
      public PartialViewResult StrategyRow() {
          return PartialView("CostViewModel", new AcquisitionCostViewModel());
      }</p>
  
  <p>Partial View:</p>
  
  <pre><code>@using (Html.BeginCollectionItem("costrow")) {
  &lt;tr&gt;
      &lt;td&gt;@Html.TextBoxFor(model =&gt; model.Description, new { maxlength = "50", @class = "form-control text-left" })&lt;/td&gt;
      &lt;td&gt;@Html.TextBoxFor(model =&gt; model.Quantity, new { maxlength = "15", @class = "form-control text-center auto", @placeholder = "0", @data_v_max = "9999999999999", @data_v_min = "0" })&lt;/td&gt;
      &lt;td&gt;@Html.TextBoxFor(model =&gt; model.Rate, new { maxlength = "15", @class = "form-control text-right auto", @placeholder = "0" })&lt;/td&gt;
      &lt;td&gt;@Html.TextBoxFor(model =&gt; model.Amount, new { maxlength = "15", @class = "form-control text-right auto", @placeholder = "0" })&lt;/td&gt;
      &lt;td class="text-center"&gt;&lt;button class="btn icon-only" type="button"&gt;&lt;i class="fa fa-trash-o"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/td&gt;
  &lt;/tr&gt;
  }
  </code></pre>
  
  <p>I have gone through the code several times, but I can find why the <code>&lt;tr&gt; and &lt;td&gt;</code> are removed by .append() function. </p>
  
  <p>Thanks Captain0.</p>
  
  <p>changing my Partial view to this:</p>
  
  <pre><code>&lt;tr&gt;
     @using (Html.BeginCollectionItem("costrow")) {
      &lt;td&gt;@Html.TextBoxFor(model =&gt; model.Description, new { maxlength = "50", @class = "form-control text-left" })&lt;/td&gt;
      &lt;td&gt;@Html.TextBoxFor(model =&gt; model.Quantity, new { maxlength = "15", @class = "form-control text-center auto", @placeholder = "0", @data_v_max = "9999999999999", @data_v_min = "0" })&lt;/td&gt;
      &lt;td&gt;@Html.TextBoxFor(model =&gt; model.Rate, new { maxlength = "15", @class = "form-control text-right auto", @placeholder = "0" })&lt;/td&gt;
      &lt;td&gt;@Html.TextBoxFor(model =&gt; model.Amount, new { maxlength = "15", @class = "form-control text-right auto", @placeholder = "0" })&lt;/td&gt;
      &lt;td class="text-center"&gt;&lt;button class="btn icon-only" type="button"&gt;&lt;i class="fa fa-trash-o"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/td&gt;
  
   }
  &lt;/tr&gt;
  </code></pre>
  
  <p>Fixed the issue. now the input tag is now inside the <code>&lt;tr&gt;</code> tag.</p>