RadioButton In ASP.NET MVC

In this article, you will learn the following - 

  • What is RadioButton?
  • What is HTML Helper?
  • Step by step Contact Form implementation

What is HTML Helper?

In MVC, there is no server-side control. For control creation, there are HTML Helpers which help in creating controls. All HTML Helpers are extension methods which are used in View.

An HTML Helper with Razor starts with @Html.<Control Name>

What is RadioButton?

RadioButton is a kind of toggle control which receives the input from a user in the form of a click. In radio-button, all buttons are connected with the same group name and id. User can select any one button option from the given radiobuttons or list.

In ASP.NET MVC, there are three ways to create a RadioButton

  • RadioButtonFor --      HTML Helper Strong Typed
  • RadioButton --      HTML Helper   
  • HTML RadioButton --      Pure HTML Control

RadioButtonFor

RadioButtonFor is a strongly-typed control which gets attached/bound with the Model. Strongly-typed checks the errors in code at the time of compilation, not at run time.

Syntax

 @Html.RadioButtonFor()

RadioButton

This control is used to create a radiobutton with a specified property. This HTML Helper radio-button is not attached / bound with any Model.

Syntax

@Html.RadioButton()

HTML RadioButton

You can directly use HTML element of a Radio button.

  1. <input type=”radio” />  

Step by Step Contact Form Implementation

ASP.NET

In the above form, you can see there are four objects - 

  1. Name Textbox
  2. Male RadioButton
  3. Female RadioButton
  4. Phone Number Textbox
Just follow the below images to see how to work around these.

ASP.NET

ASP.NET

ASP.NET

ASP.NET

Now, your screen should look like this.

ASP.NET

We have created a project called “RadioButtonMVCApp“. Now, we are going to add “ContactModel”. Right-click on “Models” folder or press "CTRL+SHIFT+A" to add a new Model (Class).

ASP.NET

Give Model a name as “ContactModel”.

ASP.NET

Code for ContactModel.cs

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5.   
  6. namespace RadioButtonMvcApp.Models  
  7. {  
  8.     public class ContactModel  
  9.     {  
  10.         public string Name { get; set; }  
  11.         public string Gender { get; set; }  
  12.         public string PhoneNumber { get; set; }  
  13.     }  
  14. }  

Now, build your project by right-clicking on the project and selecting Build.

ASP.NET

Now, switch to Home Controller, click on Controllers folder, and double-click on HomeController.cs file.

Create an action-method called ContactForm.

ASP.NET

By default, the "Add View" dialog box will appear.

ASP.NET

Fill in the relevant details in the dialog box, as shown below.

ASP.NET

As you click on the Add button, the ContactForm.cshtml file will be created in Views-->Home folder.

Switch to ContactForm.cshtml file and press F5. The output screen is given below.

ASP.NET

But we are looking for the following output.

ASP.NET

Now, let us modify the CSHTML code. Switch to ContactForm.cshtml file make the following changes and press F5.

Remove the following default code for Gender.

  1. <div class="col-md-10">  
  2.    @Html.EditorFor(model => model.Gender, new { htmlAttributes = new { @class = "form-control" } })  
  3.    @Html.ValidationMessageFor(model => model.Gender, ""new { @class = "text-danger" })  
  4.  </div>  

Add the following lines of code.

  1. <div class="col-md-10">  
  2.     Male  
  3.     @Html.RadioButtonFor(model => model.Gender, "Male")  
  4.     Female  
  5.     @Html.RadioButtonFor(model => model.Gender, "Female")  
  6. </div>  

Code of HomeControllers.cs

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6.   
  7.   
  8. namespace RadioButtonMvcApp.Controllers  
  9. {  
  10.     public class HomeController : Controller  
  11.     {  
  12.         public ActionResult Index()  
  13.         {  
  14.             return View();  
  15.         }  
  16.   
  17.         public ActionResult About()  
  18.         {  
  19.             ViewBag.Message = "Your application description page.";  
  20.   
  21.             return View();  
  22.         }  
  23.   
  24.         public ActionResult Contact()  
  25.         {  
  26.             ViewBag.Message = "Your contact page.";  
  27.   
  28.             return View();  
  29.         }  
  30.   
  31.         public ActionResult ContactForm()  
  32.         {  
  33.             ViewBag.Message = "Your contact page.";  
  34.   
  35.             return View();  
  36.         }  
  37.   
  38.     }  
  39. }  

Code of ContactForm.cshtml

  1. @model RadioButtonMvcApp.Models.ContactModel  
  2. @{  
  3.     ViewBag.Title = "ContactForm";  
  4. }  
  5. <h2>ContactForm</h2>  
  6. @using (Html.BeginForm())  
  7. {  
  8.     @Html.AntiForgeryToken()  
  9.   
  10.     <div class="form-horizontal">  
  11.         <h4>ContactModel</h4>  
  12.         <hr />  
  13.         @Html.ValidationSummary(true""new { @class = "text-danger" })  
  14.         <div class="form-group">  
  15.             @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })  
  16.             <div class="col-md-10">  
  17.                 @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })  
  18.                 @Html.ValidationMessageFor(model => model.Name, ""new { @class = "text-danger" })  
  19.             </div>  
  20.         </div>  
  21.   
  22.         <div class="form-group">  
  23.             @Html.LabelFor(model => model.Gender, htmlAttributes: new { @class = "control-label col-md-2" })  
  24.             <div class="col-md-10">  
  25.                 Male  
  26.                 @Html.RadioButtonFor(model => model.Gender, "Male")  
  27.                 Female  
  28.                 @Html.RadioButtonFor(model => model.Gender, "Female")  
  29.             </div>  
  30.         </div>  
  31.   
  32.         <div class="form-group">  
  33.             @Html.LabelFor(model => model.PhoneNumber, htmlAttributes: new { @class = "control-label col-md-2" })  
  34.             <div class="col-md-10">  
  35.                 @Html.EditorFor(model => model.PhoneNumber, new { htmlAttributes = new { @class = "form-control" } })  
  36.                 @Html.ValidationMessageFor(model => model.PhoneNumber, ""new { @class = "text-danger" })  
  37.             </div>  
  38.         </div>  
  39.   
  40.         <div class="form-group">  
  41.             <div class="col-md-offset-2 col-md-10">  
  42.                 <input type="submit" value="Create" class="btn btn-default" />  
  43.             </div>  
  44.         </div>  
  45.     </div>  
  46. }  
  47.   
  48. <div>  
  49.     @Html.ActionLink("Back to List""Index")  
  50. </div>  
  51.   
  52. @section Scripts {  
  53.     @Scripts.Render("~/bundles/jqueryval")  
  54. }  

In the browser, you can see the above code has generated the following HTML.

  1. <div class="col-md-10">  
  2.    Male  
  3.    <input id="Gender" name="Gender" value="Male" type="radio">  
  4.    Female  
  5.    <input id="Gender" name="Gender" value="Female" type="radio">  
  6. </div>  

OUTPUT

ASP.NET

Happy Coding.