Сообщения проверки формы в ASP.NET MVC2 - использование изображений вместо текста для сообщений об ошибках

Question

ОК - в настоящее время для проверки своих страниц я использую [Требуется] в моей модели в проекте MVC2 C #.

Например, в моей модели:

[DisplayName("Username")]
[Required(ErrorMessage = "Please enter a Username")]
public string UserName { get; set; }

... и, на мой взгляд, у меня есть

<%=Html.ValidationMessageFor(x => x.UserName, "*")%>

Но тогда это не согласуется с остальной частью стиля и перехватом ошибок остальной части нашего сайта, который был написан на Classic ASP.

Я хочу по возможности воссоздать стили проверки на рисунках ниже.

Таким образом, при загрузке страницы (не при отправке) мы можем увидеть изображение, похожее на это, с alt и заголовком значка M, отображающего «Пожалуйста, введите имя пользователя»:

А потом, если мы попытаемся отправить с пропущенными значениями - мы увидим

Снова наведя курсор на красный крестик, появится сообщение об ошибке.

Существует ли простой способ достижения этого стиля валидации и, если да, то как лучше всего это сделать ...

Спасибо за любые полезные советы, подсказки, предложения:

Answer 1

Этого можно добиться, создав собственный метод расширения HtmlHelper.

Е.Г.

public static string ValidationImage(this HtmlHelper htmlHelper, string modelName)
{
    if (modelName == null)
    {
        throw new ArgumentNullException("modelName");
    }

    if (!htmlHelper.ViewData.ModelState.ContainsKey(modelName))
    {
        return null;
    }

    ModelState modelState = htmlHelper.ViewData.ModelState[modelName];
    ModelErrorCollection modelErrors = (modelState == null) ? null : modelState.Errors;
    ModelError modelError = ((modelErrors == null) || (modelErrors.Count == 0)) ? null : modelErrors[0];

    if (modelError == null)
    {
        return null;
    }

    string messageText = GetUserErrorMessageOrDefault(htmlHelper.ViewContext.HttpContext, modelError, modelState);

    TagBuilder builder = new TagBuilder("img");
    builder.MergeAttribute("src", "urlToYourCrossImage");
    builder.MergeAttribute("class", HtmlHelper.ValidationMessageCssClassName); //Or your own custom class for the img tag here
    builder.MergeAttribute("alt", messageText);
    builder.MergeAttribute("title", messageText);

    return builder.ToString(TagRenderMode.SelfClosing);
}

Посмотрите исходный код ASP.NET MVC ValidationExtensions, чтобы получить некоторые идеи о том, как написать для него некоторые перегрузки.

HTHS,
Charles