Asp.Net Core 6: Bind DropdownList And Display In Table & Access Selected Value (Webgrid) Using C#.Net

In this article i will show you how you can bind the dropdown list and show in each row  of table in asp.net core or mvc application using c#.net. 

Other Articles: Asp.Net Core 6: How To Bind DropDownList From DataBase Using C#.Net, Asp.Net Core 6: Add(Create) Dynamic Row With TextBox/TextBoxFor To Table and Get Control Value at Controller End, jQuery, C#.Net, Asp.Net Core 6: How to Search/Find Data Between Two Dates In MS Sql , Linq, C#.net, Search And Display Data In Table/Tabular Format in Asp.net Core 6/MVC using C# (Ms Sql Server).

For this article fist we will create two tables in our sql server database. First for department and second one is for employee detail.

Now for this article we will create a asp.net core 6 application and install below two mention packages for performing EntityFramework operations. 

Microsoft.EntityFrameworkCore.SqlServer

Microsoft.EntityFrameworkCore.Tools

Now we will run scamfld command to import all sql table objects as entityframework. 

Scaffold-DbContext "Server=..\SQLEXPRESS;Database=TestDB;Trusted_Connection=True;" Microsoft.EntityFrameworkCore.SqlServer -OutputDir data

 

Now here is the table objects. In this we are having department and employee table. In this we saving department id as a reference. 

Now we will create a model class to bind the view.

using Microsoft.AspNetCore.Mvc.Rendering; using System.Collections.Generic;   namespace Project.Models {     public class EmployeeModel     {         public int[] DepartmentId { get; set; }         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 List<SelectListItem> DepartmentList { get; set; }     } }

Now we will make code to get the data from database and bind it to the model class to display it to the view. 

using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.Mvc.Rendering; using Project.data; using Project.Models; using System; using System.Collections.Generic; namespace Project.Controllers {     public class HomeController : Controller     {         [HttpGet]         public IActionResult Index()         {             EmployeeModel employeeModel = new EmployeeModel();             employeeModel.EmployeeList = new List<EmployeeDetail>();             //Department list             List<SelectListItem> department = new List<SelectListItem>();              TestDBContext testDBContext = new TestDBContext();             //Get department list             var depdata = testDBContext.Departments;             department.Add(new SelectListItem             {                 Text = "Select Department",                 Value = ""             });             foreach (var ditem in depdata)             {                 department.Add(new SelectListItem                 {                     Text = ditem.DepartmentName,                     Value = Convert.ToString(ditem.Id)                 });             }             //bind employee data             var empdata = testDBContext.Employees;             foreach (var item in empdata)             {                 employeeModel.EmployeeList.Add(new EmployeeDetail                 {                     EmployeeName = item.EmployeeName,                     Id = item.Id,                     Location = item.Location,                     DepartmentList = department                 });             }             return View(employeeModel);         }         [HttpPost]         public IActionResult Index(EmployeeModel employeeModel)         {             //Now save the department id in the database as required             //Rebind the employee table data again              return View();         }     } }

In above first we will discuss about HttpGet method. In this i have created the object of the mode class. After creating object i have prepared the list of department, and after getting the data of department i have passed it to the lit of the to the employee list. 

Now in HttpPost method i have passed the model class as a parameter. In this we will get the dropdown selected value which is present in table. 

Now i have passed the model object to the view. Now we will create the view.

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

In above code i have i have prepared the model collection data to display the data. For department list i have taken dropdownlist. In this i have prepared the name of dropdonlist as an array. So that when postback take place we should be able to get the selected value. Now we have done run the code to check the output.

Now select the dropdown value an click on submit.

Ones you click on submit button you will get the selected department list at controller end.

Download