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.

<input type=”radio” />

Step by Step Contact Form Implementation

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.

Now, your screen should look like this.

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).

Give Model a name as “ContactModel”.

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.

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

Create an action-method called ContactForm.

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

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

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.

But we are looking for the following output.

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()

    <div class="form-horizontal">
        <h4>ContactModel</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="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>

        <div class="form-group">
            @Html.LabelFor(model => model.Gender, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                Male
                @Html.RadioButtonFor(model => model.Gender, "Male")
                Female
                @Html.RadioButtonFor(model => model.Gender, "Female")
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.PhoneNumber, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="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>

        <div class="form-group">
            <div class="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")
}

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

<div class="col-md-10">
   Male
   <input id="Gender" name="Gender" value="Male" type="radio">
   Female
   <input id="Gender" name="Gender" value="Female" type="radio">
</div>

OUTPUT

Happy Coding.