带有冒号的后缀标签文本答案

【问题标题】：Postfix label text with colon带有冒号的后缀标签文本
【发布时间】：2012-03-10 18:38:12
【问题描述】：

我使用 ASP.NET MVC 3。对于我的表单，我将标签的文本向右对齐。此外，标签和输入字段之间还有一个冒号。

Firstname: [          ]
     Last: [          ]

我可以在 MVC 3 中使用 CSS 或一些 C# 代码自动插入这个冒号吗？

到目前为止，我想出的最好的办法是使用 [Display(Name="Firstname:")] 属性，但这样做的副作用是在验证消息中也包含这个冒号：

[Required]
[Display(Name = "Firstname:")]
[StringLength(100, ErrorMessage = "The {0} must be at least {2} character long.", MinimumLength = 1)]
public string Firstname { get; set; }

另一种选择是使用 LabelFor() 方法重载，但这迫使我指定标签文本两次（一次在模型中，一次在 cshtml 文件中）：

<div>
    <div class="editor-label">@Html.LabelFor(x => x.Firstname, "Firstname:")</div>
    <div class="editor-field">@Html.TextBoxFor(x => x.Firstname)</div>
</div>

有更好的建议吗？

【问题讨论】：

标签： css asp.net-mvc

【解决方案1】：

通过 CSS，您可以通过 after 伪类添加冒号。你可以找到更多关于这个伪类here的信息。

.editor-label > label:after {
    content: ": "
}

工作示例：http://jsfiddle.net/fJQDZ/

请注意，after 伪类在 IE7 中不可用。

【讨论】：

谢谢，但也可以检查内容长度是否大于零？
单独使用 CSS 是不可能做到的。如果长度大于零，您可以使用 javascript 向元素添加类。然后在这个答案中使用相同的 CSS 定位这些元素；例如.editor-label > .has-content:after { ... }

【解决方案2】：

对于那些想避免使用伪元素的人，另一种方法是保留 [Display(Name = "Firstname")] 并使用 @Html.DisplayNameFor() 辅助函数，后面有一个冒号。

<div><!--                                          **colon below**  ⬇   -->
    <div class="editor-label">@Html.DisplayNameFor(x => x.FirstName):</div>
    <div class="editor-field">@Html.TextBoxFor(x => x.Firstname)</div>
</div>

【讨论】：