Post
Ask Question

Creating a Simple CheckBoxList In ASP.NET Core MVC With New Tag Helpers

In this article, we are creating a simple CheckBoxList in ASP.NET Core MVC using new Tag Helpers and data. For creating this CheckBox list, we are going to pull data from the SQL Server database using Entity Framework Core.



If you are new to.NET Core, please read these articles to kick start your .NET Core knowledge.
  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 Model in Models Folder
  6. Adding DbSet for Category Model in DatabaseContext class
  7. Adding Controller [DemoController]
  8. Getting Data from Database using Entity framework core for binding Checkbox List.
  9. Adding View [index.cshtml]
  10. Binding Category Checkboxlist using new Tag helper
  11. Adding Index Action method for handling post request and getting selected values
  12. Saving and Running Application.

Step 1 - Database part

Created a sample database with the name “AllSampleCode” for showing the demo.



Inside this database, I have added a Category table. You can see the structure of the table below.



Step 2 - Creating application

Now, let’s create.NET Core web application. Open Visual Studio IDE. From the Start page, click on "New Project" link.



It will open a new dialog with the name  “New Project”. Inside that, from the left pane, choose Installed >> Templates. Now, choose Visual C# >> .NET Core. In the middle pane, you will see .NET Core project templates. Select “ASP.NET Core Web Application (.NET Core)” project template.



After choosing project template, next we are going to name the project as “MVCCore2” and finally, click on OK button to create a project. It will pop up another dialog with name “New ASP.NET Core Web Application (.NET Core)”.



Inside this dialog, choose “Web Application” project template for creating Web application and click on OK.

Below is the complete project view for the newly created project.



After creating application, next we are going to add the reference needed for Entity Framework Core.

Step 3 - Installing package for EF Core, from NuGet

To install the package, just right click on the project (MVCCore2) and then, select "Manage NuGet package". The below dialog of NuGet Package Manager will pop up. In the browse tab, there is a search box there. Type “Microsoft.EntityFrameworkCore.SqlServer” and just click on Install button to install.

  1. Microsoft.EntityFrameworkCore.SqlServer

Step 4 - Adding connection string and setting up DbContext.

After adding reference, the next step is to add a connection string in appsettings.json file.



After adding the  connection string, we need to add a class that will inherit DbContext class. But, 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 (MVCCore2), choose "Add" from menu that pops up, and choose New Folder inside that.

Add - New Folder.



Now, let’s add a class with name DatabaseContext in Models folder.

For adding a model, just right click on Models folder, select Add >> Class and Add New Item dialog will pop up with default class selected. We are going to 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, let's create 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, their DbContext instance will be injected.



After completing with "Add service", next we are going to add Model.

Step 5 - Adding Category Model in Models folder

For adding model, just right click on Models folder, then select Add >> Class. The "Add New Item" dialog will pop up with default class selected. We are going to name the class as Category and click on "Add" button.

Adding Model Category



After adding Category Model, in the next step, we are going to add DbSet of all models in DatabaseContext class.

Step 6 - Adding DbSet for Category Model in DatabaseContext class

Now, let's add DbSet for Category Model in DatabaseContext class, as shown below.



Step 7 - Adding Controller [DemoController]

For adding Controller, just right click on Controller folder and select Add >> New Item.

After selecting New Item, a new dialog of "Add New Item" will pop up. Just choose “MVC Controller Class”  and name the Controller as “DemoController”. Click on Add button to create Controller.



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 for binding Checkbox List

In DemoController, we are using constructor injection for getting a dependency. Also, we are getting List<Category> from the database using EF Core and passing it to View [Index.cshtml] for binding Checkbox List.

Below is the complete code snippet of getting data and sending it to Index View.



Step 9 - Adding View [index.cshtml]

For adding View, just right click on the Views folder, and go to 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 which we have added and then select Add >> New Item. 



In the "Add New Item" dialog, just choose “MVC View Page” for adding View and give name to View. The View name must be the same name as Action method name. So, we are going name it as “Index” [“Index.cshtml”] and click on "Add button" to add the View.



After adding View, we are going to use new Tag helper for a binding Category CheckBox List.

Step 10 - Binding Category Checkboxlist using new Tag helper.



After binding the CheckBox List of Category on the index.cshtml View, now save the application and run it. Go through the URL - http://localhost:####/demo/index.



Now, we have just added the CheckBox List on the index.cshtml View. Let’s add Index Action method to handle post request and read values of Checkbox which are checked and unchecked by users.

Step 11 - Adding Index Action method for handling post request and getting selected values



Step 12 - Saving and running the application

Now, we run application, and access the URL - http://localhost:####/demo/index



Now, let’s check some CheckBoxes and view the output in debug mode.

Debug mode of Index Action Method (POST)


Finally, we have completed creating a simple CheckBoxList in ASP.NET Core MVC with new Tag Helpers. I hope you liked my article. 


Similar Articles