如何使用Razor和@Html.BeginForm()对@Html.BeginForm()进行样式设计

Question

我已经做了大量的搜索网络寻找答案，似乎无法突破。我正在尝试为表单底部的消息框文本区域设置最大高度。我正在使用VB.Net，MVC和Razor来尝试实现这一点。如果我在C#，我会知道如何写出来，但我想我还没有足够的理解来翻译成VB。我工作的公司使用VB，但没有人使用MVC，所以我自己在这里。

“守则”：

@Using (Html.BeginForm())
                @Html.AntiForgeryToken()

            @<div class="form-horizontal">
                <h4>Notification</h4>
                <hr />
                @Html.ValidationSummary(True, "", New With {.class = "text-danger"})

                @*<div class="form-group">
                    @Html.LabelFor(Function(model) model.DateStart, htmlAttributes:=New With {.class = "control-label col-md-2"})
                    <div class="col-md-10">
                        @Html.EditorFor(Function(model) model.DateStart, New With {.htmlAttributes = New With {.class = "form-control"}})
                        @Html.ValidationMessageFor(Function(model) model.DateStart, "", New With {.class = "text-danger"})
                    </div>
                </div>*@

                <div class="form-group">
                    @Html.LabelFor(Function(model) model.DateEnd, htmlAttributes:=New With {.class = "control-label col-md-2"})
                    <div class="col-md-10">
                        @Html.EditorFor(Function(model) model.DateEnd, New With {.htmlAttributes = New With {.class = "form-control"}})
                        @Html.ValidationMessageFor(Function(model) model.DateEnd, "", New With {.class = "text-danger"})
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(Function(model) model.Title, htmlAttributes:=New With {.class = "control-label col-md-2"})
                    <div class="col-md-10">
                        @Html.EditorFor(Function(model) model.Title, New With {.htmlAttributes = New With {.Class = "form-control datepicker"}})
                        @Html.ValidationMessageFor(Function(model) model.Title, "", New With {.class = "text-danger"})
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(Function(model) model.Message, htmlAttributes:=New With {.class = "control-label col-md-2"})
                    <div class="col-md-10">
                        @Html.EditorFor(Function(model) model.Message, New With {.htmlAttributes = New With {.class = "form-control"}})
                        @Html.ValidationMessageFor(Function(model) model.Message, "", New With {.class = "text-danger"})
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <input type="submit" value="Create" class="btn btn-default" />
                    </div>
                </div>
            </div>
        End Using

在添加类和样式时

<div class="form-group">
                        @Html.LabelFor(Function(model) model.Message, htmlAttributes:=New With {.class = "control-label col-md-2"})
                        <div class="col-md-10">
                            @Html.EditorFor(Function(model) model.Message, New With {.htmlAttributes = New With {.class = "form-control newClass"}})
                            @Html.ValidationMessageFor(Function(model) model.Message, "", New With {.class = "text-danger"})
                        </div>
                    </div>

CSS

.newClass {
    min-height: 250px;
}

Answer 1

您可以创建一个新的CSS类，并将其用于文本区域。

 @Html.EditorFor(Function(model) model.Message, 
             New With {.htmlAttributes = New With {.class = "form-control myFixedWidth"}})

和CSS

.myFixedWidth
{
  height: 250px;
  //Customize the way you want
}

如果属性名上有@Html.EditorFor文本装饰，则DataType.MultilineText将呈现文本区域。

Public Class RegisterEventVM

    <DataType(DataType.MultilineText)> _
    Public Property Name() As String
        Get
            Return m_Name
        End Get
        Set
            m_Name = Value
        End Set
    End Property
    Private m_Name As String

End Class

如果不想用此属性装饰视图模型属性，则可以使用Html.TextAreaFor助手方法来呈现文本区域。