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

Question

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

Answer 1

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();  
       }  
       [HttpPost]  
       public IActionResult CreateUser(UserViewModel user)  
       {  
           return View();  
       }  
       //this action is used to populate the DropDownList.  
       [HttpPost]  
       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:

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,
Dillion