How to apply CSS and attributes to HTML Helper in Asp.net MVC3 Razor

Home » CSS » MVC 3 » How to apply CSS and attributes to HTML Helper in Asp.net MVC3 Razor

How to apply CSS and attributes to HTML Helper in Asp.net MVC3 Razor

Posted by 20Fingers2Brains on Tags: CSS , MVC 3

The CSS plays an important part in design.
We often need to define CSS at control level using inline style or using style classes.
In Razor syntax also we can apply style classes and inline style, but in different way.
In this article we will see how to apply CSS and other attribute to HTML helpers.

Example 1:

In this example, we will create a CSS class and apply it to one of the helper.

<style type="text/css">
.helper
{
    font-family:Comic Sans MS;
    color:Orange;
    font-style:italic;
}
</style>

We have defined the style class in the view itself.

@Html.TextBox("Helper","This is MVC4 Razor")

@Html.TextBox("Helper", "This is MVC4 Razor", new { @class = "helper"})

We have rendered two textboxes using the helper. Each helper has an overload which accepts htmlAttributes object as parameter. This parameter is used to set style attributes and other control level attributes. In the above example, we have assign the class attribute for second textbox. In the second textbox, we are passing an anonymously typed object to the htmlAttributes parameter. The helper takes this property name and value and use them to create attributes on the element the helper produces.

UI :

The textboxes are rendered as expeced. The second textbox is rendered with CSS applied.

Rendered HTML :

<input id="Helper" name="Helper" type="text" value="This is MVC4 Razor" />

<input class="helper" id="Helper" name="Helper" type="text" value="This is MVC4 Razor" />

Example 2 : Inline CSS

In this example, instead of passing class we will use inline css to specify properties and thier values.

@Html.TextBox("Helper","This is MVC4 Razor")

@Html.TextBox("Helper", "This is MVC4 Razor", new { style="font-weight:bold;color:Red;"})

We have used style property and defined style attributes with their value for the control in the same manner we use in normal controls.

UI :

Rendered HTML :

<input id="Helper" name="Helper" type="text" value="This is MVC4 Razor" />

<input id="Helper" name="Helper" style="font-weight:bold;color:Red;" type="text" value="This is MVC4 Razor" />

As we have used Style property instead of passing class in previous example, we can see that in above markup that styles are applied as we have passed.

Example 3 :

Along with CSS properties and class we can also set some other properties for controls. We can make textbox disabled, can set maxlength for it. We can also set checkbox's checked attribute.

@Html.TextBox("Helper", "This is MVC4 Razor", new { disabled="disabled"})

@Html.TextBox("Helper", "This is MVC4 Razor", new { maxlength="10"})

@Html.CheckBox("IsMarried",new {@checked = "checked"})

UI :

Rendered HTML :

<input disabled="disabled" id="Helper" name="Helper" type="text" value="This is MVC4 Razor" />

<input id="Helper" maxlength="10" name="Helper" type="text" value="This is MVC4 Razor" />

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

Thus in this article we have seen how to set control level CSS and other attributes.