消息助手的自定义验证删除 css 元素答案

【问题标题】：custom ValidationForMessage helper removing css element消息助手的自定义验证删除 css 元素
【发布时间】：2011-03-23 19:37:45
【问题描述】：

您好，有一个 html 助手，它允许我将不同的样式应用于 ValidationForMessage。

我的问题是如何利用验证事件来更改消息的 css 元素或触发一些 javascript？

我的代码看起来像

 public static MvcHtmlString ValidationStyledMessageFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper,Expression<Func<TModel, TProperty>> ex)
    {
        var result = htmlHelper.ValidationMessageFor(ex);
        var res = string.Format("<span class=\"required-field\"></span> <span class=\"error required hidden\"><p>{0}<a class=\"close\" href=\"javascript:closeError();\"></a></p></span>", result.ToHtmlString());
        return MvcHtmlString.Create(res);
    }

如您所见，我有一个包含隐藏类的跨度。我想要发生的是，每当显示验证消息时，我都会删除隐藏的 css 类。

任何帮助将不胜感激。

【问题讨论】：

标签： asp.net asp.net-mvc-3

【解决方案1】：

您可以按照以下方式进行操作：

public static MvcHtmlString ValidationStyledMessageFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> ex)
{
    var expression = ExpressionHelper.GetExpressionText(ex);
    var modelName = htmlHelper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(expression);
    var modelState = htmlHelper.ViewData.ModelState[modelName];
    var modelErrors = modelState == null ? null : modelState.Errors;
    var modelError = ((modelErrors == null) || (modelErrors.Count == 0)) 
        ? null 
        : modelErrors.FirstOrDefault(m => !String.IsNullOrEmpty(m.ErrorMessage)) ?? modelErrors[0];
    var result = htmlHelper.ValidationMessageFor(ex);

    if (modelError != null)
    {
        // There was an error => remove the hidden class
        return MvcHtmlString.Create(string.Format("<span class=\"required-field\"></span> <span class=\"error required\"><p>{0}<a class=\"close\" href=\"javascript:closeError();\"></a></p></span>", result.ToHtmlString()));
    }
    return MvcHtmlString.Create(string.Format("<span class=\"required-field\"></span> <span class=\"error required hidden\"><p>{0}<a class=\"close\" href=\"javascript:closeError();\"></a></p></span>", result.ToHtmlString()));
}

更新：

如果您启用了客户端验证，您还需要插入 jquery 验证插件，并在自定义标记时手动指示如何突出/取消突出错误字段。这可以通过简单地覆盖插件的默认值来完成：

<script type="text/javascript">
    $.validator.setDefaults({
        unhighlight: function (element, errorClass, validClass) {
            $(element).siblings('span.error').addClass('hidden');
        },
        highlight: function (element, errorClass, validClass) {
            $(element).siblings('span.error').removeClass('hidden');
        }
    });
</script>

【讨论】：

嘿达林，我已经尝试过你的建议并尝试调试以查看发生了什么，但它对我不起作用，我单步执行代码并且 modelState 始终为空，然后导致 modelError 始终为空。 > return MvcHtmlString.Create(string.Format("从未被命中？
@Diver Dan，在我的测试中，我使用了一个视图模型，它的单个属性装饰有 [Required] 属性。然后我把@Html.EditorFor(x => x.MyProperty)和@Html.ValidationStyledMessageFor(x => x.MyProperty)都放了。当表单首次呈现时，span 具有隐藏类，但是当我通过将字段留空将其提交到 POST 操作时，验证错误被添加到模型状态，并且助手进入第二种情况并显示 span。你的测试用例是什么？
是的，我和你一样 >@Html.LabelFor(model => model.UserName) @Html.EditorFor(model => model.UserName) @Html.ValidationStyledMessageFor(model => model .UserName) 对于我的视图，我的模型看起来像 >public class RegisterModel { [Required(ErrorMessage = "User Name is required")] [Display(Name = "User name")] public string UserName { get;放; }
谢谢达林，对不起，我没想到提到客户端验证
@Diver Dan，没问题，只是客户端验证是这里的罪魁祸首，我花了一些时间才意识到这一点:-)