Question

我有一个如下所示的自定义html Helper类，

public static class LabelWithAstrickHelper
{
    public static MvcHtmlString LabelWithAstrick<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression, object htmlAttributes)
    {
        var metadata = ModelMetadata.FromLambdaExpression(expression, html.ViewData);
        string resolvedLabelText = metadata.DisplayName ?? metadata.PropertyName;
        if (metadata.IsRequired)
        {
            resolvedLabelText += "*";
            // resolvedLabelText += "<span style='color:red;'>*</span>";
        }
        return LabelExtensions.LabelFor<TModel, TValue>(html, expression, resolvedLabelText, htmlAttributes);
    }
}

我在下面的视图中使用了它。

 @Html.LabelWithAstrick(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })

现在这将以黑色显示'astrick'，但我想以红色显示这个'astrick'标志。

请建议如何做到这一点。

Answer 1

由于您希望以不同方式设置标签文本和关联星号的样式，因此您无法使用内置的LabelFor()方法（HtmlHelper方法会对标签文本的值进行编码。

相反，您需要在方法中生成自己的html。

public static MvcHtmlString LabelWithAstrick<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression, object htmlAttributes)
{
    var metadata = ModelMetadata.FromLambdaExpression(expression, html.ViewData);
    var name = ExpressionHelper.GetExpressionText(expression);
    string text = metadata.DisplayName ?? metadata.PropertyName ?? name.Split('.').Last();
    // Build 2 span elements containing text and the styled asterisk
    StringBuilder innerHtml = new StringBuilder();
    TagBuilder span = new TagBuilder("span");
    span.InnerHtml = text;
    innerHtml.Append(span.ToString());
    if (metadata.IsRequired)
    {
        span = new TagBuilder("span");
        span.InnerHtml = "*";
        span.MergeAttribute("style", "color:red;"); // see notes
        innerHtml.Append(span.ToString());
    }
    // Create the label element and add the 2 span elements
    TagBuilder label = new TagBuilder("label");
    label.Attributes.Add("for", TagBuilder.CreateSanitizedId(html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(name)));
    RouteValueDictionary attributes = HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
    label.MergeAttributes(attributes, replaceExisting: true);
    label.InnerHtml = innerHtml.ToString();
    return new MvcHtmlString(label.ToString());
}

请注意，我根据您的代码对星号的内联样式进行了硬编码，但我建议您使用类名而不是使用span.AddCssClass("....");并为该类名创建一个css定义，以便为您提供更大的灵活性

如何在MVC5中更改自定义Html标记中的标记颜色

1 个答案: