Microsoft’s jüngste Anstrengungen für den ASP.NET Webstack sind deutlich zu erkennen. Auch Webforms wird kontinuierlich renoviert. Im heutigen Blog Post, wird gezeigt wie man das ASP.NET Webforms Control GridView (ein Datagrid) einfach, schnell und schön verwendet.
Zunächst wird das neue ASP.NET Model Bindung verwendet um die Daten aus einem Friendly URL Segment einen Filter anzuwenden und Daten zu laden. Der Einführungsartikel findet sich auch im Developer Blog der ppedv.
Wer ASP.NET schon länger kennt wird den Autoformat Dialog kennen.
Das Ergebnis ist alles andere als Zeitgemäß und wird hier auch nicht verwendet. Es kommt Bootstrap 3 zum Einsatz, auf das die Redmonder Softwareschmiede beim Anlegen eines ASP.NET Projektes in Visual Studio 2013 setzt. Wenn Bootstrap fehlt, kann man es leicht per Nuget nachinstallieren.
Eigentlich muss man nur im Class Attribut den Wert Table setzen und schon ergibt sich ein schönes Datagrid. Leider mit seltsamen vertikalen und horizontalen Linien im Grid. Der Screenshot stammt aus den Chrome Developer Tools.
Wie man sieht, verdankt man die Linien dem Rules=”All” Attribut, das laut Visual Studio Intellisense in HTML5 obsolet ist. Dieses Verhalten wird über das Attribut Gridlines verändert. Zusätzlich kommen in dem HTML Code noch zusätzliche Attribute zu Class hinzu, gesetzt über CSSClass.
1: <asp:GridView EnableViewState="False" ItemType="ADRESSEN"
2: AllowSorting="true"
3: CssClass="table table-striped table-borderd table-condensed"
4: Gridlines="None"
5: ID="GridView1" runat="server" SelectMethod="GridView1_GetData"
6: AutoGenerateColumns="False">
7: <Columns>
8: <asp:TemplateField HeaderText="edit">
9: <ItemTemplate>
10: <a href="<%=UriSwitch.uri%>/…/<%#Item.AdrNr%>/
<%= Request.GetFriendlyUrlSegments()(1)%>">
11: <span class="badge"><%#Item.AdrNr%></span></a>
12: </ItemTemplate>
13: </asp:TemplateField>
14: <asp:BoundField DataField="Name1" SortExpression="Name1" HeaderText="Firma" />
Die Umrandung des Hyperlinks (für eine Master Detail Ansicht) erfolgt mit dem Bootstrap Badge Attribut und ist nur nice to have.
Das gewünschte Ergebnis in den Internet Explorer Developer Tools (die ich schöner und besser finde) ohne das Rules Attribut.
Am Ende möchte ich die Ansicht in Visual Studio 2013 Web Editor zeigen, die beinahe schon WYSiWYG ist.
Auch wenn der Weg nicht intuitiv ist, kann man binnen weniger Minuten eine komplette Tabelle im Web darstellen und durchsuchbar machen.