c# - 使用 Font Awesome 图标渲染 ValidationMessageFor

Question

我正在尝试结合使用 Font Awesome 图标和标准 MVC 验证过程来实现表单验证。我已经编写了自定义 ValidationMessageFor 帮助器来实现此目的:

public static MvcHtmlString FontAwesomeValidationMessageFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression)
    {
        var propertyName = ExpressionHelper.GetExpressionText(expression);
        var name = helper.AttributeEncode(helper.ViewData.TemplateInfo.GetFullHtmlFieldName(propertyName));

        var builder = new TagBuilder("span");

        var modelName = ExpressionHelper.GetExpressionText(expression);
        builder.MergeAttribute("data-valmsg-for", modelName);
        builder.MergeAttribute("data-valmsg-replace", bool.TrueString.ToLowerInvariant());

        if (helper.ViewData.ModelState[name] == null ||
            helper.ViewData.ModelState[name].Errors == null ||
            helper.ViewData.ModelState[name].Errors.Count == 0)
        {
            return !helper.ViewContext.UnobtrusiveJavaScriptEnabled
                ? MvcHtmlString.Empty
                : MvcHtmlString.Create(builder.ToString());
        }

        builder.AddCssClass("text-danger");
        builder.InnerHtml = "<i class='fa fa-exclamation'></i>";
        builder.MergeAttribute("title", helper.ViewData.ModelState[name].Errors[0].ErrorMessage);

        return MvcHtmlString.Create(builder.ToString());
    }

这在我的表单中是这样调用的:

@Html.FontAwesomeValidationMessageFor(m => m.Email)

并默认呈现此 HTML:

<span data-valmsg-for="Email" data-valmsg-replace="true"></span>

这似乎工作正常并在我的表单上呈现适当的跨度。但是，一旦我启用客户端验证，我的助手就不再被调用，而是显示标准模型验证消息。如何获得客户端验证以呈现我的帮助程序 HTML？我这样做的方式正确吗？

Answer 1

这在某种程度上可以通过 CSS 来解决。例如，如果你想在你的验证消息前加上一个 fontawesome 图标，你可以包含以下 CSS:

.field-validation-error:before {
    font-family: FontAwesome;
    content: "\f06a\00a0";
}

所有验证消息都包含在具有 field-validation-error 类的 span 标记中。上面的 CSS 将在验证文本前附加一个感叹号图标和空格。