.Net MVC Html.RadioButton tutorial with examples

ASP.NET MVC provides a range of HTML helper methods that make it easier to generate HTML elements. One such helper method is @Html.RadioButton, which generates a radio button input element. In this blog post, we'll take a closer look at how to use this helper method, covering some common scenarios that you might encounter.

1. Html.RadioButton Bind values from controller to view
2. Html.RadioButton Bind values inside view
3. Html.RadioButton Set Default value checked
4. Html.RadioButton Apply CSS Class
5. Html.RadioButton Add HTML parameters

1. Html.RadioButton Bind values from controller to view

To bind values from the controller to the view, you can pass a list of options to the view and use @Html.RadioButton to generate radio buttons for each option. Here's an example of how to do this:

//Controller Action
public ActionResult Index()
{
    var options = new List<string> { "Option1", "Option2", "Option3" };

    var model = new MyViewModel
    {
        Options = options,
        SelectedOption = "Option1"
    };

    return View(model);
}

//View
@model MyViewModel

@foreach(var option in Model.Options)
{
    @Html.RadioButton("SelectedOption", option, Model.SelectedOption == option) @option
}

In the above code, we're passing a list of options to the view in the Index() action method of the controller. We then generate a radio button for each option using a foreach loop and the @Html.RadioButton helper method. We set the name attribute of each radio button to "SelectedOption", which allows us to group the radio buttons together so that only one can be selected at a time. We also set the value attribute of each radio button to the current option in the loop and use the Model.SelectedOption == option expression to determine whether the current option should be checked by default.

With this code, the view will generate a list of radio buttons with the options passed from the controller. The selected option will be checked by default, as specified in the SelectedOption property of the view model.

2. Html.RadioButton Bind values inside view

If you want to bind values inside the view, you can do so by using a ViewBag or ViewData object. Here's an example of how to do this:

//Controller Action
public ActionResult Index()
{
    ViewBag.SelectedOption = "Option1";
    return View();
}

//View
@Html.RadioButton("SelectedOption", "Option1", ViewBag.SelectedOption == "Option1") Option 1
@Html.RadioButton("SelectedOption", "Option2", ViewBag.SelectedOption == "Option2") Option 2

In the above code, we're using ViewBag to pass the SelectedOption value to the view. We're then using @Html.RadioButton to generate the radio button input elements and binding them to the SelectedOption value. We're also setting the checked attribute based on the value of SelectedOption.

3. Html.RadioButton Set Default value checked

To set a default value as checked, you can pass a boolean value to the @Html.RadioButton helper method. Here's an example of how to do this:

//Controller Action
public ActionResult Index()
{
    var model = new MyViewModel
    {
        SelectedOption = "Option1"
    };

    return View(model);
}

//View
@model MyViewModel

@Html.RadioButton("SelectedOption", "Option1", true) Option 1
@Html.RadioButton("SelectedOption", "Option2", false) Option 2

In the above code, we're using the boolean value true to set the first radio button as checked by default. We're passing this value as the third parameter to the @Html.RadioButton helper method.

4. Html.RadioButton Apply CSS Class

To apply a CSS class to the radio button input element, you can pass a class name as a string to the @Html.RadioButton helper method. Here's an example of how to do this:

//Controller Action
public ActionResult Index()
{
    var model = new MyViewModel
    {
        SelectedOption = "Option1"
    };

    return View(model);
}

//View
@model MyViewModel

@Html.RadioButton("SelectedOption", "Option1", Model.SelectedOption == "Option1, new { @class = "my-class" }) Option 1
@Html.RadioButton("SelectedOption", "Option2", Model.SelectedOption == "Option2", new { @class = "my-class" }) Option 2

In the above code, we're passing a new { @class = "my-class" } object as the fourth parameter to the @Html.RadioButton helper method. This sets the class attribute of the radio button input element to my-class.

5. Html.RadioButton Add HTML parameters

You can also add additional HTML attributes to the radio button input element by passing an anonymous object as the fourth parameter to the @Html.RadioButton helper method. Here's an example of how to do this:

//Controller Action
public ActionResult Index()
{
    var model = new MyViewModel
    {
        SelectedOption = "Option1"
    };

    return View(model);
}

//View
@model MyViewModel

@Html.RadioButton("SelectedOption", "Option1", Model.SelectedOption == "Option1", new { id = "option1", data_attr = "value1" }) Option 1
@Html.RadioButton("SelectedOption", "Option2", Model.SelectedOption == "Option2", new { id = "option2", data_attr = "value2" }) Option 2

In the above code, we're passing an anonymous object with two additional attributes (id and data_attr) as the fourth parameter to the @Html.RadioButton helper method. This sets the id and data_attr attributes of the radio button input element to option1 and value1 for the first radio button, and option2 and value2 for the second radio button, respectively.

Conclusion

In this blog post, we've looked at how to use @Html.RadioButton in ASP.NET MVC to generate radio button input elements. We've covered how to bind values from the controller to the view, how to bind values inside the view, how to set a default value as checked, how to apply a CSS class, and how to add HTML parameters. With this knowledge, you should be able to create radio button input elements in your ASP.NET MVC applications with ease.