如何使用ASP.NET Razor语法应用bootstrap v4 alpha的表单输入验证类? [英] How to apply bootstrap v4 alpha's form input validation classes with ASP.NET Razor syntax?

问题描述

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

So, bootstrap v4 alpha has changed form validation classes a bit. Now, to apply validation styles to a form input, you apply the CSS class to the parent div.form-group.

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

I'm writing a website using ASP.NET MVC4, and am trying to figure out how to apply this CSS class to a parent HTML element.

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

For example, here's my current HTML for a form input element ...

<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调用所做的.

If my view's model has a validation error for the Password field, it'll get a corresponding bit of text below the input field. That's what that ValidationMessageFor call does.

但是，对于引导程序v4，我需要将has-danger类应用于父级div.form-group.它需要看起来像这样...

But, with bootstrap v4, I need to apply a has-danger class to the parent div.form-group. It'd need to look like so ...

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

但是，如果密码字段中存在验证消息，我只想应用.

But, I only want to apply that if there is a validation message for the password field.

有什么想法要用Razor实现吗?

Any idea how to achieve this with Razor?

推荐答案

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

You can create an HtmlHelper that checks ModelState and returns an error class:

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>

这篇关于如何使用ASP.NET Razor语法应用bootstrap v4 alpha的表单输入验证类?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！