Other Input Helpers

In addition to the input helpers you've look at so far, such as TextBox and DropDownList, the MVC framework contains a number of other helpers to cover the full range of input controls.

Html.Hidden

The Html.Hidden helper renders a hidden input. For example, the following code:

@Html.Hidden("wizardStep", "1")

results in:

<input id="wizardStep" name="wizardStep" type="hidden" value="1" />

The strongly typed version of this helper is Html.HiddenFor. Assuming your model had a WizardStep property, you would use it as follows:

@Html.HiddenFor(m => m.WizardStep)

Html.Password

The Html.Password helper renders a password field. It's much like the TextBox helper, except that it does not retain the posted value, and it uses a password mask. The following code:

@Html.Password("UserPassword")

results in:

<input id="UserPassword" name="UserPassword" type="password" value="" />

The strongly typed syntax for Html.Password, as you'd expect, is Html.PasswordFor. Here's how you'd use it to display the UserPassword property:

@Html.PasswordFor(m => m.UserPassword)

Html.RadioButton

Radio buttons are generally grouped together to provide a range of possible options for a single value. For example, if you want the user to select a color from a specific list of colors, you can use multiple radio buttons to present the choices. To group the radio buttons, you give each button the same name. Only the selected radio button is posted back to the server when the form is submitted.

The Html.RadioButton helper renders a simple radio button:

@Html.RadioButton("color", "red")
@Html.RadioButton("color", "blue", true)
@Html.RadioButton("color", "green")

and results in:

<input id="color" name="color" type="radio" value="red" />
<input checked="checked" id="color" name="color" type="radio" value="blue" /> 
<input id="color" name="color" type="radio" value="green" />

Html.RadioButton has a strongly typed counterpart, Html.RadioButtonFor. Rather than a name and a value, the strongly typed version takes an expression that identifies the object that contains the property to render, followed by a value to submit when the user selects the radio button.

@Html.RadioButtonFor(m => m.GenreId, "1") Rock
        @Html.RadioButtonFor(m => m.GenreId, "2") Jazz
        @Html.RadioButtonFor(m => m.GenreId, "3") Pop

Html.CheckBox

The CheckBox helper is unique because it renders two input elements. Take the following code, for example:

@Html.CheckBox("IsDiscounted")

This code produces the following HTML:

<input id="IsDiscounted" name="IsDiscounted" type="checkbox" value="true" />
<input name="IsDiscounted" type="hidden" value="false" />

You are probably wondering why the helper renders a hidden input in addition to the checkbox input. The helper renders two inputs because the HTML specification indicates that a browser will submit a value for a checkbox only when the checkbox is “on” (selected). In this example, the second input guarantees a value will appear for IsDiscounted even when the user does not check the checkbox input.

Although many of the helpers dedicate themselves to building forms and form inputs, helpers are available that you can use in general rendering scenarios.