asp.net-mvc-3 - Asp.net mvc 3 在验证错误消息附近添加错误图标

Question

我想在每条验证错误消息前添加一个图标。我正在尝试这个：

        public static IHtmlString BogusValidationMessageFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expr)
        {
            ModelMetadata metadata = ModelMetadata.FromLambdaExpression<TModel, TProperty>(expr, htmlHelper.ViewData);
            MvcHtmlString validationError = htmlHelper.ValidationMessageFor<TModel, TProperty>(expr);
            var imgErr = new TagBuilder("img");
            imgErr.Attributes.Add("src", "../../Content/images/error.png");
            return new HtmlString(imgErr.ToString() + validationError.ToString());           
        }

我明白了：

<label for="Email">Email address</label>
<input id="Email" type="text" value="" name="Email" data-val-required="The Email address field is required." data-val="true">
<img src="../../Content/images/error.png">
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="Email"></span

我从一开始就看到了那个错误图标。我怎样才能把那个 img 放在跨度内？如何访问其 InnerHtml 属性？

Answer 1

我认为您可以更轻松地使用 css 将背景图像应用到带有field-validation-error.

.field-validation-error {
    background:url(../../Content/images/error.png) no-repeat left center;
    padding-left:20px; /* or whatever you image size is */
}