如何使用ASP.NET Razor语法应用bootstrap v4 alpha&#39表单输入验证类?

时间:2017-06-05 20:03:41

标签: asp.net-mvc twitter-bootstrap razor

因此,bootstrap v4 alpha稍微更改了表单验证类。现在,要将验证样式应用于表单输入,可以将CSS类应用于父div.form-group

我正在使用ASP.NET MVC4编写一个网站,并试图弄清楚如何将这个CSS类应用于父HTML元素。

例如,这是我当前用于表单输入元素的HTML ...

<div class="form-group">
    @Html.LabelFor(m => m.Password)
    @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
    @Html.ValidationMessageFor(m => m.Password)
</div>

如果我的视图模型的Password字段存在验证错误,则会在输入字段下方获得相应的文本位。这就是ValidationMessageFor调用的内容。

但是,使用bootstrap v4,我需要将has-danger类应用于父div.form-group。它需要看起来像......

<div class="form-group has-danger">
    @Html.LabelFor(m => m.Password)
    @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
    @Html.ValidationMessageFor(m => m.Password)
</div>

但是,如果密码字段有验证消息,我只想申请。

知道如何用Razor实现这个目标吗?

1 个答案:

答案 0 :(得分:4)

您可以创建一个HtmlHelper来检查ModelState并返回错误类:

public static class HtmlHelperExtensions
{
    public static string FieldHasError(this HtmlHelper helper, string propertyName, string errorClass = "has-danger")
    {            
        if (helper.ViewData.ModelState != null && !helper.ViewData.ModelState.IsValidField(propertyName))
        {
            return errorClass;
        }
        return string.Empty;
    }

    public static string FieldHasError<TModel, TEnum>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TEnum>> expression, string errorClass = "has-danger")
    {
        var expressionString = ExpressionHelper.GetExpressionText(expression);
        var modelName = helper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(expressionString);
        return FieldHasError(helper, modelName, errorClass);
    }
}

简单用法:

<div class="form-group @Html.FieldHasError("Password")">
    @Html.LabelFor(m => m.Password)
    @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
    @Html.ValidationMessageFor(m => m.Password)
</div>

<div class="form-group @Html.FieldHasError(m => m.Password)">
    @Html.LabelFor(m => m.Password)
    @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
    @Html.ValidationMessageFor(m => m.Password)
</div>