【问题标题】:Is there a way to automatically display “*” required icon beside the [Required] fields有没有办法在[必填]字段旁边自动显示“*”必填图标
【发布时间】:2014-05-01 22:53:21
【问题描述】:

我已经完成了我的asp.net MVC web应用程序,并且我一直使用数据注释[Required]来提及该字段是必需的。但目前必填字段没有任何指示它们是必需的,除非用户尝试提交表单。那么有没有办法强制我的 Razor 视图在任何定义了 [Required] 的字段旁边显示一个红色的“”?或者我需要手动添加“”图标? 谢谢

【问题讨论】:

  • 你想要输入旁边的星号还是输入的标签?
  • 我更喜欢在标签旁边,我使用 Html.DisplayNameFor() 来显示标签

标签: asp.net-mvc asp.net-mvc-4 razor


【解决方案1】:

在我被 Bootstrap 2 升级到 3 升级后,他们几乎完全改变了表单控件的 HTML,我一直将整个表单组放在编辑器模板中,而不仅仅是字段。这是一个例子:

<div class="form-group">
    @Html.Label("", new { @class = string.Format("control-label col-md-2{0}", ViewData.ModelMetadata.IsRequired ? string.Empty : " optional") })
    <div class="col-md-6">
        @Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue.ToString(), new { type = "email", @class = "form-control" })
        @Html.ValidationMessage("")        
    </div>
</div>

这里对您来说重要的是Html.Label 中的string.Format。如果它是假的,我正在使用ViewData.ModelMetadata.IsRequired 添加一个“可选”类。默认情况下,Bootstrap 将标签设为粗体,因此作为必需的指示符,我将可选字段标签设为正常(非粗体)。但是,添加* 有点困难。你可以使用我在这里做的同样的事情来添加一个额外的跨度标签:

@if (ViewData.ModelMetadata.IsRequired)
{
    <span class="requiredIndicator>*</span>
}
@Html.Label(...)
...

潜在的问题是它实际上不会在您的&lt;label&gt; 标记内部,因此您可能需要做一些额外的样式工作以使其看起来正确,具体取决于您应用的样式标签。

另一种方法是创建您自己的 HtmlHelper 以返回带有所需指示符的标签。下面是一些示例代码:

public static MvcHtmlString RequiredIndicatorLabelFor<TModel, TValue>(
    this HtmlHelper<TModel> html,
    Expression<Func<TModel, TValue>> modelProperty,
    object htmlAttributes)
{
    var metadata = ModelMetadata.FromLambdaExpression(modelProperty, html.ViewData);
    var labelText = metadata.IsRequired ? string.Format("* {0}", metadata.GetDisplayName()) : metadata.GetDisplayName();
    return html.LabelFor(modelProperty, labelText, htmlAttributes);
}

【讨论】:

  • 然后我应该在我的视图中手动添加RequiredIndicatorLabelFor所有必填字段吗?我想要实现的是自动显示“*”,而不是手动修改我的视图..
  • 您只需使用它而不是 LabelFor 即可。如果它是必填字段,它将作为* 的前缀;如果没有,它只会返回一个正常的标签。
  • 感谢您的回复,但我收到一条错误消息“错误 2 方法 'LabelFor' 没有重载需要 3 个参数”
  • 不知道为什么。对此有很多负担:msdn.microsoft.com/en-us/library/hh833693(v=vs.118).aspx。确保在包含这个静态类的 cs 文件中添加一个 using for System.Web.Mvc
  • 是的,我已经在使用 system.Web.mvc 了,,,我想手动添加这些 * 你有什么建议?
【解决方案2】:

您也可以为此编写自定义标签助手

public static MvcHtmlString CustomLabelFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, 
    IDictionary<string, object> htmlAttributes = null )
{
    var metadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
    var propertyName = ExpressionHelper.GetExpressionText(expression);
    var builder = new TagBuilder("label");
    builder.Attributes.Add("for", TagBuilder.CreateSanitizedId(htmlHelper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(propertyName)));
    var labelText = string.Format("{0}{1}", metadata.IsRequired ? "*" : string.Empty,
                                  string.IsNullOrEmpty(metadata.DisplayName)
                                      ? metadata.PropertyName
                                      : metadata.DisplayName);
    builder.SetInnerText(labelText);
    builder.MergeAttributes<string, object>(htmlAttributes, true);
    return new MvcHtmlString(builder.ToString());
}

现在,当在具有Required 属性的属性上使用CustomLabelFor 时,它会在标签文本的前面附加*。

 @Html.CustomLabelFor(m => m.YourRequiredField)

【讨论】:

  • 它部分工作,但我有以下三个问题。我有一个名为“站点名称”的标签,但这将显示为“站点 *名称”,因此 * 将位于两个单词之间在最后。 * 也将是黑色而不是红色。第三个问题是 html.DisplayNameFor 在同一行上显示 html.DisplayFor,而 customLabelFor 将在新行上显示 html.Displayfor。你能就此提出建议吗?
  • 你的意思是你有一个 Display("Site Name") 并且你希望 * 在中间?并且风格不同?
  • 对于不同的样式,您可以使用 TagBuilder 类将 * 星号包裹在 CustomLabelFor 助手的 span 中,并设置不同的样式。
  • 不,我希望 * 位于标签的末尾,但目前它显示在中间
  • hmm 很有趣,从未见过使用此帮助程序,您能否发布带有属性 & 的模型属性定义以及页面上的输出。至于 * 在末尾,您只需将 string.Format 参数切换为 {1}{0} 而不是 {0}{1} 并且 start 将在末尾。
猜你喜欢
  • 1970-01-01
  • 2023-03-22
  • 1970-01-01
  • 1970-01-01
  • 2013-11-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多