Bind Dropdownlist in ASP.NET Core

Problem Defination :- We have a requirement in which we need to bind the table data into Dropdownlist in ASP .Net Core application. For example we have a Country master table and we need to present these countries through the dropdownlist in UI.

Below is the step by step process explain in details so that you can follow it and bind a dropdownlist in your application.

Step 1 :- Create Project using Microsoft Visual Studio

Image is not available

Select Project Type ASP.Net Core Web App(Model-View-Controller)

Image is not available

Write Name of Your Application Project

Image is not available

Choose Suitable framework version and Check the checkbox for Configure Https

Image is not available

Your Solution explorer looks like as in image

Image is not available

Step 2 :- Install the required packages from nuget package manager

Image is not available

Select Microsoft.EntityFrameworkCore.SqlServer with compatible version and install it.

Image is not available

Select Microsoft.EntityFrameworkCore.Tools with compatible version and install it.

Image is not available

Select Microsoft.EntityFrameworkCore with compatible version and install it.

Image is not available

You can check installed packages as shown in below image

Image is not available

Step 3 :- Create a Model Class Country for dropdownlist binding from database.

                
 public class Country
    {
        [Key]
        public int CountryId { get; set; }
        public string CountryName { get; set; }
    }  

Step 4 :- Create a AppDbContext class for Dbcontext and use Country model class as a DBSet as shown in below image and code.

Image is not available
                
 public class AppDbContext : DbContext
    {
        public AppDbContext(DbContextOptions options) : base(options)
        {

        }
        public DbSet tblCountries { get; set; }
    }  

Step 5 :- Define a Connection string into Appsettings.Json file as shown in below image.

Image is not available

Step 6 :- Add a Middileware for DBContext in Program.cs file as shown in below image.

Image is not available

Step 7 :- Trigger the Add-Migration "FirstMigration" Command as shown in below image.

Image is not available

Step 8 :- Trigger the Update-Database Command as shown in below image.

Image is not available

After triggering above migration commands you can see a newly generated migration folder in solution and there is a FirstMigration Class is autogenerated from migration as shown in below image.

Image is not available

After triggering above migration commands you can see a newly generated migration tables in databse and there are some other migration history tables are also autogenerated from migration as shown in below image.

Image is not available

Step 9 :- Create a Controller and Named it TestController and inside controller create a action Method named it Index as shown in below code.

                
  public class TestController : Controller
    {
        private readonly AppDbContext db;
        public TestController(AppDbContext _db)
        {
            db = _db;
        }

        public IActionResult Index()
        {
            var dropdownItems = db.tblCountries.ToList();
            ViewBag.Country = new SelectList(dropdownItems, "CountryId", "CountryName");
            return View();
        }
    } 
Image is not available

Step 10 :- Create a View and write the below Html code into it as shown in image.

Image is not available

Now run the application you will get the desired output as shown in below image.

Image is not available

Image is not available

About the Author
Sudheer Singh Chouhan is a Software Engineer having Expertise in Development Design and Architecting the applications , Project Management , Designing Large Scale Databases in SQL Server since last 17 Years.
Skill Sets :- Microsoft .NET technologies like ASP.Net Core, Web API, LINQ, Web Forms, WinForms, SQL Server, EntityFramework, Design Patterns, Solid Principles, Microservices, AWS Cloud.