Asp.Net Core 6: Add(Create) Dynamic Row With TextBox/TextBoxFor To Table and Get Control Value at Controller End, jQuery, C#.Net

In this article i will show you how you can dynamically add table rows and get the rows value at controller end using c#.net and jQuery.

Other Articles: Asp.net Core 6: Access/Read/Pass TextBox and TextboxFor Value From View To Controller In C#.Net, XML File Read(Parse) and Display In Table/Tabular Format in ASP.Net Core 6 / MVC Using C#.Net, ASP.NET Core 6 : Ajax Upload File( Without Page Refresh) To wwwroot Folder in Using C#.Net , jQuery.

Now for this article we will create a new asp.net core application and add a model class. In this add the below code into your model class. 

public class TableModel     {         public string[] Column1 { get; set; }         public string[] Column2 { get; set; }         public string[] Column3 { get; set; }     }

In above class file code i have added the string array  type value. Now we will go to our controller and add the below code into it. 

@{     ViewData["Title"] = "Home Page"; } @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @id = "formxmldata", @enctype = "multipart/form-data" })) {     <div class="form-group col-sm-12">         <label>             <input type="button" value="+" />         </label>         <table width="100%" class="table table-bordered res table-hover" id="videodetail">             <thead class="text-uppercase text-center">                 <tr>                     <th>Video Name</th>                     <th>Key Points</th>                     <th>Remarks</th>                 </tr>             </thead>             <tbody>                 <tr class="rowcount">                     <td style="width:32%">@Html.TextBox("Column1[0]", "", new { @class = "form-control form-control-sm temptextcontrolclass" })</td>                     <td style="width:32%">@Html.TextBox("Column2[0]", "", new { @class = "form-control form-control-sm" })</td>                     <td style="width:32%">@Html.TextBox("Column13[0]", "", new { @class = "form-control form-control-sm" })</td>                 </tr>             </tbody>         </table>         <input type="submit" value="Submit" />     </div> }

In above code i have added TextBox control and with name having index 0. So when we add the new row using jquery in our table we will make the newly added row control index and per the row number so the next row index will be 1. Now we will write the jquery code  add the code to onclick on the highlighted control.

<script>         var AddNewRowDetailsVideo = function () {             var numItems = $('.rowcount').length;              var row = "<tr class='rowcount'>";             row = row + "<td><input type='text' name='Column1[" + numItems + "]' class = 'form-control form-control-sm' /></td>";             row = row + "<td><input type='text' name='Column2[" + numItems + "]' class = 'form-control form-control-sm' /></td>";             row = row + "<td><input type='text' name='Column3[" + numItems + "]' class = 'form-control form-control-sm' /></td>";             $('#tabledetail').append(row);         }     </script>

In above code i have counted the number of rows and then prepared the html content and append the table control whose id. Here is the complete code. 

@{     ViewData["Title"] = "Home Page"; } @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @id = "formxmldata", @enctype = "multipart/form-data" })) {     <div class="form-group col-sm-12">         <label>             <input type="button" value="+" onclick="javascript: AddNewRowDetailsVideo();" />         </label>         <table width="100%" class="table table-bordered res table-hover" id="videodetail">             <thead class="text-uppercase text-center">                 <tr>                     <th>Video Name</th>                     <th>Key Points</th>                     <th>Remarks</th>                 </tr>             </thead>             <tbody>                 <tr class="rowcount">                     <td style="width:32%">@Html.TextBox("Column1[0]", "", new { @class = "form-control form-control-sm temptextcontrolclass" })</td>                     <td style="width:32%">@Html.TextBox("Column2[0]", "", new { @class = "form-control form-control-sm" })</td>                     <td style="width:32%">@Html.TextBox("Column3[0]", "", new { @class = "form-control form-control-sm" })</td>                 </tr>             </tbody>         </table>         <input type="submit" value="Submit" />     </div>     <script>         var AddNewRowDetailsVideo = function () {             var numItems = $('.rowcount').length;               var row = "<tr class='rowcount'>";             row = row + "<td><input type='text' name='Column1[" + numItems + "]' class = 'form-control form-control-sm' /></td>";             row = row + "<td><input type='text' name='Column2[" + numItems + "]' class = 'form-control form-control-sm' /></td>";             row = row + "<td><input type='text' name='Column3[" + numItems + "]' class = 'form-control form-control-sm' /></td>";             $('#videodetail').append(row);         }     </script> }

Now we have done run the code and check the output.

Now add some row by clicking on "+" button.

After adding rows add values on rows control taxtbox click on submit.

Now click on Submit button and check the controller end for received value.

Now display the value.

Note: Here we are receiving data column wise.

Download