ASP.NET MVC > Models

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

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" })

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>

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

    .multi-line {
        max-width: 80%;

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

 Views: 7904 | Post Order: 43

Write for us