w3resource

HtmlHelper - RadioButton


In the previous tutorials, we have learnt about a couple of HTML helper classes. In this tutorial, we will explore yet another Html Helper that will generate a radio button form element using the razor syntax.

To generate an <input type="radio">, HtmlHelper class has two extension methods:

  • RadioButton()
  • RadioButtonFor()

The choice of which of the methods to use is based on the need and situation on grounds.

Here we will use the following Activity model below to illustrate the use of with the RadioButton() and RadioButtonFor() methods.

//Demo: Activity Model
public class Activity
{
    public int Id {get; set;}
    public string Activityname {get; set;}
    public string Status {get; set;}
    public string Description {get; set;}
    public bool isChecked {get; set;}
   
}

RadioButton()

The Html.RadioButton() method creates a radio button element with a specified name, an isChecked boolean and html attributes.

RadioButton() method Signature

MvcHtmlString RadioButton(string name, object value, bool isChecked, object htmlAttributes)

Like every other methods and Html Helper methods, RadioButton() can also be function overloaded.

//Demo: Html.RadioButton() in Razor View
Male:   @Html.RadioButton("Level","Level One")  
Female: @Html.RadioButton("Level","Level Two") 
 
//Html Result:
Level One: <input checked="checked" 
        id="Level" 
        name="Level" 
        type="radio" 
        value="Level One" />

Level Two: <input id="Level" 
        name="Level" 
        type="radio" 
        value="Level Two" />

In the above code snippet, we have created two radio buttons for the "Level" property. The second parameter is a value which will be sent to the server, if the given radio button is checked.

If the "Level One" radio button is selected, then the string value "Level One" will be assigned as the value of the radio input element and submitted to the server.

RadioButtonFor

RadioButtonFor helper method is a strongly typed extension method. It generates <input type="radio"> element for the property specified using a lambda expression.

RadioButtonFor method binds a specified model object property to RadioButton control, hence it automatically checked or uncheckes a RadioButton based on the property value.

RadioButtonFor() method Signature

MvcHtmlString RadioButtonFor(<Expression<Func<TModel,TValue>> expression, object value, object htmlAttributes)

Just like every other method, this method can be function overloaded. The code snippet below illustrates the use of this method in a razor view.

//Demo: Html.RadioButtonFor() in Razor View
@model AvtivitTab.Models.Activity

@Html.RadioButtonFor(a => a.Level,"Level One")
@Html.RadioButtonFor(a => a.Level,"Level Two")
//Html Result:
<input checked="checked" 
        id="Level" 
        name="Level" 
        type="radio" 
        value="Level One" />

<input id="Level" 
        name="Level" 
        type="radio" 
        value="Level Two" />

In the above code snippet, the first parameter in the RadioButtonFor() method is a lambda expression that specifies the model property to be bound with the RadioButton element.

We created two radio buttons for the Level property in the above example. So, it generates two <input type="RadioButton"> element with id and name set to property name - Level. The second parameter is a value property, which will be sent to the server when form will be submitted.



Inviting useful, relevant, well-written and unique guest posts