MVC Topics
  1. Home
  2. ASP.NET MVC
  3. CheckBox

ASP.NET MVC Tutorials

Create CheckBox using HtmlHelper:

Learn how to generate checkbox control using HtmlHelper in razor view in this section.

HtmlHelper class includes two extension methods to generate a <input type="checkbox"> element in razor view: CheckBox() and CheckBoxFor().

We will use following Student model with CheckBox() and CheckBoxFor() method.

Example: Student Model 

public class Student
{
    public int StudentId { get; set; }
    [Display(Name="Name")]
    public string StudentName { get; set; }
    public int Age { get; set; }
    public bool isNewlyEnrolled { get; set; }
    public string Password { get; set; }
}

CheckBox():

The Html.CheckBox() is a loosely typed method which generates a <input type="checkbox" > with the specified name, isChecked boolean and html attributes.

CheckBox() method Signature:

MvcHtmlString CheckBox(string name, bool isChecked, object htmlAttributes)

Please visit MSDN to know all the overloads of CheckBox() method.

Example: Html.CheckBox() in Razor View

@Html.CheckBox("isNewlyEnrolled", true)
Html Result:

<input checked="checked" 
    id="isNewlyEnrolled" 
    name="isNewlyEnrolled" 
    type="checkbox" 
    value="true" />

In the above example, first parameter is "isNewlyEnrolled" property of Student model class which will be set as a name & id of textbox. The second parameter is a boolean value, which checks or unchecks the checkbox.

CheckBoxFor:

CheckBoxFor helper method is a strongly typed extension method. It generates <input type="checkbox"> element for the model property specified using a lambda expression. CheckBoxFor method binds a specified model object property to checkbox element. So it automatically checked or unchecked a checkbox based on the property value.

CheckBoxFor() method Signature:

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

Visit MSDN to know all the overloads of CheckBoxFor() method.

Example: Html.CheckBoxFor() in Razor View

@model Student

@Html.CheckBoxFor(m => m.isNewlyEnrolled)
Html Result:

<input data-val="true" 
    data-val-required="The isNewlyEnrolled field is required." 
    id="isNewlyEnrolled" 
    name="isNewlyEnrolled" 
    type="checkbox" 
    value="true" />

<input name="isNewlyEnrolled" type="hidden" value="false" />

In the above example, the first parameter in CheckBoxFor() method is a lambda expression that specifies the model property to be bound with the checkbox element. We have specified isNewlyEnrolled property in the above example. So, it generates <input type="checkbox"> element with id & name set to property name - isNewlyEnrolled. The value attribute will be set to the value of a isNewlyEnrolled boolean property.

In the above Html result, notice that it has generated additional hidden field with the same name and value=false. This is because when you submit a form with a checkbox, the value is only posted if the checkbox is checked. So, if you leave the checkbox unchecked then nothing will be sent to the server when in many situations you would want false to be sent instead. As the hidden input has the same name as the checkbox, then if the checkbox is unchecked you'll still get a 'false' sent to the server.

;