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.

• 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 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 the 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 requests 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 the 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 “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 the 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.

Microsoft.EntityFrameworkCore.SqlServer

Step 4. Adding Connection string and Setting up DbContext

After adding a reference, now add a connection string in the 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.

To add 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 the DatabaseContext class, the DbContext instance will be injected there.

Step 5. Adding Category, SubCategory, MainProduct Model in Models Folder

For adding a model, just right click on the Models folder, and 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 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.