Question

我在MVC中创建了一个编辑页面，并决定我不希望ID可以编辑，但我确实希望它看起来像其他的，最好是灰色。

这是我的财产：

<div class="form-group">
    @Html.LabelFor(model => model.EvpId, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">                                
        @Html.DisplayFor(model => model.EvpId, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.EvpId, "", new { @class = "text-danger" })
    </div>
</div>

在做了一些阅读之后，每个人似乎都建议使用@Html.DisplayFor这是有道理的，即使它看起来不像其他。

但是，在为EditorFor交换DisplayFor时，我发现标签不在同一行：

enter image description here

与相应的标签在同一行上的简单方法是什么，我使用标准的开箱即用CSS。

页面上的

查看来源：

<div class="form-group">
    <label class="control-label col-md-2" for="EvpId">Id</label>           
    <div class="col-md-10">                                
        2
        <span class="field-validation-valid text-danger" data-valmsg-for="EvpId" data-valmsg-replace="true"></span>
    </div>
</div>

Answer 1

我遇到了同样的问题。 Jasen的回答并没有帮助，因为span没有将一个元素放到带有标签的同一水平线上，但他后来的注释与bootstrap doc的链接解决了问题，我们应该使用p标签代替span。

所以我的最终解决方案是：

<p class="form-control-static">@Html.DisplayFor(model => model.Contractor.Name) </p>

感谢Jasen！

Answer 2

使用@Html.DisplayFor()时，帮助程序会根据类型选择标记。在这里，它选择输出一个裸字符串，这打破了Bootstrap form-horizontal样式。

<div class="col-md-10">                                
    2 <!-- no surrounding tags for EvpId value -->
    ...
</div>

最简单的方法就是使用普通的html插入自己的标签

<div class="col-md-10">                                
    <span class="form-control-static">@Model.EvpId</span>
    ...
</div>

如果您经常这样做，或者您有更多标记，则可以创建自定义帮助程序扩展。这是一个非常简单的例子：

public static class HtmlHelperExtensions
{
    public static HtmlString IdSpan(this HtmlHelper helper, string id)
    {
        return new HtmlString(String.Format("<span class=\"form-control\">{0}</span>", id));
    }
}

用法：

<div class="col-md-10">                                
    @Html.Idspan(Model.EvpId)
    @Html.ValidationMessageFor(model => model.EvpId, "", new { @class = "text-danger" })
</div>

Answer 3

使用Jasen的答案，我能够通过改变<span>的宽度来实现我想要的效果，但这看起来很混乱：

<span class="form-control" style="width:280px;">@Model.EvpId</span>

我的问题的最终答案是，因为这是我最初想要的：

@Html.EditorFor(model => model.EvpId, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } })

希望这有助于某人。

Answer 4

我没有将其包装在P标记或SPAN中，而是将类直接放入了现有的DIV中，并且也起作用了。

<div class="col-md-10 form-control-static">                                  
    ...
</div>

DisplayFor在LabelFor MVC的不同行上显示

4 个答案: