title: Save Data from HTML table into SQL Server in MVC
body: <p><strong>Below is my Razor View</strong></p>
  
  <pre><code>    &lt;tr id="CGT_Row"&gt;
                      &lt;td class="noGutter"&gt;@Html.TextBoxFor(m =&gt; m.clsCGT.CGT_Visit_Date, new {@id="dp1",  @class = "input-sm text-center date", @readonly = "true" }) &lt;/td&gt;
                      &lt;td class="noGutter"&gt;
                          @Html.DropDownListFor(m =&gt; m.clsCGT.days_of_CGT, new List&lt;SelectListItem&gt;
                                             {
                                                 new SelectListItem { Text="1 Day",Value="1 Day"},
                                                 new SelectListItem { Text="2 Day",Value="2 Day"},
                                                 new SelectListItem { Text="3 Day",Value="3 Day"},
                                             },
               new { @class = "input-sm", @actor = "DropDown" })
                  &lt;/td&gt;
                  &lt;td class="noGutter"&gt;@Html.TextBoxFor(m =&gt; m.clsCGT.village_Name, new { @class = "input-sm text-center" })&lt;/td&gt;
                  &lt;td class="noGutter"&gt;@Html.DropDownListFor(m =&gt; m.clsCGT.fo_Name_CGT, TempData["Staff_List"] as IEnumerable&lt;SelectListItem&gt;, new { @id = "ddl_CGT_fo", @class = "input-sm", @actor = "DropDown", @style = "width:auto;" })&lt;/td&gt;
                  &lt;td class="noGutter"&gt;
                      @Html.DropDownListFor(m =&gt; m.clsCGT.member_attendence_CGT, new List&lt;SelectListItem&gt;
                                             {
                                                 new SelectListItem { Text="Less than 100%",Value="Less than 100%"},
                                                 new SelectListItem { Text="100%",Value="100%"}
                                             },
                       new { @class = "input-sm", @actor = "DropDown", @style = "width:auto;" })
              &lt;/td&gt;
              &lt;td class="noGutter"&gt;
                  @Html.DropDownListFor(m =&gt; m.clsCGT.process_follow_CGT, new List&lt;SelectListItem&gt;
                                             {
                                                 new SelectListItem { Text="n",Value="n"},
                                                 new SelectListItem { Text="y",Value="y"}
                                             },
                               new { @class = "input-sm", @actor = "DropDown", @style = "width:100%;" })
          &lt;/td&gt;
          &lt;td class="noGutter"&gt;
              @Html.DropDownListFor(m =&gt; m.clsCGT.CGT_timing, new List&lt;SelectListItem&gt;
                                             {
                                                 new SelectListItem { Text="As per time",Value="As per time"},
                                                 new SelectListItem { Text="Delayed",Value="Delayed"},
                                                 new SelectListItem { Text="Reschedule",Value="Reschedule"},
                                             },
                                       new { @class = "input-sm", @actor = "DropDown", @style = "width:auto;" })
      &lt;/td&gt;
      &lt;td class="noGutter"&gt;
          @Html.DropDownListFor(m =&gt; m.clsCGT.fo_comm_to_client, new List&lt;SelectListItem&gt;
                                             {
                                                 new SelectListItem { Text="n",Value="n"},
                                                 new SelectListItem { Text="y",Value="y"}
                                             },
                                               new { @class = "input-sm", @actor = "DropDown", @style = "width:100%" })
  &lt;/td&gt;
  &lt;td class="noGutter"&gt;
      @Html.DropDownListFor(m =&gt; m.clsCGT.member_house_verification_CGT, new List&lt;SelectListItem&gt;
                                             {
                                                 new SelectListItem { Text="n",Value="n"},
                                                 new SelectListItem { Text="y",Value="y"}
                                             },
                                                     new { @class = "input-sm", @actor = "DropDown", @style = "width:100%;" })
  &lt;/td&gt;
  &lt;td class="noGutter"&gt;
      @Html.DropDownListFor(m =&gt; m.clsCGT.documentation_complete_CGT, new List&lt;SelectListItem&gt;
                                             {
                                                 new SelectListItem { Text="n",Value="n"},
                                                 new SelectListItem { Text="y",Value="y"}
                                             },
                                                     new { @class = "input-sm", @actor = "DropDown", @style = "width:100%;" })
  &lt;/td&gt;
  &lt;td class="noGutter"&gt;
      @Html.DropDownListFor(m =&gt; m.clsCGT.CGT_conducted_for_3_days, new List&lt;SelectListItem&gt;
                                             {
                                                 new SelectListItem { Text="n",Value="n"},
                                                 new SelectListItem { Text="y",Value="y"}
                                             },
                                                     new { @class = "input-sm", @actor = "DropDown", @style = "width:100%;" })
  &lt;/td&gt;
  &lt;td class="noGutter"&gt;@Html.TextAreaFor(m =&gt; m.clsCGT.CGT_remarks, new { @class = "input-sm" })&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>This is bind with  model and onclick of a button I can save this into database without any problem .</p>
  
  <p>But my need is I want to add another row too before saving it into database </p>
  
  <p>So I used jquery to add another row in table below this row </p>
  
  <pre><code>function Create_New_Row(id) {
  
      var row; var table;
      var closeBtn = '&lt;td&gt;&lt;a onclick="$(this).parent().parent().remove();"&gt;&lt;i class="fa fa-times fa-lg fa-border" aria-hidden="true" style="color:#e90029"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;';
      if (id == 'CGT_Row')
      {
          row = '#CGT_Row';
          table = '#tbl_CGT tr:last';
      }
      else if (id == 'GRT_Row')
      {
          row = '#GRT_Row';
          table = '#tbl_GRT tr:last';
      }
      else if (id == 'Disb_Row')
      {
          row = '#Disb_Row';
          table = '#tbl_Disb tr:last';
      }
      var v = $(row);
      var html = '&lt;tr&gt;' + v.html() + closeBtn + '&lt;/tr&gt;';
      $(table).after(html);
  
      $('[id^="dp"]').datepicker({
           format: 'dd/mm/yyyy',
           autoclose: true
      });
  
  }
  </code></pre>
  
  <p>This will look like this </p>
  
  <p><a href="https://i.stack.imgur.com/Tp0I4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Tp0I4.png" alt="See this image"></a></p>
  
  <p>Click to add new row - to add new row into table </p>
  
  <p>Save Details - To save all these rows into database </p>
  
  <p>The Problem is - Only first row is bound to model , which I can access to save data, how to get data from other rows(added later ) coz they are just duplicate copy of first row html only without model binding</p>
  
  <p>For example - if I filled 4 rows than on Click of Save Details all 4 rows should be saved in database (SQL Server)</p>
  
  <p><strong>Update :1</strong></p>
  
  <p><strong>For Viktor Oleksyshyn</strong>  </p>
  
  <p>Below is my js code to convert this table values into array and pass it to controller </p>
  
  <pre><code>function Table_to_Array(id) {
  
      if (id == "CGT_Data")
      { var tbl="tbl_CGT"; }
      if (id == "GRT_Data")
      { var tbl = "tbl_GRT"; }
      if (id == "Disb_Data")
      { var tbl = "tbl_Disb"; }
  
      var myTableArray = $('#'+tbl+' tr').map(function () {
          return $(this).find(':input').map(function () {
              return this.value;
          }).get();
      }).get();
      return myTableArray;
  }
  
  function send_to_server(id)
  {
      var iden = id;
      var result = Table_to_Array(id);
      var data = {
          data_holder: result,
          Category: id
      };
  
      var params = {
          url: '@Url.Action("Send_to_server", "Annex1")',
          type: "POST",
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          traditional : true,
          data: JSON.stringify(data),
          success: function (result) { alert('Ok! It worked.'); },
          error: function (result) { alert('Warning! It failed.'); }
      };
      $.ajax(params);
  }
  </code></pre>
  
  <p>It does pass the array to controller but also show alert failure - (set on error: function [alert('Warning! It failed.'); ]) </p>