How do I specify the columns and rows of a multiline Editor-For in ASP.MVC?
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?
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.
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)
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 { })
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">
in mvc 5
@Html.EditorFor(x => x.Address,
new {htmlAttributes = new {@class = "form-control",
@placeholder = "Complete Address", @cols = 10, @rows = 10 } })
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}})
@Html.TextArea("txtNotes", "", 4, 0, new { @class = "k-textbox", style = "width: 100%; height: 100%;" })
精彩评论