Creating Simple Cascading DropDownList In ASP.NET Core MVC With New Tag Helpers

Introduction

 
Cascading Dropdown is also known as Dependent Dropdown.
 
 
If you are new to .NET Core, read these articles to kick start your .NET Core knowledge.
Topic
  1. Database part
  2. Creating an application
  3. Installing Package for Entity framework core From NuGet
  4. Adding Connection string and Setting up DbContext
  5. Adding Category, SubCategory, MainProduct Model in Models Folder
  6. Adding DbSet for Category, SubCategory, and MainProduct Model in DatabaseContext class
  7. Adding Controller [DemoController]
  8. Getting Data from Database using Entity framework core.
  9. Adding View [index.cshtml]
  10. Binding Category Dropdownlist using new Tag helper
  11. Adding SubCategory and Product Dropdownlist to index.cshtml View
  12. Adding SubCategory and GetProducts Action Method to Demo Controller
  13. Adding Jquery reference on View and Default items in a drop-down list
  14. Binding SubCategory and Product drop-down list with jquery Ajax
  15. Adding Index Action method for handling post request and getting selected values
  16. Saving and Run Application.
Step 1 - Database part
 
I created a sample database with the name “AllSampleCode” for showing the demo.
 
 
Inside this database, I have added 3 tables - Category, SubCategory, and MainProduct. You can see the structure of the tables below.
 
 
 
 
 
Step 2 - Creating the application
 
Now, let’s create a .NET Core Web application.
 
Open Visual Studio IDE from the start page and click on the New Project link.
 
 
It will open a new dialog with the name “New Project”. From the left pane, choose Templates >> Visual C# >> .NET Core template. Then in Middle pane, you will see .NET Core project templates. Choose “ASP.NET Core Web Application (.NET Core)” project templates.
 
 
After choosing the project template, next, we are going to name the project as “MVCCore1” and finally, we will click on the OK button to create a project. But, it will pop up another dialog with the name “New ASP.NET Core Web Application (.NET Core)”.
 
 
Inside this dialog, we are going to choose the “Web application” project template for creating “Web application” and click on the OK button.
 
Below is the complete project view that is newly created.
 
 
 
After creating the application, next, we have to add the references needed for Entity Framework Core.
 
 
Step 3 - Installing package for Entity framework core from NuGet
 
 
To install the package, just right click on the project (MVCCore1) and then select Manage NuGet package. The below dialog of the NuGet Package Manager will pop up.
 
In the browse tab, type “Microsoft.EntityFrameworkCore.SqlServer” in the search box and just click on the Install button.
  1. Microsoft.EntityFrameworkCore.SqlServer
  2.  
     
Step 4 - Adding Connection string and Setting up DbContext
 
After adding a reference, now add a connection string in appsetting.json file.
 
 
After adding a connection string, the next step is to add a class that will inherit the DbContext class. Before doing this, let's start with creating a folder for models, and inside that, we are going to add this class.
 
For adding a folder, just right click on the project (MVCCore1), then choose Add from the menu that pops up, and inside that choose New Folder.
 
Add - New Folder.
 
 
Now, let’s add a class with the name DatabaseContext in the Models folder.
 
For adding a model, just right click on the Models folder. Then, select Add >> Class. An "Add New Item" dialog will pop up with the default class selected. Name the class as DatabaseContext and click on the Add button.
 
 
After adding a DatabaseContext class, next, we are going to inherit the DbContext class.
 
After inheriting with DbContext, next we are creating a constructor which takes DbContextOptions as an input parameter and also inherits the base class constructor (: base(options)) [DbContext].
 
 
Next, we are going to add a new Service in Startup.cs class for injecting dependency.
 
Now, whenever you use DatabaseContext class, DbContext instance will be injected there.
 
 
Step 5 - Adding Category, SubCategory, MainProduct Model in Models Folder
 
For adding model, just right click on Models folder, select Add >> Class. The "Add New Item" dialog will pop up with the default class selected. Name the class as Category and click on the Add button.
 
Adding Model Category
 
 
Adding Model SubCategory
 
 
Adding Model MainProduct
 
 
After adding Category, SubCategory, and MainProduct Model, in our next step, we are going to add DbSet of all models in the DatabaseContext class.
 
Step 6 - Adding DbSet for Category, SubCategory, and MainProduct Model in DatabaseContext class
 
Now, let's add DbSet for Category, SubCategory, and MainProduct Model in DatabaseContext class, as shown below.
 
 
Step 7 - Adding Controller [DemoController]
 
For adding Controller, just right click on the Controller folder, select Add >> New Item. After selecting New Item, a new dialog of Add New Item will pop up.
 
Inside that, just choose “MVC Controller Class”. Name the Controller as “DemoController” and click on the Add button.
 
 
After we have clicked on the Add button, it has created DemoController in the Controller folder, as shown in the below view.
 
 
Step 8 - Getting Data from Database using Entity framework core.
 
In DemoController, we are using constructor injection for getting a dependency.
 
 
Step 9 - Adding View [index.cshtml].
 
For adding View, just right click on the Views folder, and then Add >> New Folder. Name the folder as “Demo”.
 
 
After adding a Demo folder, now we are going to add View inside this folder.
 
For adding View, right-click on the Demo folder and select Add >> New Item. A new dialog "Add New Item" will pop up.
 
 
Just choose “MVC View Page” for adding View and give a name to the View. The View name must be the same as the action method name. So, we are going to name it “Index” [“Index.cshtml”] and click on Add.
 
 
Step 10 - Binding Category Dropdownlist using a new Tag helper.
 
 
After binding the first drop-down list of Category on the index.cshtml View, now we are saving the application and running it. Access the URL. http://localhost:####/demo/index
 
 
Now, we have added only one drop-down list on the index.cshtml view. Let’s add the remaining 2 drop-down lists also.
 
Step 11 - Adding SubCategory and Product Dropdownlist on index.cshtml View
 
 
After adding all drop-down lists on View, now let’s run the application and check how our View looks.
 
 
We can see all the drop-down lists above but only one drop-down list is filled with data while the remaining two are empty. For filling data in this drop-down list, we need to use jQuery AJAX.
 
Step 12 - Adding GetSubCategory and GetProducts Action Method to Demo Controller
 
 
Also, we need to provide the data to the dropdown list in JSON format because we are using jQuery AJAX for binding this dropdown list. Doing that, we need to add two action methods.
  1. GetSubCategory(int CategoryID)
     
    By passing CategoryID to this method, it will return all Subcategories [will return data in JSON format]
     
  2. GetProducts(int SubCategoryID)
     
    By passing SubCategoryID to this method, it will return all Products [will return data in JSON format]
Adding GetSubcategories Method to Demo Controller
 
index
 
Adding GetProducts Method to Demo Controller
 
 
After adding action methods, we need to add jQuery AJAX code in Index.cshtml view to call these Action Methods.
 
  1. GetSubCategory method will get called on change of the Category drop-down list
  2. GetProducts method will get called on change of the SubCategory drop-down list
Step 13 - Adding jQuery reference on View and default items in a drop-down list
 
Adding jQuery reference on View
 
 
Adding Default items in a drop-down list
 
 
Now, if you run the application, you will not see an empty drop-down list.
 
 
After adding default items in the drop-down lists, now let’s bind SubCategory and Product drop-down list.
 
Step 14 - Binding SubCategory and Product dropdown list with jQuery AJAX
 
Now, if we look at the below code, in the document ready function, we have written the change function of the Category drop-down list. In that, we have first declared the URL for getting data of SubCategory, then we have used $.getJSON method to call GetSubCategory action method and along with that, we are passing the parameter CategoryID to this method. In return, we get the collection of SubCategory List which we are going to iterate and bind to options of SubCategory dropdown list.
 
In the same way, we have written the change function of SubCategoryID dropdown list. In that, we have first declared the URL for getting the product data, then we have used $.getJSON method to call GetProducts action method and along with that, we are passing parameter SubCategoryID to this method. In return, we get the collection of Product List which we are going to iterate and bind to options of product drop-down list.
 
Below is the complete code snippet of binding SubCategory and Product drop-down list
 
 
Now, if you save and run the application, then access the URL: - http://localhost:####/demo/index
 
 
Wow! We have populated all the dropdown lists.
 
Step 15 - Adding Index Action method for handling post request and getting selected values
 
For handling Http post request, I have added a new action method that takes the Category model as an input parameter. When we are going to post an index form, then the Category model will populate with selected values of the drop-down list that users have selected.
 
In the below snapshot, you can have a look at how selected values are populated in the Category model.
 
 
Step 16 - Saving and Running the Application
 
Now, after saving and run an application, access the URL. http://localhost:####/demo/index
  1. First, we are going to test Validation.
  2.  
     
  3. Choose Value from Drop-down List and submit.
  4.  
     
  5. Debug values after submitting the form.
  6.  
Note
 
Download the entire source code of this application along with the database script and try making your own demo to learn more.
 
Finally, we have completed the "Creating Simple Cascading Dropdown List in ASP.NET Core MVC". Thanks for reading the article. If you like it, please share it.