Jürgen Gutsch

Barrierefreie Webseiten mit ASP.NET 2.0 - Teil 5

In diesem Teil versuche ich ein Gästebuch mit folgenden WebControls zu erstellen:

1. SqlDataSource (1)
2. DetailsView (2)
3. GridView (3)

Als Datenquelle dient eine SQL Server Datenbank (SQL Server 2005 Express Edition) (4), welche im Projekt unter „App_Data“ abgelegt ist.

Die Gästebuchtabelle in der Datenbank sieht wie folgt aus:

Die in Teil 3 hinzugefügten „CSS Friendly Control Adapters“ (5) optimieren sowohl die DetailsView als auch das DataGrid, ich kann diese also mit gutem Gewissen einsetzen.

SqlDataSource

Die SqlDataSource sieht in etwa so aus:
</asp:SqlDataSource
    ID="SqlDataSource1"
    runat="server"
    ConnectionString="<%$ ConnectionStrings:DemoSiteConnection %>"
    SelectCommand="SELECT name, email, web, ICQ, subject, message
        FROM guestbook ORDER BY lastmod DESC"
    InsertCommand="INSERT INTO guestbook (name, email, web, ICQ,
        subject, message) VALUES (@name, @email, @web, @ICQ,
        @subject, @message)">

Der ConnectionString zur Datenbank befindet sich in einem ConnectionString-Eintrag in der „web.config“ und wird mit dem <%$ %> Konstrukt ausgelesen. Das „SelectCommand“ benötige ich für die Anzeige im DataGrid und das „InsertCommand“ für das DetailsView.

DetailsView

Das DetailsView, welches oberhalb des GridViews platziert ist, muss ich nur mit der Eigenschaft „DataSourceID“ an die obige DataSource binden. Die Felder binde ich von Hand ein, da ich für das Feld „Nachricht“ ein TemplateField benötige, um eine TextArea zu erstellen. Die Eigenschaft „AutoGenerateRows“ wird also auf „false“ gesetzt. Die Einzelnen Felder werden mit der Eigenschaft „DataField“ gebunden. Alles andere passiert automatisch…

Da das DetailsView nur zur Eingabe dient, habe ich die Eigenschaft DefaultMode auf „Insert“ gesetzt. Das DetaislView ist also immer im „Insert“-Modus. Um Beiträge zu bearbeiten, kann der Modus für einen Administrator auf „Edit“ gesetzt werden, damit Datensätze editiert werden können.

<asp:DetailsView
    DefaultMode="Insert"
    AutoGenerateInsertButton="true"
    ID="DetailsView1"
    runat="server"
    DataSourceID="SqlDataSource1"
    AutoGenerateRows="False"
    Width="100%"
    Height="30px">
    <Fields>
        <asp:BoundField
            AccessibleHeaderText="Name"
            DataField="name"
            FooterText="Name"
            HeaderText="Name"
            SortExpression="name" />
        <asp:BoundField
            AccessibleHeaderText="Email"
            DataField="email"
            HeaderText="Email"
            SortExpression="email" />
         [... usw ...]
         <asp:TemplateField
            AccessibleHeaderText="Nachricht"
            FooterText="Nachricht"
            HeaderText="Nachricht"
            SortExpression="message">
            <InsertItemTemplate>
                <asp:TextBox
                    ID="message"
                    runat="server"
                    TextMode="MultiLine"
                    Height="50"
                    Width="178"
                    Text='<%# Bind("message") %>' />
            </InsertItemTemplate>
        </asp:TemplateField>
    </Fields>
</asp:DetailsView>

GridView

Das GridView binde ich wie das DetailsView an die DataSource. Paging habe ich eingeschaltet, sowie „AutoGenerateColumns“ auf „False“, da ich ein spezielles Ausgabeformat wähle.

Wie man unten sieht erstelle ich zwei TemplateFields , die jeweils an mehrere Datanbankfelder gebunden sind. Gleiches könnte ich auch mit einem Repeater erreichen, muss aber dann die Tabellenstruktur nachbauen, die mir die Adapter ja schon gesäubert ausgeben.

<asp:GridView
    ID="GridView1"
    runat="server"
    AllowPaging="True"
    DataSourceID="SqlDataSource1"
    AutoGenerateColumns="False"
    Width="100%">
    <Columns>
        <asp:TemplateField
            HeaderText="Eingetragen Von">
            <ItemTemplate >
                <%# DataBinder.Eval(Container.DataItem, "name") %>
                <br />
                <%# DataBinder.Eval(Container.DataItem, "email") %>
                <br />
                <%# DataBinder.Eval(Container.DataItem, "web") %>
                <br />
                <%# DataBinder.Eval(Container.DataItem, "ICQ") %>
                <br />
            </ItemTemplate>
            <HeaderStyle Width="20%" />
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Nachricht">
            <ItemTemplate>
               <%# DataBinder.Eval(Container.DataItem, "subject") %>
               <br />
               <%# DataBinder.Eval(Container.DataItem, "message") %>
               <br />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

DemoSite ansehen
Teil 5 downloaden

Anmerkung:
Auf der DemoSite funktioniert das Eintragen in das Gästebuch nicht, da ich auf dem WebServer keine Verbindung zum SQL Server 2005 Express bekommen kann. Das GridView ist hier auf die schnelle an eine XmlDataSource gebunden. Eventuell werde ich dann demnächst Access verwenden. In dem Projekt, zum downloaden, sollte der DB zugriff allerdings problemlos funktionieren.
Jetzt wird eine Access Datenbank verwendet, Gästebucheinträge funktionieren jetzt problemlos.

(1) http://msdn2.microsoft.com/de-de/library/system.web.ui.webcontrols.sqldatasource(VS.80).aspx
(2) http://msdn2.microsoft.com/de-de/library/system.web.ui.webcontrols.detailsview(VS.80).aspx
(3) http://msdn2.microsoft.com/de-de/library/system.web.ui.webcontrols.gridview(VS.80).aspx
(4) http://www.microsoft.com/germany/msdn/vstudio/products/express/sql/default.mspx
(5) http://www.asp.net/cssadapters/