Html CheckBox helper in MVC3 Razor
- Html.CheckBox is the helper used to render CheckBox in MVC3 Razor.
- Helpers are not controls by itself, they simply generate html markup.
It has following Overloads :
First Overload :
Syntax :
<p>
@Html.CheckBox("CheckBox")
</p>
UI :
Rendered HTML :
<p>
<input id="CheckBox" name="CheckBox" type="checkbox" value="true" />
<input name="CheckBox" type="hidden" value="false" />
</p>
In the above rendered html you can see, a hidden field is generated for the checkbox. This is because, the unchecked checkboxes are not posted . So the hidden field allows the model binding to work while posting form to controller.
Second Overload :
Syntax :
<p>
@Html.CheckBox("CheckBox",true)
</p>
This overload accepts second parameter, which is isChecked. When set to true, it will display the checkbox as checked, else unchecked.
UI :
Rendered HTML :
<p>
<input checked="checked" id="CheckBox" name="CheckBox" type="checkbox" value="true" />
<input name="CheckBox" type="hidden" value="false" />
</p>
The isChecked parameter i.e. second parameter set to true, sets the checked property to checked.
Overload 3 :
This overload accepts two parameter, name and html attributes. We can pass style class or any other attribute to set as this parameter.
Syntax:
<p>
@Html.CheckBox("CheckBox", new { @id = "DemoCheckBox", @class = "checkbox" })
</p>
In above example, we have assigned CSS class to the checkbox and also set id attribute explicitly.
UI :
The CSS class is applied to it. We have change the height and width of the checkbox and also its background color.
Rendered HTML :
<p>
<input class="checkbox" id="DemoCheckBox" name="CheckBox" type="checkbox" value="true" />
<input name="CheckBox" type="hidden" value="false" />
</p>
We can see in the above code, that CSS class is applied and id attribute is also set. So we can use HtmlAttributes to set different attributes using this overload.
Overload 4 :
This overload along with name parameter also expects, dictionary object of attributes to set. Instead of specifying attributes one by one, we can collect it in Dictionary object and pass this object as parameter.
Syntax :
<p>
@Html.CheckBox("CheckBox", dd)
</p>
We have created a Dictionary object. We added two attributes to the dictionary. Finally we pass this object as parameter.
UI :
Rendered HTML :
<p>
<input class="checkbox" hello="checkbox" id="CheckBox" name="CheckBox" type="checkbox" value="true" />
<input name="CheckBox" type="hidden" value="false" />
</p>
As mentioned before, we have passed dictionary object carrying two attributes. Both of those attributes are set as seen in above code. The class and id attribute are set using this overload.
Overload 5 :
This overload accepts three parameters. It accepts name, bool value which indicates whether checkbox is checked or not and htmlAttributes object.
Syntax :
<p>
@Html.CheckBox("CheckBox",true,new {id="CheckBox",@class="checkbox"})
</p>
UI :
We have set bool isChecked value to true and CSS class to checkbox. We can see both the attributes are set.
Rendered HTML :
<p>
<input checked="checked" class="checkbox" id="CheckBox" name="CheckBox" type="checkbox" value="true" />
<input name="CheckBox" type="hidden" value="false" />
</p>
The id attribute is set to checkbox as specified in the syntax and also class attribute is set to checkbox.
Overload 6 :
This overload expects three parameters i.e. name, isChecked and IDictionary object of htmlAttributes.
Syntax :
<p>
@Html.CheckBox("CheckBox",false,dd)
</p>
We set the isChecked attribute to false and passed the IDictionary object of attributes.
UI :
We can see in the above screenshot, CSS class is applied to the checkbox.
Rendered HTML :
<p>
<input class="checkbox" hello="checkbox" id="CheckBox" name="CheckBox" type="checkbox" value="true" />
<input name="CheckBox" type="hidden" value="false" />
</p>
So we have covered all 6 overloads of html.CheckBox.
0 comments:
Post a Comment