因此，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 实现这一目标吗？
您可以创建一个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>
or
<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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
