How do I specify the columns and rows of a multiline Editor-For in ASP.MVC?

Question

In ASP.MVC 3, how do I specify the columns and rows for a multiline EditorFor (textarea)? I am using [UIHint("MultilineText")], but can't find any documentation on how to add attributes for the text area.

Desired HTML:

 <textarea cols="40" rows="10"></textarea>

Relevant Part of my MVC 3 Model:

[UIHint("MultilineText")]
public string Description { get; set; }

Relevant Part of my Razor cshtml:

<div class="editor-field">
    @Html.EditorFor(model => model.Description)
</div>

What I'm getting in View Source:

 <div class="editor-field">
     <textarea class="text-box multi-line" id="Description" name="Description"></textarea>
 </div>

How do I set rows and columns?

score 148 · Accepted Answer · answered Jun 02 '11 at 17:32

148

Use TextAreaFor

@Html.TextAreaFor(model => model.Description, new { @class = "whatever-class", @cols = 80, @rows = 10 })

or use style for multi-line class.

You could also write EditorTemplate for this.

answered Jun 02 '11 at 17:32

amit_g

30,880
8
61
118

For anyone reading this: the `@` at `@cols` and `@rows` are unnecessary. I.e. `cols` and `rows` are sufficient. – Uwe Keim Jul 18 '21 at 12:52

score 30 · Answer 2 · edited Oct 16 '15 at 00:16

30

In ASP.NET MVC 5 you could use the [DataType(DataType.MultilineText)] attribute. It will render a TextArea tag.

public class MyModel
{
    [DataType(DataType.MultilineText)]
    public string MyField { get; set; }
}

Then in the view if you need to specify the rows you can do it like this:

@Html.EditorFor(model => model.MyField, new { htmlAttributes = new { rows = 10 } })

Or just use the TextAreaFor with the right overload:

@Html.TextAreaFor(model => model.MyField, 10, 20, null)

edited Oct 16 '15 at 00:16

Brian Rogers

125,747
31
299
300

answered Oct 02 '14 at 15:08

Juan Carlos Puerto

2,632
1
26
22

Nice to know they made that change. :-) – Dan Sorensen Oct 02 '14 at 20:22
Been around since MVC 3 apparently: http://stackoverflow.com/questions/4927003/asp-net-mvc3-textarea-with-html-editorfor – Patrick McDonald Oct 14 '15 at 09:11
Thanks for ypur various solutions. They work for me. – Thomas.Benz Jun 20 '17 at 20:39

score 9 · Answer 3 · answered Oct 22 '15 at 07:37

9

This one can also be used with less effort I believe (but I am in MVC 5)

@Html.Description(model => model.Story, 20, 50, new { })

answered Oct 22 '15 at 07:37

Mohammed Dawood Ansari

875
11
24

score 5 · Answer 4 · edited May 23 '17 at 12:34

5

One option seems to be using CSS to style the textarea

.multi-line { height:5em; width:5em; }

See this entry on SO or this one.

Amurra's accepted answer seems to imply this class is added automatically when using EditorFor but you'd have to verify this.

EDIT: Confirmed, it does. So yes, if you want to use EditorFor, using this CSS style does what you're looking for.

<textarea class="text-box multi-line" id="StoreSearchCriteria_Location" name="StoreSearchCriteria.Location">

edited May 23 '17 at 12:34

Community

1
1

answered Jun 02 '11 at 17:30

Khepri

9,547
5
45
61

Thank you for answering the original poster's question. When using a framework that creates input fields using `EditorFor`, e.g _Telerik ASP.NET MVC_, substituting `TextAreaFor` is not an option. Thanks for this. – Suncat2000 Jul 15 '15 at 13:18

score 1 · Answer 5 · answered Sep 22 '16 at 13:16

1

in mvc 5

              @Html.EditorFor(x => x.Address, 
              new {htmlAttributes = new {@class = "form-control", 
                   @placeholder = "Complete Address", @cols = 10, @rows = 10 } })

answered Sep 22 '16 at 13:16

CyberNinja

872
9
25

score 0 · Answer 6 · edited May 09 '18 at 18:48

0

In .net VB - you could achieve control over columns and rows with the following in your razor file:

@Html.EditorFor(Function(model) model.generalNotes, New With {.htmlAttributes = New With {.class = "someClassIfYouWant", .rows = 5,.cols=6}})

edited May 09 '18 at 18:48

Jason Roman

8,146
10
35
40

answered May 09 '18 at 18:26

Cobblestone1

1

score 0 · Answer 7 · answered Dec 21 '19 at 20:05

0

@Html.TextArea("txtNotes", "", 4, 0, new { @class = "k-textbox", style = "width: 100%; height: 100%;" })

answered Dec 21 '19 at 20:05

Burhan Kaya

139
2
3

How do I specify the columns and rows of a multiline Editor-For in ASP.MVC?

7 Answers7

Linked

Related