2

当我曾经使用 MVC 3 时,我将我之前项目的一些部分嵌入到新的 MVC 4 模板中。显然,两个最常用的 CSS 类定义editor-labeleditor-fielddiv 已经从 MVC 4 的 Site.css 中消失了。

问题是我应该在 CSS 文件中定义它们还是使用其他东西还是什么?

4

1 回答 1

2

好吧,您可以采取以下几种选择:

将元素包装在一个类中

将所有输入包装在 a 中div并更改样式以针对它div而不是.editor-labeland .editor-field

所以HTML

<label class="editor-label">blah</label>
<input class="editor-field" />

变成

<div class="editor">
    <label class="editor-label">blah</label>
    <input class="editor-field" />
</div>

还有你的 CSS

.editor-label { /**/ }
.editor-field { /**/ }

变成

.editor label { /**/ }
.editor input,
.editor select { /**/ }

用 JavaScript 重新添加它们

您也许可以使用一些 JavaScript 重新添加类。

jsFiddle 上的演示

var content = document.getElementById('content');
var labels = content.getElementsByTagName('label');

for (var i = 0; i < labels.length; i++) {
    labels[i].classList.add('editor-label');
    var id = labels[i].getAttribute('for');
    var input = document.getElementById(id);
    input.classList.add('editor-field');
}

修改编辑器模板

几个月前,我写了一篇关于如何修改显示和编辑器模板的博客文章,允许HtmlHelper.EditorFor()HtmlHelper.DisplayFor(). 这将允许您将课程放回原来的位置。但是,这种方法可能比您的情况更麻烦。

基本上,您可以将自定义视图放置在Views/Shared/EditorTemplates/根据要覆盖的类型命名的位置,string.cshtml例如string. 一个示例视图string可能是:

字符串.cshtml

@model string

@{
    var id = ViewData.TemplateInfo.GetFullHtmlFieldId(Model);
}

<label class="editor-label" for="@id"></label>
<input type="text" class="editor-field" id="@id" />

传入htmlAttributes

您不能将类传递给 htmlAttributes 参数 on EditorFor(),但可以 forLabelFor()TextBoxFor()等。您可以将 的所有实例更改EditorFor()为它们各自的类型并在调用中提供类。

@Html.LabelFor(e => e.UserName, new { @class="editor-field" })
@Html.TextBoxFor(m => m.UserName, new { @class="editor-field" })

进一步阅读

于 2013-03-23T13:12:06.393 回答