w3resource

HtmlHelper - CheckBox


In the previous tutorials we learnt about TextArea Html Helper, and TextBox Html helper and how they are used with the razor syntax in the Views of the ASP.NET MVC. In this tutorial, we will explore yet another HtmlHelper function; CheckBox.

Just like other HtmlHelper functions we have discussed, CheckBox also has two extension methods to generate a <input type="checkbox"> element in the razor view: CheckBox() and CheckBoxFor().

We will illustrate the use of the two methods using the Activity Models like will did in the previous tutorials.

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;}
   
}

CheckBox()

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

CheckBox() method Signature

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

Just like other methods in C#, the CheckBox method can also be overloaded. The code snippet below illustrates the use of CheckBox HtmlHelper in Razor.

//Demo: Html.CheckBox() in Razor View
@Html.CheckBox("isChecked", true)

//Html Result:
<input checked="checked" 
        id="isChecked" 
        name="isChecked" 
        type="checkbox" 
        value="true" />

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

CheckBoxFor()

CheckBoxFor helper method is a strongly typed extension method. It generates <input type="checkbox"> element for a 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 assigned property value.

CheckBoxFor() method Signature

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

Just like other methods, the CheckBoxFor method can also be overloaded. The code snippet illustrates the use of CheckBoxFor Html helper.

//Demo: Html.CheckBoxFor() in Razor View
@model ActivityTabs.Models.Activity

@Html.CheckBoxFor(m => m.isChecked)
//Html Result:
<input data-val="true" 
        data-val-required="The isChecked field is required." 
        id="isChecked" 
        name="isChecked" 
        type="checkbox" 
        value="true" />

<input name="isChecked" 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 isChecked property in the above example. So, it generates <input type="checkbox"> element with id & name set to property name - isChecked. The value attribute will be set to the value of isChecked 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.



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