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

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.

• Creating A New .NET Core Web Application Using Visual Studio 2015 
• Creating A New .NET Core Web Application With Command Line Interface (CLI) 
• Setting And Reading Values From "appsettings.json" In .NET Core 
• Binding Dropdown List With Database In ASP.NET Core MVC

Topic

1. Database part
2. Creating 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 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 .NET Core Web application.

Open Visual Studio IDE from start page and click on 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 NuGet Package Manager will pop up.

 

In the browse tab, type “Microsoft.EntityFrameworkCore.SqlServer” in the search box and just click on Install button.

1. Microsoft.EntityFrameworkCore.SqlServer

Step 4 - Adding Connection string and Setting up DbContext

After adding reference, now add a connection string in appsetting.json file.



After adding a connection string, the next step is to add a class which will inherit 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 Models folder.

For adding a model, just right click on Models folder. Then, select Add >> Class. An "Add New Item" dialog will pop up with default class selected. Name the class as DatabaseContext and click on Add button.



After adding a DatabaseContext class, next we are going to inherit 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 default class selected. Name the class as Category and click on 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 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 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 Add button.



After we have clicked on Add button, it has created DemoController in 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 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 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 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 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



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 drop-down list

Adding jQuery reference on View

Adding Default items in 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 which takes Category model as an input parameter. When we are going to post an index form, then Category model will populate with selected values of drop-down list that users have selected.

In the below snapshot, you can have a look at how selected values are populated in Category model.


Step 16 - Saving and Running the Application

Now, after saving and run application, access the URL. http://localhost:####/demo/index

1. First, we are going to test Validation.




2. Choose Value from Drop-down List and submit.




3. Debug values after submitting the form.

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 "Creating Simple Cascading Dropdown List in ASP.NET Core MVC". Thanks for reading the article. If you like it, please share it.