Header Ads

Creating Multiple Check Boxes in ASP.NET MVC with CRUD Operations

May 19, 2021 , , ,
ASP.NET MVC at view side is packed with a very powerful server side markup language Razor that easily enables embedding of server-based code into web pages using C# and VB.Net. Razor provides many strong built-in UI components that ease front-end development for ASP.NET MVC website development. Check Box is one of the most important UI component in general especially for websites whose business requirements enforce them to get choice selection from the end-user. Performing CRUD (Create, Read, Update and Delete) operations with standard HTML based check box involve a lot of interaction with JavaScript or JQuery to pass require information onto server-side, thus, making the entire process complicated especially for a large set of selection choices that are being loaded from the database in a form of check box list. Razor on the other has made the entire process entirely simple and can easily submit require check boxes information directly to the server-side using view model class without using a single JavaScript or JQuery code. Razor also eases the CRUD operations process that involves loading of check box list from the database along with editing, adding and deletion of choice selection using single or multiple check boxes by the end-user.

Today, I shall be demonstrating Razor markup based multiple check boxes development workflow logic by loading check box data from the SQL server database using with ASP.NET MVC web platform. I will also show the final result of the provided solution where end-user can easily perform CRUD operations on check boxes via user interface.


Prerequisites:

Following are some prerequisites before you proceed any further in this tutorial:
  1. Knowledge of ASP.NET MVC.
  2. Knowledge of ASP.NET MVC Razor.
  3. Knowledge of HTML.
  4. Knowledge of JavaScript.
  5. Knowledge of Bootstrap.
  6. Knowledge of Jquery.
  7. Knowledge of C# Programming.
The running working solution source code is being developed in Microsoft Visual Studio 2019 Professional and SQL Server 2014 is being used for Database Development. Know that I am also using Asmak9.EssentialToolKit Nuget Package for easing out my development process as this library provides many pre-build commonly utilized development methods, this library is paid and available for 30 days trial only.

Download Now!

Let's begin now.

1) In the first step, create a new database in SQL Server and name it "db_multi_checkboxes".
 
2) In next step, execute the SQL Server database script provided with the solution to create relevant tables and store procedures. There are three tables that the provided database contains i.e. tbl_favourite_sports, tbl_sports and tbl_user_bio. The problem set is simple i.e. register user with his favorite sports choice selection. So, "tbl_user_bio" table will store user details, "tbl_sports" will already contain pre-built list of sports that will be loaded as check boxes for the end-user favorite sports choice selection and "tbl_favourite_sports" table will store end-user favorite selected sports, know that end-user can have multiple sports selections.
 
3) Now, create a new ASP.NET MVC web project and name it "MVCMultiCheckBoxes".

4) In the provided solution "DatabaseEntityModel" is already created using entity framework database first approach in order to access our created database in SQL Server. So, Open "Web.config" file and configure SQL Server database connection string with your SQL_SERVER_NAME, SQL_DATABASE_NAME, SQL_USERNAME and SQL_PASSWORD. You need to update SQL server connection information at following line of code in the "Web.config" file i.e.

  <connectionStrings>
    <add name="db_multi_checkboxesEntities" connectionString="metadata=res://*/Models.DatabaseEntityModel.csdl|res://*/Models.DatabaseEntityModel.ssdl|res://*/Models.DatabaseEntityModel.msl;provider=System.Data.SqlClient;provider connection string=&quot;data source=SQL_SERVER_NAME;initial catalog=SQL_DATABASE_NAME;user id=SQL_USERNAME;password=SQL_PASSWORD;MultipleActiveResultSets=True;App=EntityFramework&quot;" providerName="System.Data.EntityClient" />
  </connectionStrings>

5) I like to keep my code clean, so, create a new "Helper_Code\Objects\SportsObj.cs" class file with properties as shown below i.e.

...

// Gets or sets sport ID property.
public int Sport_Id { get; set; };

// Gets or sets sport name property.
public string Sport_Name { get; set; }

// Gets or sets a value indicating whether favorite sport is selected or not property.
public bool IsFavSportSelected { get; set; }

...

Know that we need this structure to map end-user multiple check boxes choice selection from the end-user with the pre-built sports list that is load from the SQL server database. Razor UI component check box can only map "bool" data type property, so, make sure that the property which will going to be bound with razor UI component check box is of "bool" data type structure as show in the above piece of code.
 
6) Now, create a new "Models\HomeViewModel.cs" file with your require UI binding properties along with check box list property which will be attached to the target UI to access end-user multiple check box choice selection as shown below in the following lines of code i.e.

...

// Gets or sets select sports list property.
public List<SportsObj> SelectSportsLst { get; set; }

...
 
The above code is for the multiple check boxes selection property will be attached to the target UI to access end-user multiple check box choice selection.
 
7) Create a new "Controllers\HomeController.cs" file and add your require server-side UI page actions logic for the CRUD operations.
 
8) Next, create "Views\Home\_CRUDViewPartial.cshtml" partial razor view file and add your require input fields along with the list of check boxes as show below in the following lines of code i.e.

...

<div class="form-group">
   @for (int i = 0; i < Model.SelectSportsLst.Count; i++)
      {
         <label>
            @Html.CheckBoxFor(m => m.SelectSportsLst[i].IsFavSportSelected) &nbsp
            <label>@Model.SelectSportsLst[i].Sport_Name</label> &nbsp;
         </label>

      }
   </div>

...

9) Now, execute the provided solution and perform CRUD operations on the check boxes via website user interface.

First, ASP.NET MVC application web application is loaded i.e.

 
Second, provide user details, make end-user favorite sports selection, and add that information i.e.



Third, Edit existing information i.e.




You can see that the relevant information is also being stored into the SQL server database as well as shown below i.e.



Finally, delete a user along with his/her favorite sports selection choice from your system. As, I have added few entries I will be deleting last entry from the below shown list i.e.


After delete operation i.e.


Conclusion

In this article, you will learn about basic razor markup based multiple check boxes development work flow logic by loading check box data from the SQL server database using with ASP.NET MVC web platform. You will also create the require database structure to contain multiple check boxes selections. You will also be able to see the final result of the provided solution where end-user can easily perform CRUD operations on check boxes via user interface.

Video Demo

Post a Comment

No comments

Subscribe to: Post Comments ( Atom )