如何在ASP.MVC中指定多行Editor-For的列和行?


70

在ASP.MVC 3中,如何指定多行EditorFor(文本区域)的列和行?我正在使用[UIHint("MultilineText")],但找不到有关如何为文本区域添加属性的任何文档。

所需的HTML:

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

我的MVC 3模型的相关部分:

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

我的Razor cshtml的相关部分:

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

我所得到的看法来源:

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

如何设置行和列?

Answers:


141

使用TextAreaFor

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

或使用样式multi-line上课。

您也可以为此编写EditorTemplate


28

在ASP.NET MVC 5中,可以使用该[DataType(DataType.MultilineText)]属性。它将呈现一个TextArea标签。

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

然后在视图中,如果您需要指定行,则可以这样操作:

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

或仅将TextAreaFor与正确的重载一起使用:

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

很高兴知道他们进行了更改。:-)
Dan Sorensen 2014年


感谢您购买各种解决方案。他们为我工作。
Thomas.Benz


5

一种选择似乎是使用CSS设置文本区域样式

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

请参阅SO上的此项

Amurra接受的答案似乎暗示在使用EditorFor时会自动添加此类,但您必须对此进行验证。

编辑:确认,可以。因此,是的,如果您想使用EditorFor,则使用此CSS样式即可找到所需的内容。

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

感谢您回答原始海报的问题。当使用使用EditorFor(例如Telerik ASP.NET MVC)创建输入字段的框架时,TextAreaFor不能选择替换。谢谢你
Suncat2000

0

在MVC 5中

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

0

.net VB中-您可以使用剃刀文件中的以下内容实现对列和行的控制:

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

0

@ Html.TextArea(“ txtNotes”,“”,4,0,新建{@class =“ k-textbox”,style =“宽度:100%;高度:100%;”})

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.