自定义 Html.ValidationMessageFor 在客户端不起作用

Question

我正在开发 mvc3 应用程序，我创建了一个自定义验证消息来验证一个简单的字段。这个自定义的validationMessage只显示一个带有标题和消息的div，而不是默认的span，我有这个：

@Html.ValidationMessageCustomFor(model => model.FirstName)

这是我的自定义验证的代码：

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

    if (helper.ViewData.ModelState[name] == null ||
        helper.ViewData.ModelState[name].Errors == null ||
        helper.ViewData.ModelState[name].Errors.Count == 0)
    {
        return MvcHtmlString.Empty;
    }

    StringBuilder htmlValidation = new StringBuilder();

    htmlValidation.AppendLine("<div>");
    htmlValidation.AppendLine("<table>");
    htmlValidation.AppendLine("<tr>");
    htmlValidation.AppendLine("<td><img src='/Content/Imgages/Error.jpg'></td>");
    htmlValidation.AppendLine("</tr>");
    htmlValidation.AppendLine("<tr>");
    htmlValidation.AppendFormat("<td>{0}</td>", name);
    htmlValidation.AppendLine("</tr>");
    htmlValidation.AppendLine("<tr>");
    htmlValidation.AppendFormat("<td>{0}</td>", helper.ViewData.ModelState[name].Errors[0].ErrorMessage);
    htmlValidation.AppendLine("</tr>");
    htmlValidation.AppendLine("</table>");
    htmlValidation.AppendLine("</div>");

    return MvcHtmlString.Create(htmlValidation.ToString());

}

当我使用服务器端验证时这工作正常，但当我激活客户端验证时它不起作用。

默认的 Html.ValidationMessageFor 是的适用于客户端验证，但我的自定义 Html.ValidationMessageCustomFor 不起作用。

你能帮帮我吗？有什么想法吗？

---

我修改了我的自定义助手，我为跨度添加了“data-valmsg-for”属性，它是代码：

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

        if (helper.ViewData.ModelState[name] == null ||
            helper.ViewData.ModelState[name].Errors == null ||
            helper.ViewData.ModelState[name].Errors.Count == 0)
        {
            return MvcHtmlString.Empty;
        }

        TagBuilder tag = new TagBuilder("span");
        tag.Attributes.Add("class", "field-validation-error");
        tag.Attributes.Add("data-valmsg-for", name);
        tag.Attributes.Add("data-valmsg-replace", "true");

        var text = tag.ToString(TagRenderMode.StartTag);
        text += "<b>My custom html</b>";
        text += tag.ToString(TagRenderMode.EndTag);


        return MvcHtmlString.Create(text);

    }

但它没有出现，看起来我应该从客户端做一些事情，但我不知道是什么？请问有什么想法吗？

Answer 1

ASP.NET MVC3 验证同时使用服务器端和客户端方法。

当您编写服务器端代码以将验证消息添加到呈现的页面时（如在您的帮助方法中），代码仅在请求实际发送到服务器时调用，而客户端验证在启用时, 防止请求被发送回服务器。

MVC3 客户端验证的默认实现使用一种称为 Unobtrusive JavaScript 验证的技术，通过向页面添加一些 data- 属性，然后在 JavaScript 中查找和操作标记的元素。

要了解 Unobtrusive JavaScript 验证，请尝试搜索它，那里有大量资源。例如：

http://www.codeproject.com/KB/aspnet/CustomClientSideValidatio.aspx

在您的情况下，当您想要指定显示验证消息的位置时，您应该使用 data-valmsg-for 属性标记 HTML 元素。例如：

<SPAN data-valmsg-for="id_of_the_input_to_validate"></span>

验证 JavaScript 将查找上述属性并用验证消息填充SPAN，以防输入无效。同样，这发生在表单回发之前，因此永远不会调用显示验证消息的服务器端代码，因为验证会阻止表单提交。

这是 MVC3 中包含的实际验证消息帮助器的代码 sn-p：

TagBuilder builder = new TagBuilder("span"); 
...
if (htmlHelper.ViewContext.UnobtrusiveJavaScriptEnabled) {
    builder.MergeAttribute("data-valmsg-for", modelName); 
    builder.MergeAttribute("data-valmsg-replace", replaceValidationMessageContents.ToString().ToLowerInvariant());
} 

---

编辑：回复您编辑的问题：

第一次呈现页面时，您的第一个if 是true（没有要呈现的验证错误消息），因此您返回一个空字符串。您的页面中不会包含任何 data- 属性。

您应该始终呈现<span data-valmsg-for="..."></span>，即使您没有任何错误消息，以便 JavaScript 库知道将错误放在哪里，以防客户端发生错误。