1

我正在开发一个带有 razor view 的 asp.net mvc 3，我还使用脚手架模板自动生成关联的操作方法和视图。但是我面临的问题是，在视图中lable，editorfor输入字段将显示在两个单独的行中（每行都在一个单独的行上Div），如下所示：-

<div class="editor-label">
            @Html.LabelFor(model => model.FirstName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.FirstName)
            @Html.ValidationMessageFor(model => model.FirstName)
        </div>

那么有没有办法进行更改以强制标签和输入输入框并排显示，而无需在每个视图中手动修改代码？BR

4

3 回答 3

2

您可以编辑直接输出标记的 t4 模板。脚手架文件可以在您的机器上找到：

C:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\IDE\ItemTemplates\CSharp\Web\MVC 3\CodeTemplates\AddView\CSHTML

您将看到一个 .tt 文件列表，这些文件用于生成自动输出的 html。如果您不喜欢元素布局的默认方式，请更改它们！请记住，更改这些将导致脚手架永久更改。

于 2012-04-24T17:59:27.043 回答
1

不确定这是否是您正在寻找的，但这是我的观点：

    <div class="editor-label">
    @Html.LabelFor(model => model.Title)
    </div>
    <div class="editor-field">
    @Html.EditorFor(model => model.Title)
    @Html.ValidationMessageFor(model => model.Title)
    </div>

    <div class="editor-label">
    @Html.LabelFor(model => model.DateCreated)
    </div>
    <div class="editor-field">
    @Html.EditorFor(model => model.DateCreated)
    @Html.ValidationMessageFor(model => model.DateCreated)
    </div>

我修改了这个 CSS 来添加 float: left; 到每个班级

.display-label, 
.editor-label {
margin: 1em 0 0 0;
float: left;
}

.display-field, 
.editor-field {
margin: 0.5em 0 0 0;
float: left;
}
于 2012-04-24T16:09:01.130 回答
0

在 Visual Studio (so )Site.css创建的默认文件中，在该部分下，您将看到以下内容：\Your Project\Content\Site.css/* forms */

label {
    display: block;
    font-size: 1.2em;
    font-weight: 600;
}

只需更改display: block;为display: inline;，现在您的所有输入字段都将显示在与标签相同的行上。

于 2013-11-06T13:12:11.057 回答