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

Microsoft.EntityFrameworkCore.SqlServer

Adding Model MainProduct.

After adding Category, SubCategory, and MainProduct Model, in our next step, we are going to add the 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 the DatabaseContext class, as shown below.

Step 7. Adding Controller [DemoController]

To add a Controller, just right-click on the Controller folder, and 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 the Database using Entity Framework core.

In DemoController, we are using constructor injection for getting a dependency.

Step 9. Adding View [index. cshtml].

To add 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” to add 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): Bypassing CategoryID to this method, it will return all Subcategories [will return data in JSON format]
2. GetProducts(int SubCategoryID): Bypassing 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 the Index.cshtml view to call these Action Methods.

// GetSubCategory method will get called on change of the Category drop-down list
// 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 lists.

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 the 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 the 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 the 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 requests and getting selected values

For handling HTTP post requests, 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 running an application, access the URL. http://localhost:####/demo/index.

1. First, we are going to test Validation.
2. Choose Value from the 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 the "Creating Simple Cascading Dropdown List in ASP.NET Core MVC". Thanks for reading the article. If you like it, please share it.