Asp.net Core 6: Bind(Populate) List Model Property in Table Control & Access Value In Controller Using C#.Net

In this article i will show you how you can bind the model class property of list type to control present in table and access the added value at controller end in asp.net core using C#.net.

Other Related Articles: Asp.Net Core 6: Bind ListBox(ListBoxFor) By EntityFrameWork Using C#.Net | Sql Server, Asp.Net Core 6: Add(Create) Dynamic Row With TextBox/TextBoxFor To Table and Get Control Value at Controller End, jQuery, C#.Net, How To Read / Access Email Setting In Appsettings.json In Asp.Net Core 6 in Controller Using C#.Net, Search And Display Data In Table/Tabular Format in Asp.net Core 6/MVC using C# (Ms Sql Server), Display Data In Table/Tabular Format In Asp Net Core 6/MVC Using C#.Net (Ms Sql Database), Asp.net Core 6: Ajax Login Form Using jQuery, C# Validate From Ms Sql Server Database.

Now for this article first we will create a new asp.net core and create a mode class file.

public class EmployeeModel     {         public List<EmployeeDetail> EmployeeList { get; set; }     }     public class EmployeeDetail     {         public int Id { get; set; }         public string EmployeeName { get; set; }         public string Location { get; set; }         public int Salery { get; set; }     }

After this model we will add the HttpGet method in the controller. In this method we will create the object of model class, and pass it to the view to bind it to control. 

[HttpGet]         public IActionResult Index()         {             EmployeeModel employeeModel = new EmployeeModel();             employeeModel.EmployeeList = new List<EmployeeDetail>();             //Here i have adding donw dummy value as id             //In this we will create 5 rows             for (int i = 0; i < 5; i++)             {                 employeeModel.EmployeeList.Add(new EmployeeDetail                 {                     Id = i                 });             }             return View(employeeModel);         }

In above code i have added 3 rows to the list. Ones be bind we will get 3 rows table and we will provide other detail and try to access it. This is just for generating no of rows to the list. You can use your own model  with data in list to  bind. After this we will create .cshtml view file and add the below code.

@model Project.Models.EmployeeModel @{     ViewData["Title"] = "Page"; }  @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @enctype = "multipart/form-data" })) {     <div class="text-center">         <table class="table table-bordered">             <thead>                 <tr>                     <td>Id</td>                     <td>Name</td>                     <td>Location</td>                     <td>Salery</td>                 </tr>             </thead>             <tbody>                 @{ int count = 0;}                 @foreach (var item in Model.EmployeeList)                 {                     <tr>                         <td>@(item.Id+1)</td>                         <td>@Html.TextBoxFor(m => Model.EmployeeList[count].EmployeeName, new { @class = "form-control" })</td>                         <td>@Html.TextBoxFor(m => Model.EmployeeList[count].Location, new { @class = "form-control" })</td>                         <td>@Html.TextBoxFor(m => Model.EmployeeList[count].Salery, new { @class = "form-control" })</td>                     </tr>                     count = count + 1;                 }             </tbody>         </table>         <input type="submit" value="Submit" />     </div> }

In above code i have used foreach loop to generate the rows. In this i have taken the index variable named as count. I am increasing each time in look. In this I have used model list by assigning the index of each and every control. Now we have done run the code to check the output.

Above tis the table. Now add some value and click on submit button.

Now below you can see that we are getting the table model in model class list.