Creating Multiple Radio Buttons in ASP.NET MVC with CRUD Operations

ASP.NET MVC having tons of powerful Razor UI components, makes it easy to dynamically load multiple radio buttons information directly from 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 radio buttons 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 radio buttons development workflow logic by loading radio buttons 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 radio buttons 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.

Download Now!

Let's begin now.

1) In the first step, create a new database in SQL Server and name it "db_multi_radiobuttons".

 

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 sport 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 radio buttons for the end-user favorite sport choice selection and "tbl_favourite_sports" table will store end-user favorite selected sports, know that end-user can have single sport selection because such is the nature of the radio button.

 
3) Now, create a new ASP.NET MVC web project and name it "MVCMultiRadioButtons".

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_radiobuttonsEntities" 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 and also add 'SelectedFavSport_Id' property in your view model class 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; }

...

Know that we need this structure to map end-user multiple multiple radio buttons choice selection from the end-user with the pre-built sports list that is loaded from the SQL server database.

 

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 int SelectedFavSport_Id { get; set; }

...

 

The above code is for the making choice selection using radio button. The selection property will be attached to the target UI to access end-user radio button 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 radio buttons as show below in the following lines of code i.e.

...

<div class="form-group">
      @for (int i = 0; i < Model.SportsLst.Count; i++)
      {
           <label>
               <label>@Model.SportsLst[i].Sport_Name</label>
               @Html.RadioButtonFor(m => m.SelectedFavSport_Id, @Model.SportsLst[i].Sport_Id) &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 radio buttons development work flow logic by loading radio buttons data from the SQL server database using with ASP.NET MVC web platform. You will also create the require database structure to contain multiple radio buttons selections. You will also be able to see the final result of the provided solution where end-user can easily perform CRUD operations on radio buttons via user interface.

Video Demo