Creating Dropdown from Master Tables to select Dependant data from Child Table

raklali 236 Reputation points

I have a Postgresql Database which has Two Master Tables and a dependent Child Table. In VS 2022, I want to create a Set of Dropdowns to be use across various pages of the project. And on One Page, I want to use the Dropdowns to select the tuples from the child table based on the selected values of the Master Table Dropdowns.

I followed lots of Online Videos and Tutorials but couldn;t find a soultion that facilitates such approach. All such tutorials show creating a table and then populating the Dropdown and thats the end of it. No Further guide is available.

Can I please get some help here.

PS: My project is ASP.NET Core 6.0 MVC Entity Framework

A set of technologies in the .NET Framework for building web applications and XML web services.
3,767 questions
0 comments No comments
{count} votes

Accepted answer
  1. Zhi Lv - MSFT 28,231 Reputation points Microsoft Vendor

    Hi @raklali ,

    From your description, it seems that you want to create a Cascading (Dependent) DropDownList, right?

    To create a Cascading DropDownlist, you can refer to the following sample (In this sample, I will use SQL server database, you can refer to it and change it to Postgresql Database):

    1. Create the following tables and configure the One-to-Many relationship:
      public class Country  
          public int CountryID { get; set; }  
          public string CountryName { get; set; }  
          public List<State> States { get; set; }  
      public class State  
          public int StateId { get; set; }  
          public string StateName { get; set; }  
          public Country Country { get; set; }  
          public List<City> Cities { get; set; }  
      public class City  
          public int CityID { get; set; }  
          public string CityName { get; set; }  
          public State State { get; set; }  
    2. Add the DbSet in the Dbcontext, and use EF core migration to generate the tables, and then add the following test data:
    3. Create a UserViewModel, assume we will create a User and select the country, state and city
      public class UserViewModel  
          public int Id { get; set; }  
          public string UserName { get; set; }  
          //use the following properties to store the DropDownList selected values.  
          public int SelectedCountryId { get; set; }  
          public int SelectedStateId { get; set; }  
          public int SelectCityID { get; set; }  
    4. In the Controller, use the ViewBag to store the first DropDownlist options, and then populate the DropDownList. And create a setDropDrownList action, to find the relates state or city.
      public class HomeController : Controller  
          private readonly ILogger<HomeController> _logger;  
          private readonly ApplicationDbContext _db;  
          private readonly IConfiguration _configuration;  
          public HomeController(ILogger<HomeController> logger, ApplicationDbContext applicationDbContext, IConfiguration configuration)  
              _logger = logger;  
              _db = applicationDbContext;  
              _configuration = configuration;  
          public IActionResult CreateUser()  
              var countries = _db.Countries.ToList(); //Query the database, and get the countries, then populate the first DropDownlist.  
              ViewBag.Countries = countries;  
              return View();  
          public IActionResult CreateUser(UserViewModel user)  
              return View();  
          //this action is used to populate the DropDownList.  
          public JsonResult setDropDrownList(string type, int value)  
              if (type == "SelectedCountryId")  
                  var statesList = new SelectList(_db.States.Where(m => m.Country.CountryID == value).ToList(), "StateId", "StateName");  
                  return Json(statesList);  
              else if (type == "SelectedStateId")  
                  var citylist = new SelectList(_db.Cities.Where(m => m.State.StateId == value).ToList(), "CityID", "CityName");  
                  return Json(citylist);  
              return Json(null);  
    5. In the view page: user the select tag to display the DropDownlist and use JQuery Ajax to populate the cascading DropDownList. View the source code: 253541-image.png

    Then, the result as below:


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    Best regards,

0 additional answers

Sort by: Most helpful