Radio Button in ASP.Net MVC 4

Radio Button in ASP.Net MVC 4

In this blog, I am going to tell you how to use the radio button in asp.net mvc 4.

Step 1

Create an empty asp.net mvc 4 web application with razor engine and add a controller named “HomeController” and write the below code in it:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using RadioButtonMvcApp.Models;

namespace RadioButtonMvcApp.Controllers

{

    public class HomeController : Controller

    {

        public ActionResult Index()

        {

            return View();

        }

        [HttpPost]

        public ActionResult Index(FormCollection form)

        {

            ViewBag.Message = "Your favorite game : " + form["Game"].ToString();

            return View("Message");

        }

        [HttpPost]

        public ActionResult Message(Game obj)

        {

            ViewBag.Message = "Your favorite game : " + obj.FavoriteGame;

            return View("Message");

        }

    }

}

Step 2

Now add a model class named ”Game.cs” to the project and write the below code in it:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace RadioButtonMvcApp.Models

{

    public class Game

    {

        public string FavoriteGame { get; set; }

    }

}

Step 3

Now add a view named “Index” to the project and write the below code in it:

@model RadioButtonMvcApp.Models.Game

@{

    ViewBag.Title = "Index";

}

<h2>Index</h2>

<div>

    <h2>Without Model Binding</h2>

    <div>

        Favorite Game:

    </div>

    <div>

        @using (Html.BeginForm("Index","Home", FormMethod.Post))

        {

            @Html.RadioButton("Game","Cricket") @Html.Label("Cricket") <br />

            @Html.RadioButton("Game", "Football",true) @Html.Label("Football") <br />

            @Html.RadioButton("Game", "Hockey")  @Html.Label("Hockey") <br />

            @Html.RadioButton("Game","Basketball")  @Html.Label("Basketball") <br />

           

            <br />

            <input type="submit" value="Submit"/>

        }

        <br />

        <br />

    </div>

     <h2>With Model Binding</h2>

    <div>

        Favorite Game:

    </div>

    <div>

        @using (Html.BeginForm("Message","Home", FormMethod.Post))

        {

            @Html.RadioButtonFor(m=>m.FavoriteGame,"Cricket") @Html.Label("Cricket") <br />

            @Html.RadioButtonFor(m=>m.FavoriteGame,"Football") @Html.Label("Football") <br />

            @Html.RadioButtonFor(m=>m.FavoriteGame,"Hockey")  @Html.Label("Hockey") <br />

            @Html.RadioButtonFor(m=>m.FavoriteGame,"Basketball")  @Html.Label("Basketball") <br />

           

            <br />

            <input type="submit" value="Submit"/>

        }

    </div>

</div>

This view has two forms first form has not used the model binding and will pass the radio button value to the controller using the FormCollection Class.

And the second form uses the model binding and will pass the radio button value using the model class.

Step 4

Now add another view named “Message” to the project like this:

@{

    ViewBag.Title = "Message";

}

<h2>Message</h2>

<div>

    @ViewBag.Message

</div>

Output

Now run the application:

Select any radio button in the form 1 and click on submit

Select any radio button in the form 2 and click on submit

Thank you for reading this article, please put your valuable comment or any suggestion/question in the comment box.