Wie man die Formulareingabe-Validierungsklassen von Bootstrap v4 alpha mit ASP.NET Razor-Syntax anwendet?

Question

So hat Bootstrap v4 Alpha Form Validierung Klassen ein wenig geändert. Um nun Validierungsstile auf eine Formulareingabe anzuwenden, wenden Sie die CSS-Klasse auf das übergeordnete Element div.form-group an.

Ich schreibe eine Website mit ASP.NET MVC4 und versuche herauszufinden, wie diese CSS-Klasse auf ein übergeordnetes HTML-Element angewendet werden kann.

Zum Beispiel, hier ist meine aktuelle HTML für ein Formular Eingabeelement ...

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

Wenn meine Ansicht des Modell einen Validierungsfehler für das Password Feld hat, wird es ein entsprechendes Bit von Text das bekommen Eingabefeld. Das ist es, was der ValidationMessageFor Aufruf tut.

Aber, mit Bootstrap v4, muss ich eine has-danger Klasse auf das übergeordnete div.form-group anwenden. Es müßte wie so aussieht ...

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

Aber, ich will nur, dass anwenden, wenn es eine Bestätigungsnachricht für das Passwort-Feld.

Irgendeine Idee, wie man das mit Razor erreicht?

Answer 1

können Sie ein HtmlHelper erstellen, die ModelState und gibt eine Fehlerklasse überprüft:

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); 
    } 
} 

Einfache Nutzung:

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

oder

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