使用内联 css 或 site.css 文件调整编辑器框的大小

Question

我有一个使用 Razor 的 mvc 3 应用程序。网站上有几种表单可以向用户请求信息。问题是其中一些框需要比其他框长..我不知道如何使用 css 更改特定 editorFor 框的宽度.. 下面的框是其中一个框的示例...

        <tr>

    <td>@Html.EditorFor(Function(model) model.School_Title)
        @Html.ValidationMessageFor(Function(model) model.School_Title)</td>
    <td> @Html.EditorFor(Function(model) model.Short_Name)
        @Html.ValidationMessageFor(Function(model) model.Short_Name)</td>

  </tr>

任何帮助将不胜感激...

Answer 1

这已经在 SO 的不同场景中回答了几次。基本上，您不能将 CSS 直接添加到 EditorFor()

我强烈建议使用Editor Templates。这绝对是设置 EditorFor 样式的“正确”方式。

您可以通过两种不同的方式告诉模型属性使用编辑器模板。

第一个（最简单的）是为某种数据类型创建一个编辑器模板 - 例如DateTime。
第二种方法是使用 UIHint 在 DataAnnotations 中以声明方式设置它。

或者，如果您不想为编辑器使用内联 CSS，则需要使用 TextBoxFor()

@Html.TextBoxFor(Function(model) model.School_Title, New With {.class = "CustomCssAttribute" }))

Answer 2

School_Title 是一个文本字段。文本字段的编辑器将生成 HTML 文本输入元素。

可以通过将以下内容添加到您的 site.css 中来设置 HTML 输入样式

input[type="text"]{
   background-color: gray;
   color: white;
}

这将适用于所有使用 site.css 样式表的文本输入。

另一种解决方案是通过 HTML 属性应用 CSS 类。例如：

@Html.TextBoxFor(model => model.School_Title, new { @class: "myStyle" })

在你的 site.css 中你需要添加你的样式：

.myStyle
{
   background-color: gray;
   color: white;
}

您不应该害怕编辑。习惯它们的唯一方法是编写自己的编辑器。编写一个编辑器，创建一个带有一些样式的 div。文本字段的内置编辑器也不例外。它们促进了封装和代码的可重用性。最终，您应该会看到需要为对象图编写编辑器。

例如，我可能有一个包含客户详细信息的视图模型。如果我想创建或更新客户详细信息，我将使用@Html.EditorFor(model => model, "Customer")，或者如果我想显示客户详细信息，我将使用

@Html.DisplayFor(model => model, "Customer")