Category Archives: ASP.NET MVC

ASP.NET MVC @Html.EditorFor TextArea

@Html.EditorFor creates single line text box for string data by default. That is good for short fields like user name or article title, but not comfortable for longer multi line content.

For long fields, using of textarea tag is more suitable solution. To inform Razor to use multi line textarea instead of single line text box, add this attribute to your model property:

[DataType(DataType.MultilineText)]
public string LongText { get; set; }

When you use DataType.MultilineText parameter, Razor will render textarea tag instead of single-line text box. That’s good enough in many cases, but sometimes you want more control over width, height and other styles of textarea. You can change text area styles with CSS:

textarea
{
    width: 600px;
    height: 300px;
}

This CSS will adjust all textarea tags to same styles. If you want different styles for text fields, define CSS class in view in EditorFor method like this:

@Html.EditorFor(model => model.LongText, new { htmlAttributes = new { @class = "long-text-editor" } })

Another option is to use @Html.TextAreaFor instead of @Html.EditorFor. Advantage of this method is that you don’t need to change model class. That could be preferred option if you work with automatically generated model, like when Entity Framework database first is used. Code in view could look like this:

@Html.TextAreaFor(model => model.LongText, 10, 80, new { htmlAttributes = new { @class = "form-control" } })

Please notice there are 4 parameters used for TextAreaFor method. Second and third parameters define rows and columns of textarea. Sample above will create text area of 10 rows and 80 columns. So, now you have textarea without need to change model.

Happy coding!