Benutzerdefinierte Formatierung auf Datenbasis (VB)

von Scott Mitchell

PDF herunterladen

Das Anpassen des Formats von GridView, DetailsView oder FormView basierend auf den an sie gebundenen Daten kann auf mehrere Arten erfolgen. In diesem Lernprogramm erfahren Sie, wie Sie datengebundene Formatierungen mithilfe der Ereignishandler "DataBound" und "RowDataBound" erreichen.

Einleitung

Die Darstellung der GridView-, DetailsView- und FormView-Steuerelemente kann über eine Vielzahl von stilbezogenen Eigenschaften angepasst werden. Eigenschaften wie CssClass, Font, BorderWidth, BorderStyle, BorderColor, Width, und Height, u. a. bestimmen das allgemeine Erscheinungsbild des gerenderten Steuerelements. Eigenschaften, einschließlich HeaderStyle, RowStyle, AlternatingRowStyleund andere zulassen, dass dieselben Formatvorlageneinstellungen auf bestimmte Abschnitte angewendet werden. Ebenso können diese Stileinstellungen auf Feldebene angewendet werden.

In vielen Szenarien hängen die Formatierungsanforderungen jedoch vom Wert der angezeigten Daten ab. Wenn Sie z. B. auf nicht vorrätige Produkte aufmerksam machen möchten, kann ein Bericht mit Produktinformationen die Hintergrundfarbe gelb für diese Produkte festlegen, deren UnitsInStock Felder und UnitsOnOrder Felder gleich 0 sind. Um die teureren Produkte hervorzuheben, möchten wir möglicherweise die Preise dieser Produkte anzeigen, die mehr als 75,00 $ in einer fett formatierten Schriftart kosten.

Das Anpassen des Formats von GridView, DetailsView oder FormView basierend auf den an sie gebundenen Daten kann auf mehrere Arten erfolgen. In diesem Lernprogramm sehen wir uns an, wie Sie datengebundene Formatierungen mithilfe der DataBound- und RowDataBound-Ereignishandler erreichen. Im nächsten Lernprogramm werden wir einen alternativen Ansatz untersuchen.

Verwenden des Ereignishandlers des DetailsView-SteuerelementsDataBound

Wenn Daten an eine DetailsView gebunden sind, entweder aus einem Datenquellensteuerelement oder durch programmgesteuertes Zuweisen von Daten zur Eigenschaft des Steuerelements DataSource und Aufrufen der DataBind() Methode, treten die folgenden Schritte auf:

1. Das Ereignis des Datenwebsteuerelements DataBinding wird ausgelöst.
2. Die Daten sind an die Daten-Websteuerung gebunden.
3. Das Ereignis des Datenwebsteuerelements DataBound wird ausgelöst.

Benutzerdefinierte Logik kann unmittelbar nach den Schritten 1 und 3 über einen Ereignishandler eingefügt werden. Durch Erstellen eines Ereignishandlers für das DataBound Ereignis können wir programmgesteuert die Daten bestimmen, die an das Datenwebsteuerelement gebunden wurden, und die Formatierung bei Bedarf anpassen. Um dies zu veranschaulichen, erstellen wir eine DetailsView, die allgemeine Informationen zu einem Produkt auflistet, aber den UnitPrice Wert in einer fett formatierten kursiven Schriftart anzeigt, wenn er 75,00 $ überschreitet.

Schritt 1: Anzeigen der Produktinformationen in einer Detailansicht

Öffnen Sie die CustomColors.aspx Seite im CustomFormatting Ordner, ziehen Sie ein DetailsView-Steuerelement aus der Toolbox auf den Designer, legen den ID Eigenschaftswert fest auf ExpensiveProductsPriceInBoldItalic, und binden Sie es an ein neues ObjectDataSource-Steuerelement, das die Methode der ProductsBLL Klasse GetProducts() aufruft. Die detaillierten Schritte zur Durchführung dieses Vorgangs werden hier aus Platzgründen weggelassen, da wir sie in früheren Lernprogrammen ausführlich untersucht haben.

Nachdem Sie die ObjectDataSource an die DetailsView gebunden haben, nehmen Sie sich einen Moment Zeit, um die Feldliste zu ändern. Ich habe mich entschieden, die ProductID, SupplierID, CategoryID, UnitsInStock, UnitsOnOrder, ReorderLevel und Discontinued BoundFields zu entfernen und die verbleibenden BoundFields umzubenennen und neu zu formatieren. Außerdem habe ich die Width-Einstellungen Height gelöscht. Da die DetailsView nur einen einzelnen Datensatz anzeigt, müssen wir die Seitennummerierung aktivieren, damit der Benutzer alle Produkte anzeigen kann. Aktivieren Sie dazu das Kontrollkästchen "Paging aktivieren" im Smarttag von DetailsView.

Abbildung 1: Aktivieren des Kontrollkästchens "Paging aktivieren" im SmartTag von DetailsView (Klicken Sie, um das Bild in voller Größe anzuzeigen)

Nach diesen Änderungen lautet das DetailsView-Markup wie folgt:

<asp:DetailsView ID="DetailsView1" runat="server" AllowPaging="True"
    AutoGenerateRows="False" DataKeyNames="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <Fields>
        <asp:BoundField DataField="ProductName" HeaderText="Product"
          SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category"
          ReadOnly="True" SortExpression="CategoryName" />
        <asp:BoundField DataField="SupplierName" HeaderText="Supplier"
          ReadOnly="True" SortExpression="SupplierName" />
        <asp:BoundField DataField="QuantityPerUnit"
          HeaderText="Qty/Unit" SortExpression="QuantityPerUnit" />
        <asp:BoundField DataField="UnitPrice" DataFormatString="{0:c}"
          HeaderText="Price"
            HtmlEncode="False" SortExpression="UnitPrice" />
    </Fields>
</asp:DetailsView>

Nehmen Sie sich einen Moment Zeit, um diese Seite in Ihrem Browser zu testen.

Abbildung 2: Das DetailView-Steuerelement zeigt jeweils ein Produkt an (Klicken, um das Bild in voller Größe anzuzeigen)

Schritt 2: Programmgesteuertes Ermitteln des Werts der Daten im DataBound-Ereignishandler

Um den Preis in einer fett formatierten kursiven Schriftart für diese Produkte anzuzeigen, deren UnitPrice Wert 75,00 $ überschreitet, müssen wir zuerst programmgesteuert in der Lage sein, den UnitPrice Wert zu bestimmen. Für die DetailsView kann dies im DataBound Ereignishandler erreicht werden. Um den Ereignishandler zu erstellen, klicken Sie im Designer auf die Detailansicht, und navigieren Sie dann zum Eigenschaftenfenster. Drücken Sie F4, um sie anzuzeigen, wenn sie nicht sichtbar ist, oder wechseln Sie zum Menü "Ansicht", und wählen Sie die Menüoption "Eigenschaftenfenster" aus. Klicken Sie im Eigenschaftenfenster auf das Blitzsymbol, um die Ereignisse von DetailsView anzuzeigen. Doppelklicken Sie als Nächstes entweder auf das DataBound Ereignis, oder geben Sie den Namen des Ereignishandlers ein, den Sie erstellen möchten.

Abbildung 3: Erstellen eines Ereignishandlers für das DataBound Ereignis

Hinweis

Sie können auch einen Ereignishandler aus dem Codeteil der ASP.NET Seite erstellen. Dort finden Sie zwei Dropdownlisten oben auf der Seite. Wählen Sie das Objekt aus der linken Dropdownliste aus, und das Ereignis, für das Sie einen Handler aus der rechten Dropdownliste erstellen möchten, und Visual Studio erstellt automatisch den entsprechenden Ereignishandler.

Dadurch wird automatisch der Ereignishandler erstellt, und Sie gelangen zu dem Codeteil, in dem er hinzugefügt wurde. An diesem Punkt sehen Sie:

Protected Sub ExpensiveProductsPriceInBoldItalic_DataBound _
    (sender As Object, e As System.EventArgs) _
    Handles ExpensiveProductsPriceInBoldItalic.DataBound
End Sub

Auf die an die DetailsView gebundenen Daten kann über die DataItem Eigenschaft zugegriffen werden. Denken Sie daran, dass wir unsere Steuerelemente an eine stark typierte DataTable binden, die aus einer Sammlung stark typierter DataRow-Instanzen besteht. Wenn die DataTable an die DetailsView gebunden ist, wird die erste DataRow in der DataTable der Eigenschaft DataItem der DetailsView zugewiesen. Insbesondere wird der DataItem Eigenschaft ein DataRowView Objekt zugewiesen. Wir können die DataRowViewEigenschaft 's Row verwenden, um Zugriff auf das zugrunde liegende DataRow-Objekt zu erhalten, das tatsächlich eine ProductsRow Instanz ist. Sobald wir diese ProductsRow Instanz haben, können wir unsere Entscheidung treffen, indem wir einfach die Eigenschaftswerte des Objekts überprüfen.

Der folgende Code veranschaulicht, wie Sie bestimmen können, ob der an das UnitPrice DetailsView-Steuerelement gebundene Wert größer als 75,00 $ ist:

Protected Sub ExpensiveProductsPriceInBoldItalic_DataBound _
    (sender As Object, e As System.EventArgs) _
    Handles ExpensiveProductsPriceInBoldItalic.DataBound

    Dim product As Northwind.ProductsRow = _
        CType(CType(ExpensiveProductsPriceInBoldItalic.DataItem, _
            System.Data.DataRowView).Row, Northwind.ProductsRow)
    If Not product.IsUnitPriceNull() AndAlso product.UnitPrice > 75 Then
    End If
End Sub

Hinweis

Da UnitPrice in der Datenbank ein NULL-Wert vorliegen kann, überprüfen wir zunächst, ob es sich nicht um einen NULL-Wert handelt, bevor auf die ProductsRow-Eigenschaft zugegriffen wird. Diese Überprüfung ist wichtig, da bei dem Versuch, auf die UnitPrice Eigenschaft zuzugreifen, wenn es einen NULL Wert aufweist, ProductsRow eine StrongTypingException-Ausnahme ausgelöst wird.

Schritt 3: Formatieren des Einzelpreiswerts in der DetailsView

An diesem Punkt können wir ermitteln, ob der an die DetailsView gebundene Wert einen Wert aufweist, der UnitPrice 75,00 $ überschreitet, aber wir haben noch nicht gesehen, wie die Formatierung von DetailsView programmgesteuert angepasst wird. Um die Formatierung einer gesamten Zeile in der DetailsView zu ändern, greifen Sie programmgesteuert auf die Zeile zu, indem Sie DetailsViewID.Rows(index) verwenden; um eine bestimmte Zelle zu ändern, verwenden Sie DetailsViewID.Rows(index).Cells(index). Sobald wir einen Verweis auf die Zeile oder Zelle haben, können wir die Darstellung anpassen, indem wir die formatbezogenen Eigenschaften festlegen.

Wenn Sie programmgesteuert auf eine Zeile zugreifen, müssen Sie den Index der Zeile kennen, der bei 0 beginnt. Die UnitPrice Zeile ist die fünfte Zeile in der DetailsView, hat einen Index von 4 und macht sie programmgesteuert mithilfe von ExpensiveProductsPriceInBoldItalic.Rows(4) zugänglich. An diesem Punkt könnten wir den gesamten Zeileninhalt in einer fett formatierten kursiven Schriftart mit dem folgenden Code anzeigen lassen:

ExpensiveProductsPriceInBoldItalic.Rows(4).Font.Bold = True
ExpensiveProductsPriceInBoldItalic.Rows(4).Font.Italic = True

Dadurch werden jedoch sowohl das Etikett (Preis) als auch der Wert fett und kursiv formatiert. Wenn wir nur den Wert fett und kursiv formatieren möchten, müssen wir diese Formatierung auf die zweite Zelle in der Zeile anwenden, die mit den folgenden Schritten erreicht werden kann:

ExpensiveProductsPriceInBoldItalic.Rows(4).Cells(1).Font.Bold = True
ExpensiveProductsPriceInBoldItalic.Rows(4).Cells(1).Font.Italic = True

Da unsere Lernprogramme bisher Stylesheets verwendet haben, um eine klare Trennung zwischen den gerenderten Markup- und formatbezogenen Informationen beizubehalten, anstatt die spezifischen Formateigenschaften wie oben gezeigt festzulegen, verwenden wir stattdessen eine CSS-Klasse. Öffnen Sie das Styles.css Stylesheet, und fügen Sie eine neue CSS-Klasse mit der folgenden Definition hinzu ExpensivePriceEmphasis :

.ExpensivePriceEmphasis
{
    font-weight: bold;
    font-style: italic;
}

Legen Sie dann im DataBound Ereignishandler die Eigenschaft der Zelle CssClass auf ExpensivePriceEmphasis. Der folgende Code zeigt den DataBound Ereignishandler in seiner Gesamtheit:

Protected Sub ExpensiveProductsPriceInBoldItalic_DataBound _
    (sender As Object, e As System.EventArgs) _
    Handles ExpensiveProductsPriceInBoldItalic.DataBound

    Dim product As Northwind.ProductsRow = _
        CType(CType(ExpensiveProductsPriceInBoldItalic.DataItem, _
            System.Data.DataRowView).Row, Northwind.ProductsRow)
    If Not product.IsUnitPriceNull() AndAlso product.UnitPrice > 75 Then
       ExpensiveProductsPriceInBoldItalic.Rows(4).Cells(1).CssClass = _
            "ExpensivePriceEmphasis"
    End If
End Sub

Beim Betrachten von Chai, wenn der Preis weniger als 75,00 $ beträgt, wird der Preis in normaler Schrift angezeigt (siehe Abbildung 4). Beim Anzeigen von Mishi Kobe Niku, das einen Preis von 97,00 $ hat, wird der Preis jedoch in einem fett und kursiv formatierten Schriftbild angezeigt (siehe Abbildung 5).

Abbildung 4: Preise unter 75,00 $ werden in einer normalen Schriftart angezeigt (Klicken Sie, um das Bild in voller Größe anzuzeigen)

Abbildung 5: Die Preise für teure Produkte werden in einer fett formatierten kursiven Schriftart angezeigt (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Verwenden des Ereignishandlers des FormView-SteuerelementsDataBound

Die Schritte zum Ermitteln der zugrunde liegenden Daten, die an ein FormView gebunden sind, sind mit denen für ein DetailsView-Objekt identisch, erstellen einen DataBound Ereignishandler, wandeln die DataItem Eigenschaft in den entsprechenden Objekttyp um, der an das Steuerelement gebunden ist, und bestimmen, wie die Vorgehensweise fortgesetzt werden soll. Die FormView und DetailsView unterscheiden sich jedoch darin, wie die Darstellung der Benutzeroberfläche aktualisiert wird.

Die FormView enthält keine BoundFields und daher fehlt die Rows Auflistung. Stattdessen besteht eine FormView aus Vorlagen, die eine Mischung aus statischem HTML, Websteuerelementen und Datenbindungssyntax enthalten können. Das Anpassen des Stils eines FormView-Steuerelements umfasst in der Regel das Anpassen des Stils eines oder mehrerer Websteuerelemente innerhalb der Vorlagen von FormView.

Um dies zu veranschaulichen, verwenden wir eine FormView zum Auflisten von Produkten wie im vorherigen Beispiel, aber dieses Mal zeigen wir nur den Produktnamen und die Lagereinheiten auf Lager an, die in einer roten Schriftart angezeigt werden, wenn sie kleiner als oder gleich 10 ist.

Schritt 4: Anzeigen der Produktinformationen in einer FormView

Fügen Sie der CustomColors.aspx-Seite unterhalb der DetailsView eine FormView hinzu und legen Sie deren ID-Eigenschaft auf LowStockedProductsInRed fest. Binden Sie die FormView an das ObjectDataSource-Steuerelement, das aus dem vorherigen Schritt erstellt wurde. Dadurch wird ein ItemTemplate, EditItemTemplate und InsertItemTemplate für das FormView Objekt erstellt. Entfernen Sie die EditItemTemplate und InsertItemTemplate und vereinfachen Sie die ItemTemplate, um nur die ProductName- und UnitsInStock-Werte in ihren jeweils entsprechend benannten Bezeichnungssteuerelementen zu enthalten. Wie bei der DetailsView im vorherigen Beispiel, aktivieren Sie auch das Kontrollkästchen "Paging aktivieren" im Smarttag von FormView.

Nach diesen Bearbeitungen sollte ihr FormView-Markup ähnlich wie folgt aussehen:

<asp:FormView ID="LowStockedProductsInRed" runat="server"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1"
    AllowPaging="True" EnableViewState="False">
    <ItemTemplate>
        <b>Product:</b>
        <asp:Label ID="ProductNameLabel" runat="server"
         Text='<%# Bind("ProductName") %>'>
        </asp:Label><br />
        <b>Units In Stock:</b>
        <asp:Label ID="UnitsInStockLabel" runat="server"
          Text='<%# Bind("UnitsInStock") %>'>
        </asp:Label>
    </ItemTemplate>
</asp:FormView>

Beachten Sie, dass das ItemTemplate enthält:

• Statischer HTML-Code mit dem Text "Product:" und "Units In Stock:" zusammen mit den <br /> und <b> Elementen.
• Web steuert die beiden BezeichnungssteuerelementeProductNameLabel und UnitsInStockLabel.
• Datenbindungssyntax die <%# Bind("ProductName") %> und <%# Bind("UnitsInStock") %> Syntax, die die Werte aus diesen Feldern den Eigenschaften der Label-Steuerelemente Text zuweist.

Schritt 5: Programmgesteuertes Ermitteln des Werts der Daten im DataBound-Ereignishandler

Nachdem das Markup von FormView abgeschlossen ist, besteht der nächste Schritt darin, programmgesteuert zu ermitteln, ob der UnitsInStock Wert kleiner oder gleich 10 ist. Dies erfolgt genau auf die gleiche Weise mit der FormView wie bei der DetailsView. Erstellen Sie zunächst einen Ereignishandler für das FormView-Ereignis DataBound .

Abbildung 6: Erstellen des DataBound Ereignishandlers

Im Ereignishandler wandeln Sie die FormView-Eigenschaft DataItem in eine ProductsRow Instanz um und bestimmen, ob der UnitsInPrice Wert so ist, dass er in einer roten Schriftart angezeigt werden muss.

Protected Sub LowStockedProductsInRed_DataBound _
    (sender As Object, e As System.EventArgs) _
    Handles LowStockedProductsInRed.DataBound

    Dim product As Northwind.ProductsRow = _
        CType(CType(LowStockedProductsInRed.DataItem, System.Data.DataRowView).Row, _
            Northwind.ProductsRow)
    If Not product.IsUnitsInStockNull() AndAlso product.UnitsInStock <= 10 Then
        Dim unitsInStock As Label = _
            CType(LowStockedProductsInRed.FindControl("UnitsInStockLabel"), Label)

        If unitsInStock IsNot Nothing Then
        End If
    End If
End Sub

Schritt 6: Formatieren des Label-Steuerelements UnitsInStockLabel im ItemTemplate von FormView

Der letzte Schritt besteht darin, den angezeigten UnitsInStock Wert in einer roten Schriftart zu formatieren, wenn der Wert 10 oder kleiner ist. Dazu müssen wir programmgesteuert auf das UnitsInStockLabel Steuerelement in der ItemTemplate zugreifen und dessen Stil-Eigenschaften so festlegen, dass der Text in Rot angezeigt wird. Verwenden Sie die FindControl("controlID") folgende Methode, um auf ein Websteuerelement in einer Vorlage zuzugreifen:

Dim someName As WebControlType = _
    CType(FormViewID.FindControl("controlID"), WebControlType)

In unserem Beispiel möchten wir auf ein Bezeichnungssteuerelement zugreifen, dessen ID Wert lautet UnitsInStockLabel, daher verwenden wir Folgendes:

Dim unitsInStock As Label = _
    CType(LowStockedProductsInRed.FindControl("UnitsInStockLabel"), Label)

Sobald wir über einen programmgesteuerten Verweis auf das Websteuerelement verfügen, können wir die formatbezogenen Eigenschaften nach Bedarf ändern. Wie im vorherigen Beispiel habe ich eine CSS-Klasse mit Styles.css dem Namen LowUnitsInStockEmphasiserstellt. Wenn Sie diese Formatvorlage auf das Label-Websteuerelement anwenden möchten, legen Sie dessen CssClass Eigenschaft entsprechend fest.

Protected Sub LowStockedProductsInRed_DataBound _
    (sender As Object, e As System.EventArgs) _
    Handles LowStockedProductsInRed.DataBound

    Dim product As Northwind.ProductsRow = _
        CType(CType(LowStockedProductsInRed.DataItem, System.Data.DataRowView).Row, _
            Northwind.ProductsRow)
    If Not product.IsUnitsInStockNull() AndAlso product.UnitsInStock <= 10 Then
        Dim unitsInStock As Label = _
            CType(LowStockedProductsInRed.FindControl("UnitsInStockLabel"), Label)

        If unitsInStock IsNot Nothing Then
            unitsInStock.CssClass = "LowUnitsInStockEmphasis"
        End If
    End If
End Sub

Hinweis

Die Syntax für das programmgesteuerte Zugreifen auf das Web-Steuerelement mithilfe von FindControl("controlID") und anschließende Festlegung der stilbezogenen Eigenschaften kann auch verwendet werden, wenn TemplateFields in den DetailsView- oder GridView-Steuerelementen verwendet werden. Wir untersuchen TemplateFields in unserem nächsten Tutorial.

Abbildung 7 zeigt die FormView beim Anzeigen eines Produkts, dessen UnitsInStock Wert größer als 10 ist, während das Produkt in Abbildung 8 seinen Wert kleiner als 10 hat.

Abbildung 7: Für Produkte mit ausreichend großen Einheiten im Lager wird keine benutzerdefinierte Formatierung angewendet (Klicken Sie, um das Bild in voller Größe anzuzeigen)

Abbildung 8: Die Einheiten der Lagernummer werden rot für diese Produkte mit Werten von 10 oder weniger angezeigt (Klicken Sie, um das Bild in voller Größe anzuzeigen)

Formatierung mit dem GridView-EreignisRowDataBound

Zuvor haben wir die Abfolge der Schritte untersucht, die die DetailsView- und FormView-Steuerelemente während der Datenbindung durchlaufen. Sehen wir uns diese Schritte erneut als Auffrischung an.

1. Das Ereignis des Datenwebsteuerelements DataBinding wird ausgelöst.
2. Die Daten sind an die Daten-Websteuerung gebunden.
3. Das Ereignis des Datenwebsteuerelements DataBound wird ausgelöst.

Diese drei einfachen Schritte reichen für DetailsView und FormView aus, da sie nur einen einzelnen Datensatz anzeigen. Für das GridView-Steuerelement, das alle an sie gebundenen Datensätze anzeigt (nicht nur den ersten), ist Schritt 2 etwas aufwendiger.

In Schritt 2 listet gridView die Datenquelle auf und erstellt für jeden Datensatz eine GridViewRow Instanz und bindet den aktuellen Datensatz an ihn. Für jedes GridViewRow Element, das der GridView hinzugefügt wird, werden zwei Ereignisse ausgelöst:

• RowCreated wird ausgelöst, nachdem das GridViewRow erstellt wurde
• RowDataBound wird ausgelöst, nachdem der aktuelle Datensatz an GridViewRow gebunden wurde.

Für gridView wird dann die Datenbindung genauer durch die folgende Abfolge von Schritten beschrieben:

1. Das GridView-Ereignis DataBinding wird ausgelöst.

2. Die Daten sind an gridView gebunden.

   Für jeden Datensatz in der Datenquelle

   1. Erstellen eines GridViewRow-Objekts
   2. Auslösen des Ereignisses RowCreated
   3. Datensatz an den GridViewRow binden
   4. Auslösen des Ereignisses RowDataBound
   5. Fügen Sie das GridViewRow zur Rows Sammlung hinzu

3. Das GridView-Ereignis DataBound wird ausgelöst.

Um das Format der einzelnen Datensätze von GridView anzupassen, müssen wir dann einen Ereignishandler für das RowDataBound Ereignis erstellen. Um dies zu veranschaulichen, fügen wir der Seite eine GridView hinzu, die den Namen, die CustomColors.aspx Kategorie und den Preis für jedes Produkt auflistet, wobei diese Produkte hervorgehoben werden, deren Preis kleiner als 10,00 $ mit einer gelben Hintergrundfarbe ist.

Schritt 7: Anzeigen von Produktinformationen in einer GridView

Fügen Sie eine GridView unterhalb der FormView aus dem vorherigen Beispiel hinzu, und legen Sie dessen ID Eigenschaft auf HighlightCheapProducts. Da wir bereits über eine ObjectDataSource verfügen, die alle Produkte auf der Seite zurückgibt, binden Sie das GridView an dieses Element. Bearbeiten Sie schließlich die BoundFields von GridView so, dass nur die Namen, Kategorien und Preise der Produkte enthalten sind. Nach diesen Bearbeitungen sollte das Markup von GridView wie folgt aussehen:

<asp:GridView ID="HighlightCheapProducts" AutoGenerateColumns="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1"
    EnableViewState="False" runat="server">
    <Columns>
        <asp:BoundField DataField="ProductName" HeaderText="Product"
          SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category"
          ReadOnly="True" SortExpression="CategoryName" />
        <asp:BoundField DataField="UnitPrice" DataFormatString="{0:c}"
          HeaderText="Price"
            HtmlEncode="False" SortExpression="UnitPrice" />
    </Columns>
</asp:GridView>

Abbildung 9 zeigt unseren Fortschritt zu diesem Punkt, wenn er über einen Browser angezeigt wird.

Abbildung 9: Die GridView listet den Namen, die Kategorie und den Preis für jedes Produkt auf (Klicken Sie, um das Bild in voller Größe anzuzeigen)

Schritt 8: Programmgesteuertes Ermitteln des Werts der Daten im RowDataBound-Ereignishandler

Wenn die ProductsDataTable an das GridView-Element gebunden ist, werden ihre ProductsRow-Instanzen aufgezählt und für jede ProductsRow ein GridViewRow erstellt. Die GridViewRow-Eigenschaft von DataItem wird dem bestimmten ProductRow zugewiesen, woraufhin das Ereignis von GridView RowDataBound ausgelöst wird. Um den UnitPrice Wert für jedes An gridView gebundene Produkt zu ermitteln, müssen wir dann einen Ereignishandler für das GridView-Ereignis RowDataBound erstellen. In diesem Ereignishandler können wir den UnitPrice Wert für den aktuellen GridViewRow überprüfen und eine Formatierungsentscheidung für diese Zeile treffen.

Dieser Ereignishandler kann mit derselben Reihe von Schritten erstellt werden wie bei FormView und DetailsView.

Abbildung 10: Erstellen eines Ereignishandlers RowDataBound für das GridView-Ereignis

Wenn Sie den Ereignishandler auf diese Weise erstellen, wird der folgende Code automatisch dem Codeteil der ASP.NET Seite hinzugefügt:

Protected Sub HighlightCheapProducts_RowDataBound _
    (sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) _
    Handles HighlightCheapProducts.RowDataBound

End Sub

Wenn das RowDataBound Ereignis ausgelöst wird, wird der Ereignishandler als zweiter Parameter an ein Objekt vom Typ GridViewRowEventArgsübergeben, das eine Eigenschaft mit dem Namen Rowhat. Diese Eigenschaft gibt einen Verweis auf das GridViewRow zurück, das gerade gebunden wurde. So greifen Sie auf die ProductsRow an die GridViewRow Eigenschaft gebundene Instanz DataItem zu:

Protected Sub HighlightCheapProducts_RowDataBound _
    (sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) _
    Handles HighlightCheapProducts.RowDataBound

    Dim product As Northwind.ProductsRow = _
        CType(CType(e.Row.DataItem, System.Data.DataRowView).Row, Northwind.ProductsRow)
    If Not product.IsUnitPriceNull() AndAlso product.UnitPrice < 10 Then
    End If
End Sub

Beim Arbeiten mit dem RowDataBound Ereignishandler ist es wichtig zu beachten, dass gridView aus verschiedenen Zeilentypen besteht und dass dieses Ereignis für alle Zeilentypen ausgelöst wird. Der GridViewRow-Typ kann durch seine RowType-Eigenschaft bestimmt werden und kann einen der möglichen Werte haben.

• DataRow eine Zeile, die an einen Datensatz aus der GridView gebunden ist DataSource
• EmptyDataRow die Zeile angezeigt wird, wenn die GridView DataSource leer ist
• Footer die Fußzeilenzeile; angezeigt, wenn die GridView-Eigenschaft ShowFooter auf den Wert True gesetzt ist.
• Header die Kopfzeile; angezeigt, wenn die ShowHeader-Eigenschaft von GridView auf True (standard) festgelegt ist.
• Pager für GridView-Elemente, die Paginierung implementieren, die Zeile, die die Paginierungsoberfläche anzeigt
• Separator wird nicht für die GridView verwendet, sondern von den Eigenschaften der RowType DataList- und Repeater-Steuerelemente genutzt, zwei Daten-Websteuerungen, die in zukünftigen Tutorials erläutert werden.

Da die Zeilen EmptyDataRow, Header, Footer und Pager keinem DataSource-Datensatz zugeordnet sind, haben sie immer einen Wert von Nothing für ihre DataItem-Eigenschaft. Aus diesem Grund müssen wir, bevor wir versuchen, mit der aktuellen GridViewRow-Eigenschaft von DataItem zu arbeiten, zuerst sicherstellen, dass wir mit einem DataRow zu tun haben. Dies kann erreicht werden, indem die GridViewRowRowType-Eigenschaft wie folgt überprüft wird:

Protected Sub HighlightCheapProducts_RowDataBound _
    (sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) _
    Handles HighlightCheapProducts.RowDataBound

    If e.Row.RowType = DataControlRowType.DataRow Then
        Dim product As Northwind.ProductsRow = _
            CType(CType(e.Row.DataItem, System.Data.DataRowView).Row, Northwind.ProductsRow)
        If Not product.IsUnitPriceNull() AndAlso product.UnitPrice < 10 Then
        End If
    End If
End Sub

Schritt 9: Zeile gelb hervorheben, wenn der Einzelpreis unter 10,00 $ liegt.

Im letzten Schritt wird das gesamte GridViewRow programmatisch hervorgehoben, wenn der UnitPrice Wert für die betreffende Zeile kleiner als 10,00 $ ist. Die Syntax für den Zugriff auf die Zeilen oder Zellen eines GridView-Steuerelements ist dieselbe wie bei der DetailsView: GridViewID.Rows(index) um auf die gesamte Zeile zuzugreifen, GridViewID.Rows(index).Cells(index) um auf eine bestimmte Zelle zuzugreifen. Wenn der RowDataBound Ereignishandler jedoch ausgelöst wird, sind die gebundenen GridViewRow noch nicht der GridView-Auflistung Rows hinzugefügt worden. Daher können Sie nicht mit der Rows-Sammlung im GridViewRow Ereignishandler auf die RowDataBound aktuelle Instanz zugreifen.

Anstelle von GridViewID.Rows(index) können wir im GridViewRow Ereignishandler auf die aktuelle RowDataBound-Instanz mithilfe von e.Row verweisen. Das heißt, um die aktuelle GridViewRow Instanz aus dem RowDataBound Ereignishandler hervorzuheben, würden wir Folgendes verwenden:

e.Row.BackColor = System.Drawing.Color.Yellow

Anstatt die Eigenschaft von GridViewRow direkt festzulegen, sollten wir weiterhin CSS-Klassen verwenden. Ich habe eine CSS-Klasse mit dem Namen AffordablePriceEmphasis erstellt, die die Hintergrundfarbe auf Gelb festlegt. Der abgeschlossene RowDataBound Ereignishandler folgt:

Protected Sub HighlightCheapProducts_RowDataBound _
    (sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) _
    Handles HighlightCheapProducts.RowDataBound

    If e.Row.RowType = DataControlRowType.DataRow Then
        Dim product As Northwind.ProductsRow = _
            CType(CType(e.Row.DataItem, System.Data.DataRowView).Row, Northwind.ProductsRow)
        If Not product.IsUnitPriceNull() AndAlso product.UnitPrice < 10 Then
            e.Row.CssClass = "AffordablePriceEmphasis"
        End If
    End If
End Sub

Abbildung 11: Die kostengünstigsten Produkte sind gelb hervorgehoben (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Zusammenfassung

In dieser Anleitung haben wir erfahren, wie Sie GridView, DetailsView und FormView basierend auf den Daten formatieren, die an das Steuerelement gebunden sind. Dazu haben wir einen Ereignishandler für die DataBound- oder RowDataBound-Ereignisse erstellt, wobei die zugrunde liegenden Daten zusammen mit einer Formatierungsänderung, falls erforderlich, untersucht wurden. Um auf die an eine DetailsView oder FormView gebundenen Daten zuzugreifen, verwenden wir die DataItem Eigenschaft im DataBound Ereignishandler. Für eine GridView enthält die Eigenschaft jeder GridViewRow Instanz DataItem die an diese Zeile gebundenen Daten, die im RowDataBound Ereignishandler verfügbar sind.

Die Syntax zum programmgesteuerten Anpassen der Formatierung des Datenwebsteuerelements hängt vom Websteuerelement und der Anzeige der zu formatierten Daten ab. Für DetailsView- und GridView-Steuerelemente können die Zeilen und Zellen über einen Ordinalindex aufgerufen werden. Für formView, das Vorlagen verwendet, wird die FindControl("controlID") Methode häufig verwendet, um ein Websteuerelement aus der Vorlage zu suchen.

Im nächsten Lernprogramm befassen wir uns mit der Verwendung von Vorlagen mit GridView und DetailsView. Darüber hinaus wird ein weiteres Verfahren zum Anpassen der Formatierung basierend auf den zugrunde liegenden Daten angezeigt.

Glückliche Programmierung!

Zum Autor

Scott Mitchell, Autor von sieben ASP/ASP.NET Büchern und Gründer von 4GuysFromRolla.com, arbeitet seit 1998 mit Microsoft Web Technologies zusammen. Scott arbeitet als unabhängiger Berater, Trainer und Schriftsteller. Sein neuestes Buch ist Sams Teach Yourself ASP.NET 2.0 in 24 Stunden. Er kann bei mitchell@4GuysFromRolla.comerreicht werden.

Besonderer Dank an

Diese Lernprogrammreihe wurde von vielen hilfreichen Prüfern überprüft. Leitende Prüfer für dieses Lernprogramm waren E.R. Gilmore, Dennis Patterson und Dan Jagers. Möchten Sie meine bevorstehenden MSDN-Artikel überprüfen? Wenn ja, schicken Sie mir eine Nachricht an mitchell@4GuysFromRolla.com.

ZurückWeiter