如何在MVC3中为多行文本框创建多个编辑器模板?

时间:2012-05-22 05:06:49

标签: asp.net-mvc asp.net-mvc-3 asp.net-mvc-2 razor

我的观点中有以下两种类型的多行textareas:

<textarea cols="100" rows="15" class="full-width" id="dialogText" 
          name="Text">@Model.Text</textarea>

<textarea cols="100" rows="10" class="full-width" id="dialogText" 
          name="Text">@Model.Text</textarea> 

我想利用自定义编辑器模板,但能够以不同方式指定属性(例如,上述两者之间的rows不同。)

我可以为同一个字段声明和使用两种不同的模板吗?如果是,那么我应该如何声明模板以及如何指定要使用的不同模板?

另外,我如何声明不同的列和行。我可以使用cols,行,还是应该在CSS中指定高度和宽度,例如width=500px, height=600px400px

2 个答案:

答案 0 :(得分:16)

您可以覆盖default editor template~/Views/Shared/EditorTemplates/MultilineText.cshtml):

@Html.TextArea(
    "", 
    ViewData.TemplateInfo.FormattedModelValue.ToString(),
    ViewData
)

然后假设您已定义了一个视图模型:

public class MyViewModel
{
    [DataType(DataType.MultilineText)]
    public string Text { get; set; }
}

在主视图中你可以这样做:

@model MyViewModel

@Html.EditorFor(x => x.Text, new { cols = "100", rows = "15", id = "dialogText", @class = "full-width" })
@Html.EditorFor(x => x.Text, new { cols = "100", rows = "10", id = "dialogText", @class = "full-width" })

将呈现预期的输出:

<textarea class="full-width" cols="100" id="dialogText" name="Text" rows="15">
    hello world
</textarea>

<textarea class="full-width" cols="100" id="dialogText" name="Text" rows="10">
    hello world
</textarea>

此外,您可以增强编辑器模板,这样您就不需要在每个EditorFor调用中指定@class属性,如下所示:

@{
    var htmlAttributes = ViewData;
    htmlAttributes["class"] = "full-width";

}
@Html.TextArea(
    "", 
    ViewData.TemplateInfo.FormattedModelValue.ToString(),
    htmlAttributes
) 

现在你可以:

@model MyViewModel
@Html.EditorFor(x => x.Text, new { cols = "100", rows = "15", id = "dialogText" })
@Html.EditorFor(x => x.Text, new { cols = "100", rows = "10", id = "dialogText" })

哦,不要忘记,HTML必须是唯一的,所以id = "dialogText"显然应该与第二个textarea不同。

答案 1 :(得分:3)

您可以创建编辑器模板MultiLine1.cshtmlMultiLine2.cshtml,在视图模型中,您可以使用UIHint指定要用于该特定属性的编辑器模板。但是,您只能为一个属性指定一个模板。在相同类型的不同属性上,您可以使用不同的模板。