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图标的标题显示“请输入用户名”：

然后如果我们尝试提交缺失值 - 我们会看到

再次将鼠标悬停在红色x上将显示错误消息。

是否有直接的方法来实现这种验证样式，如果是这样，最好的方法是什么......

感谢您提供任何有用的提示，提示和建议：

Answer 1

您应该通过创建自己的HtmlHelper扩展方法来实现这一目标。

E.g。

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 source code，了解如何为它编写一些重载。

HTHS，
查尔斯