Auf dem Weg zum Lazy Web Developer habe ich dieses mal den Dataannotations auf den Zahn gefühlt. In Silverlight war das richtig geiler Scheiss.
Man kann einer Klasse per Property Attributen Regeln mitgeben. Diese werden Data Annotations genannt. Die Regeln können sich auf Darstellung, Reihenfolge oder Gültigkeit eines Propertys beziehen.
1: PublicClass daten1
2: <Key()>3: Property id AsInteger
4: <Required(ErrorMessage:="brauche Daten")>
5: <EmailAddress(ErrorMessage:="brauche email")>
6: Property email AsString
7: <Required(ErrorMessage:="musse haben")>
8: Property name AsString
9: End Class
In der richtigen Umgebung werden diese Klassenattribute ausgewertet.
ASP.NET kann dies über Dynamic Data. Eingebettet in ein Datensteuerelement, wertet das DynamicEntity Steuerelement das gebundene Objekt (Itemtype) aus.
1: <link href="../Content/bootstrap.css" rel="stylesheet" />
2: <script src="../Scripts/jquery-2.0.3.js"></script>
3: <script src="../Scripts/bootstrap.js"></script>
4: </head> 5: <body>6: <form id="form1" runat="server">
7: <div>8: <asp:FormView ID="FormView1" DataKeyNames="id"
ItemType="daten1"
9: runat="server" DefaultMode="Insert">
10: <InsertItemTemplate>11: <asp:DynamicEntity runat="server" ID="eins"
Mode="Insert"/>
12: <asp:Button runat="server" CommandName="Insert"
Text="insert"class="btn btn-default"/>
13: </InsertItemTemplate> 14: </asp:FormView> 15: </div> 16: </form> 17: </body>
Die Magie geschieht im Verzeichnis Dynamic Data. Je nach Mode (hier insert) wird das Template aus Entity Template geladen.
Dieses Template wurde von mit leicht angepasst um den Bootstrap 3 Formular Regularien zu folgen.
1: <asp:EntityTemplate runat="server" ID="EntityTemplate1">
2: <ItemTemplate>3: <div class="form-group">
4: <asp:Label ID="Label1" runat="server" OnInit="Label_Init"
5: OnPreRender="Label_PreRender"
CssClass="col-sm-2 control-label" />
6: <div class="controls">
7: <asp:DynamicControl runat="server" ID="DynamicControl"
8: Mode="Edit" OnInit="DynamicControl_Init" />
9: </div> 10: </div> 11: </ItemTemplate> 12: </asp:EntityTemplate>
Das DynamicControl Element wird dann passend zum Datentypen durch ein Template aus dem Verzeichnis FieldTemplate ersetzt. In diesem Beispiel Integer_Edit, Text_Edit und EMailAddress_Edit.
Folgendes Beispiel zeigt das Text Template. Wichtig ist Display Dynamic um den Platz nicht zu verbrauchen, wenn keine Fehlermeldung dargestellt wird. Ausserdem braucht Bootstrap für sein error HTML Template die CSS Klasse help-block.
1: <asp:TextBox ID="TextBox1" runat="server" Text='<%# FieldValueEditString %>'
2: CssClass="form-control"></asp:TextBox>
3: 4: <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1"
CssClass="help-block" ControlToValidate="TextBox1" Display="Dynamic" Enabled="false" />
5: <asp:RegularExpressionValidator runat="server" ID="RegularExpressionValidator1"
CssClass="help-block" ControlToValidate="TextBox1" Display="Dynamic" Enabled="false" />
6: <asp:DynamicValidator runat="server" ID="DynamicValidator1"
CssClass="help-block" ControlToValidate="TextBox1" Display="Dynamic" />
7: Die ASP.NET Validation Controls haben allerdings ein Feature das hier stört. Sie können mit einem Stern die Fehlerposition anzeigen und den beschreibenden Fehlertext in einem ValidationSummary Control. Wir wollen aber den Fehlertext direkt unterhalb der Eingabe sehen.
Folgender übler Trick ersetzt per VB.NET Code im Page Load Event des ASCX Files den Stern und damit wird der volle Text gezeigt.
1: RegularExpressionValidator1.Text = ""
2: RequiredFieldValidator1.Text = ""
3: DynamicValidator1.Text = ""
Dann füge ich noch eine JavaScript Datei hinzu die CSS Attribute Austausch für has-errors Anzeige. Dies ist in einem anderen Blog Artikel beschrieben.
Bei einem Submit des Formulars sieht das im Browser so aus
Sehr cool was die ASP.NET Steuerelemente zusammen mit Bootstrap hier so zaubern. Allerdings sind sie einen Hauch zu intelligent. Es werden nämlich auch korrekt die neuen HTML5 Input Typen gerendert (Type=”number” und Type=”email”). Moderne Browser validieren dann auch gleich mal selber was im IE bei falscher email Adresse so aussieht
Zuerst kommt ein rechteckiges Popup und wenn man das Feld per TAB verlässt wird es rot eingerahmt.
Da wir uns hier in den Händen des Browser befinden sieht das dann in Chrome auch ganz anders aus. Die Fehlerhafte Eingabe wird gar nicht mehr hervorgehoben und die Nummer wird von einem Updown Icon begleitet.
In den Bootstrap Foren wurde das Thema auch diskutiert und dann geschlossen. Theoretisch wäre auch das Required Attribut ein HTML5 Standard, hier erzeugt ASP.NET aber statt dessen ein DIV. Optisch besser aber nicht konsistent. Bei meiner Recherche habe ich ein Plug In gefunden, habe aber ein wenig Probleme für das Framework das für die Unzulänglichkeiten von CSS erfunden wurde ein Plugin zu verwenden die die Unzulänglichkeiten des Frameworks fixed. Im ersten Test gibt es einen Konflikt mit meiner eigene JS Library. Selbst wenn ich das fiixe kann schon morgen mit dem nächsten Nuget update wieder alles hin sein.