How To Create Radio Button In 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.

<input type="radio" />

Step by Step Contact Form Implementation

ASP.NET

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

Name Textbox
Male RadioButton
Female RadioButton
Phone Number Textbox

Just follow the below images to see how to work around these.

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

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace RadioButtonMvcApp.Models
{
public class ContactModel
{
public string Name { get; set; }
public string Gender { get; set; }
public string PhoneNumber { get; set; }
}
}

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.

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

Add the following lines of code.

<div class = "col-md-10" >
Male
@Html.RadioButtonFor(model => model.Gender,"Male" )
Female
@Html.RadioButtonFor(model => model.Gender,"Female" )
</div>

Code of HomeControllers.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace RadioButtonMvcApp.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult About()
{
ViewBag.Message ="Your application description page." ;
return View();
}
public ActionResult Contact()
{
ViewBag.Message ="Your contact page." ;
return View();
}
public ActionResult ContactForm()
{
ViewBag.Message ="Your contact page." ;
return View();
}
}
}

Code of ContactForm.cshtml

@model RadioButtonMvcApp.Models.ContactModel
@{
ViewBag.Title ="ContactForm" ;
}
<h2>ContactForm</h2>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<divclass = "form-horizontal" >
<h4>ContactModel</h4>
<hr />
@Html.ValidationSummary(true , "" , new { @ class = "text-danger" })
<divclass = "form-group" >
@Html.LabelFor(model => model.Name, htmlAttributes:new { @ class = "control-label col-md-2" })
<divclass = "col-md-10" >
@Html.EditorFor(model => model.Name,new { htmlAttributes = new { @ class = "form-control" } })
@Html.ValidationMessageFor(model => model.Name,"" , new { @ class = "text-danger" })
</div>
</div>
<divclass = "form-group" >
@Html.LabelFor(model => model.Gender, htmlAttributes:new { @ class = "control-label col-md-2" })
<divclass = "col-md-10" >
Male
@Html.RadioButtonFor(model => model.Gender,"Male" )
Female
@Html.RadioButtonFor(model => model.Gender,"Female" )
</div>
</div>
<divclass = "form-group" >
@Html.LabelFor(model => model.PhoneNumber, htmlAttributes:new { @ class = "control-label col-md-2" })
<divclass = "col-md-10" >
@Html.EditorFor(model => model.PhoneNumber,new { htmlAttributes = new { @ class = "form-control" } })
@Html.ValidationMessageFor(model => model.PhoneNumber,"" , new { @ class = "text-danger" })
</div>
</div>
<divclass = "form-group" >
<divclass = "col-md-offset-2 col-md-10" >
<input type="submit" value= "Create" class = "btn btn-default" />
</div>
</div>
</div>
}
<div>
@Html.ActionLink("Back to List" , "Index" )
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval" )
}