TextArea helper in MVC3 Razor

  • Html.TextArea is the helper which renders a TextArea.
  • Helpers are not controls by itself, they simply generate html markup.

It has following overloads :

Overload 1 :


This overload accepts string name as a parameter. This name is use to set name and id attribute of the control.

Syntax :

<p>
     @Html.TextArea("Textarea")
</p>

UI :



Rendered HTML :

<p>
    <textarea cols="20" id="Textarea" name="Textarea" rows="2"></textarea>
</p>

The name parameter passed becomes the id and name attribute. The cols and rows attributes are set by default.


Overload 2 :




This overload accepts two parameter, name and htmlAttributes object.

Syntax :



<p>
     @Html.TextArea("Textarea", new { rows = "4",cols="30"})
</p>

We have passed rows and cols attribute as htmlAttributes object.

UI :




Rendered HTML :

<p>
    <textarea cols="30" id="Textarea" name="Textarea" rows="4"></textarea>
</p>

The rows and cols attribute are set to value as passed as attribute using htmlAttributes object.


Overload 3 :




This overload accepts two parameter, name and value parameter.


Syntax :



<p>
     @Html.TextArea("TextArea","This is TextArea")
</p>

The second parameter int the above code becomes the text of the TextArea.

UI :



Rendered HTML :

<p>
    <textarea cols="20" id="TextArea" name="TextArea" rows="2">
This is TextArea</textarea>
</p>



Overload 4 :



This overload accepts two parameters. The secondparameter is the IDictionary object of htmlAttributes.

Syntax :


<p>
     @Html.TextArea("TextArea", textarea)
</p>


We are creating a Dictionary object and passing it as parameter in above example. 

UI :




Rendered HTML :

<p>
    <textarea cols="25" id="TextArea" maxlength="10" name="TextArea" rows="3">
</textarea>
</p>

The attributes passed in Dictionary object are set as shown in above code.


Overload 5 :




This overload accepts 3 parameter. The name, value and htmlAttributes object.

Syntax :

<p>
     @Html.TextArea("TextArea", "This is TextArea", new { style = "color:Red;"})
</p>

UI :


Rendered HTML :

<p>
    <textarea cols="20" id="TextArea" name="TextArea" rows="2" style="color:Red;">
This is TextArea</textarea>
</p>

The style attribute color is set which is passed as htmlAttribute object.



Overload 6 :




This overload is similar to previous one, only difference being that this overload accepts IDictionary object of     
htmlAttributes in place of htmlAttributes object.


Syntax :

<p>
     @Html.TextArea("TextArea", "This is TextArea", textarea)
</p>


In this overload we are creating IDictionary object containing attributes to set and passed as parameter.

UI :


Rendered HTML :

<p>
    <textarea cols="25" id="TextArea" name="TextArea" rows="3" style="color:Red">
This is TextArea</textarea>
</p>



Overload 7 :



This overload accepts five parameters including rows and cols attribute as well accompanied by htmlAttributes object. 

Syntax :

<p>
     @Html.TextArea("TextArea", "This is TextArea", 3, 20, new { style = "color :Red;"})
</p>

UI :



Rendered HTML :

<p>
    <textarea cols="25" id="TextArea" name="TextArea" rows="3" style="color:Red">
This is TextArea</textarea>
</p>



Overload 8 :



This overload accepts the same number of parameters as previous one. This overload accepts IDictionary object instead of htmlAttributes object.

Syntax :

<p>
     @Html.TextArea("TextArea", "This is TextArea", 3, 20, textarea)
</p>


UI :


Rendered HTML :

<p>
    <textarea cols="20" id="TextArea" name="TextArea" rows="3" style="color:Red">
This is TextArea</textarea>
</p>

The attributes passed as Dictionary object has been set in above code.


0 comments:

Post a Comment