---

Search posts under ASP.NET MVC:

---

TextArea with Html.EditorFor in ASP.NET MVC

How to bring TextArea with Html.EditorFor in ASP.NET MVC view?

To bring TextArea with @Html.EditorFor in ASP.NET MVC View, we can specify DataTaype attribute to that particular property of the model.

Model code

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

View Code

<div class="form-group">
            @Html.LabelFor(model => model.DemoSource, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
 @Html.EditorFor(model => model.DemoSource, new { htmlAttributes = new { @class = "form-control", rows = "20" } })
                @Html.ValidationMessageFor(model => model.DemoSource, "", new { @class = "text-danger" })
            </div>
        </div>

The output of Html.EditorFor for DemoSource property would be following

Output source

<div class="form-group">
            <label class="control-label col-md-2" for="DemoSource">DemoSource</label>
            <div class="col-md-10">
                <textarea class="form-control text-box multi-line" id="DemoSource" name="DemoSource" rows="20"></textarea>
                <span class="field-validation-valid text-danger" data-valmsg-for="DemoSource" data-valmsg-replace="true"></span>
            </div>
        </div>

If we want the width of TextArea much wider, then we can specify following .css class.

<style>
    .multi-line {
        max-width: 80%;
    }
</style>

Notice that "multi-line" class is added into TextArea element by asp.net mvc when it renders on the screen, so instructed the browser to increase the width element having class attribute as "multi-line" to 80%.