Question

您有一个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类。

非常感谢任何帮助。

Answer 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 validate插件并手动指示如何在自定义标记时突出显示/取消突出显示错误字段。这可以通过简单地覆盖插件的默认值来完成：

<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>

自定义ValidationForMessage帮助程序删除css元素

1 个答案: