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 Tutorial erfahren Sie, wie Sie datengebundene Formatierungen mithilfe der DataBound- und RowDataBound-Ereignishandler erreichen.

Einführung

Die Darstellung der Steuerelemente GridView, DetailsView und FormView kann über eine Vielzahl von stilbezogenen Eigenschaften angepasst werden. Eigenschaften wie CssClass, , BorderWidthFont, BorderStyle, BorderColor, Width, und Heightbestimmen unter anderem das allgemeine Erscheinungsbild des gerenderten Steuerelements. Eigenschaften wie HeaderStyle, RowStyle, , AlternatingRowStyleund andere ermöglichen das Anwenden derselben Stileinstellungen auf bestimmte Abschnitte. 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 beispielsweise auf nicht vorrätige Produkte aufmerksam machen möchten, kann in einem Bericht mit Produktinformationen die Hintergrundfarbe auf Gelb für produkte festgelegt werden, deren UnitsInStock Felder und UnitsOnOrder beide gleich 0 sind. Um die teureren Produkte hervorzuheben, sollten wir die Preise dieser Produkte, die mehr als 75,00 USD kosten, in einer fetten Schriftart anzeigen.

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

Verwenden des Ereignishandlers des DetailsView-SteuerelementsDataBound

Wenn Daten an eine DetailsView gebunden werden, 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 DataBinding Datenwebsteuerelements wird ausgelöst.
2. Die Daten sind an das Datenwebsteuerelement gebunden.
3. Das Ereignis des DataBound Datenwebsteuerelements wird ausgelöst.

Benutzerdefinierte Logik kann sofort 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 ermitteln, 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 fetten, kursiven Schriftart anzeigt, wenn er 75,00 USD ü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 die Designer, legen Sie den ID Eigenschaftswert auf ExpensiveProductsPriceInBoldItalicfest, und binden Sie es an ein neues ObjectDataSource-Steuerelement, das die Methode der ProductsBLL Klasse GetProducts() aufruft. Die detaillierten Schritte zum Erreichen dieses Vorgangs werden hier aus Gründen der Kürze ausgelassen, da wir sie in den vorherigen Tutorials 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 dafür entschieden, die ProductID, , SupplierID, CategoryID, UnitsInStock, UnitsOnOrderReorderLevel, und Discontinued BoundFields zu entfernen und die verbleibenden BoundFields umbenannt und neu formatiert. Ich habe auch die Width Einstellungen und Height gelöscht. Da in der DetailsView nur ein einzelner Datensatz angezeigt wird, müssen wir das Paging aktivieren, damit der Endbenutzer 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, 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 DetailAnsicht-Steuerelement zeigt ein Produkt nach dem anderen 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 fetten, kursiven Schriftart für diejenigen Produkte anzuzeigen, deren UnitPrice Wert 75,00 USD überschreitet, müssen wir zuerst in der Lage sein, den UnitPrice Wert programmgesteuert zu bestimmen. Für die DetailsView kann dies im DataBound Ereignishandler ausgeführt werden. Klicken Sie zum Erstellen des Ereignishandlers auf die DetailAnsicht im Designer navigieren Sie dann zum Eigenschaftenfenster. Drücken Sie F4, um es anzuzeigen, wenn es 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 aufzulisten. 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 über den Codeteil der ASP.NET Seite erstellen. Dort finden Sie oben auf der Seite zwei Dropdownlisten. Wählen Sie das Objekt aus der linken Dropdownliste und das Ereignis aus, für das Sie einen Handler erstellen möchten, aus der rechten Dropdownliste aus. Visual Studio erstellt automatisch den entsprechenden Ereignishandler.

Dadurch wird automatisch der Ereignishandler erstellt und Sie zu dem Codeteil gelangen, in dem er hinzugefügt wurde. An dieser Stelle 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 typisierte DataTable binden, die aus einer Sammlung von DataRow-Instanzen mit starkem Typ besteht. Wenn die DataTable an die DetailsView gebunden ist, wird der erste DataRow in der DataTable der DetailsView-Eigenschaft DataItem 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 ein ProductsRow instance ist. Sobald wir diese ProductsRow instance können wir unsere Entscheidung treffen, indem wir einfach die Eigenschaftenwerte des Objekts überprüfen.

Der folgende Code veranschaulicht, wie Sie ermitteln, ob der UnitPrice an das DetailsView-Steuerelement gebundene Wert größer als 75,00 USD 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 ein NULL Wert in der Datenbank vorhanden sein kann, überprüfen wir zunächst, ob wir es nicht mit einem NULL Wert zu tun haben, bevor wir auf die Eigenschaft der ProductsRow's UnitPrice zugreifen. Diese Überprüfung ist wichtig, denn wenn wir versuchen, auf die UnitPrice Eigenschaft zuzugreifen, wenn sie über einen NULL Wert verfügt, löst das ProductsRow Objekt eine StrongTypingException-Ausnahme aus.

Schritt 3: Formatieren des UnitPrice-Werts in der Detailansicht

An diesem Punkt können wir ermitteln, ob der UnitPrice an die DetailsView gebundene Wert einen Wert hat, der 75,00 USD überschreitet, aber wir müssen noch sehen, wie die Formatierung von DetailsView programmgesteuert angepasst werden kann. Um die Formatierung einer gesamten Zeile in der DetailsView zu ändern, greifen Sie programmgesteuert auf die Zeile zu DetailsViewID.Rows(index). Um eine bestimmte Zelle zu ändern, verwenden DetailsViewID.Rows(index).Cells(index)Sie den Zugriff. Sobald wir einen Verweis auf die Zeile oder Zelle haben, können wir deren Darstellung anpassen, indem wir die stilbezogenen Eigenschaften festlegen.

Für den programmgesteuerten Zugriff auf eine Zeile müssen Sie den Index der Zeile kennen, der bei 0 beginnt. Die UnitPrice Zeile ist die fünfte Zeile in der DetailsView und gibt ihr einen Index von 4 und macht sie programmgesteuert mit ExpensiveProductsPriceInBoldItalic.Rows(4)zugänglich. An diesem Punkt könnte der gesamte Inhalt der Zeile in einer fetten, kursiven Schriftart angezeigt werden, indem sie den folgenden Code verwenden:

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

Dadurch werden jedoch sowohl die Bezeichnung (Price) als auch der Wert fett und kursiv. Wenn wir nur den Wert fett und kursiv machen möchten, müssen wir diese Formatierung auf die zweite Zelle in der Zeile anwenden, was wie folgt erreicht werden kann:

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

Da unsere Tutorials bisher Stylesheets verwendet haben, um eine sauber Trennung zwischen dem gerenderten Markup und den stilbezogenen 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 dem Namen ExpensivePriceEmphasis der folgenden Definition hinzu:

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

Legen Sie dann im DataBound Ereignishandler die -Eigenschaft der Zelle CssClass auf fest ExpensivePriceEmphasis. Der folgende Code zeigt den DataBound Ereignishandler vollständig an:

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 Anzeigen von Chai, das weniger als 75,00 USD kostet, wird der Preis in einer normalen Schriftart angezeigt (siehe Abbildung 4). Beim Betrachten von Mishi Kobe Niku, der einen Preis von 97,00 USD hat, wird der Preis jedoch in einer fetten, kursiven Schriftart angezeigt (siehe Abbildung 5).

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

Abbildung 5: Preise für teure Produkte werden in einer fetten, 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 eine FormView gebunden sind, sind identisch mit denen für eine DetailsView-Erstellung eines DataBound Ereignishandlers, wandeln die DataItem -Eigenschaft in den entsprechenden Objekttyp um, der an das Steuerelement gebunden ist, und bestimmen, wie sie fortfahren. FormView und DetailsView unterscheiden sich jedoch darin, wie die Darstellung ihrer Benutzeroberfläche aktualisiert wird.

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

Um dies zu veranschaulichen, verwenden wir eine FormView, um Produkte wie im vorherigen Beispiel aufzulisten, aber dieses Mal zeigen wir nur den Produktnamen und die vorrätigen Einheiten an, wobei die vorrätigen Einheiten 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 Seite unterhalb der CustomColors.aspx DetailsView eine FormView hinzu, und legen Sie die ID -Eigenschaft auf fest LowStockedProductsInRed. Binden Sie die FormView an das ObjectDataSource-Steuerelement, das im vorherigen Schritt erstellt wurde. Dadurch wird ein ItemTemplate, EditItemTemplateund InsertItemTemplate für die FormView erstellt. Entfernen Sie die EditItemTemplate und, InsertItemTemplate und vereinfachen Sie die ItemTemplate , um nur die ProductName Werte und UnitsInStock einzuschließen, die jeweils in ihren eigenen entsprechend benannten Label-Steuerelementen enthalten sind. Wie bei DetailsView aus dem vorherigen Beispiel aktivieren Sie auch das Kontrollkästchen Paging aktivieren im Smarttag der FormView.

Nach diesen Bearbeitungen sollte das Markup ihres FormView-Steuerelements 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 folgendes ItemTemplate enthält:

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

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

Nach Abschluss des FormView-Markups besteht der nächste Schritt darin, programmgesteuert zu bestimmen, ob der UnitsInStock Wert kleiner oder gleich 10 ist. Dies erfolgt mit der FormView genau auf die gleiche Weise wie mit der DetailsView. Erstellen Sie zunächst einen Ereignishandler für das FormView-Ereignis DataBound .

Abbildung 6: Erstellen des DataBound Ereignishandlers

Wandeln Sie im Ereignishandler die FormView-Eigenschaft DataItem in eine ProductsRow instance um, und bestimmen Sie, ob der UnitsInPrice Wert so ist, dass wir ihn in einer roten Schriftart anzeigen müssen.

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 UnitsInStockLabel-Bezeichnungssteuerelements in der ItemTemplate der FormView

Der letzte Schritt besteht darin, den angezeigten UnitsInStock Wert in einer roten Schriftart zu formatieren, wenn der Wert 10 oder weniger ist. Um dies zu erreichen, müssen wir programmgesteuert auf das UnitsInStockLabel Steuerelement in der ItemTemplate zugreifen und dessen Formateigenschaften so festlegen, dass sein Text 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 Label-Steuerelement zugreifen, dessen ID Wert ist 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 stilbezogenen Eigenschaften nach Bedarf ändern. Wie im vorherigen Beispiel habe ich eine CSS-Klasse mit Styles.css dem Namen LowUnitsInStockEmphasiserstellt. Um diese Formatvorlage auf das Label-Websteuerelement anzuwenden, 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 Formatieren einer Vorlage, die programmgesteuert auf das Websteuerelement FindControl("controlID") mit zugreifen und dann dessen stilbezogene Eigenschaften festlegen, kann auch verwendet werden, wenn TemplateFields in den DetailsView- oder GridView-Steuerelementen verwendet wird. In unserem nächsten Tutorial untersuchen wir TemplateFields.

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

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

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

Formatieren 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 noch einmal als Auffrischung an.

1. Das Ereignis des DataBinding Datenwebsteuerelements wird ausgelöst.
2. Die Daten sind an das Datenwebsteuerelement gebunden.
3. Das Ereignis des DataBound Datenwebsteuerelements wird ausgelöst.

Diese drei einfachen Schritte reichen für die DetailsView und FormView aus, da nur ein einzelner Datensatz angezeigt wird. Für die GridView, in der alle Datensätze angezeigt werden, die an sie gebunden sind (nicht nur der erste), ist Schritt 2 etwas stärker betroffen.

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

• RowCreated wird ausgelöst, nachdem die GridViewRow erstellt wurde
• RowDataBound wird ausgelöst, nachdem der aktuelle Datensatz an den GridViewRowgebunden wurde.

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

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

2. Die Daten sind an die GridView gebunden.

   Für jeden Datensatz in der Datenquelle

   1. Erstellen eines GridViewRow Objekts
   2. Auslösen des Ereignisses RowCreated
   3. Binden Sie den Datensatz an die GridViewRow
   4. Auslösen des Ereignisses RowDataBound
   5. Hinzufügen von Rows zur GridViewRow Auflistung

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

Um das Format der einzelnen GridView-Datensätze 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 CustomColors.aspx den Namen, die Kategorie und den Preis für jedes Produkt auflistet, wobei die Produkte hervorgehoben werden, deren Preis kleiner als 10,00 USD ist und eine gelbe Hintergrundfarbe aufweist.

Schritt 7: Anzeigen von Produktinformationen in einer GridView

Fügen Sie eine GridView unter der FormView aus dem vorherigen Beispiel hinzu, und legen Sie die ID -Eigenschaft auf HighlightCheapProductsfest. Da wir bereits über eine ObjectDataSource verfügen, die alle Produkte auf der Seite zurückgibt, binden Sie die GridView daran. Bearbeiten Sie schließlich die BoundFields von GridView, um nur die Namen, Kategorien und Preise der Produkte einzuschließen. Nach diesen Bearbeitungen sollte das GridView-Markup 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 bis zu diesem Punkt, wenn wir über einen Browser angezeigt werden.

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

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

Wenn der ProductsDataTable an die GridView gebunden ist, werden seine ProductsRow Instanzen aufgelistet und für jede ProductsRow wird eine GridViewRow erstellt. Die GridViewRow's-Eigenschaft DataItem wird dem bestimmten ProductRowzugewiesen, nach dem der GridView-Ereignishandler RowDataBound ausgelöst wird. Um den UnitPrice Wert für jedes Produkt zu bestimmen, das an gridView gebunden ist, müssen wir dann einen Ereignishandler für das GridView-Ereignis RowDataBound erstellen. In diesem Ereignishandler können wir den Wert für den UnitPrice aktuellen GridViewRow überprüfen und eine Formatierungsentscheidung für diese Zeile treffen.

Dieser Ereignishandler kann mit den gleichen Schritten wie mit formView und DetailsView erstellt werden.

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

Wenn Sie den Ereignishandler auf diese Weise erstellen, wird dem Codeteil der ASP.NET Seite automatisch folgender Code 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 über eine Eigenschaft namens verfügt Row. Diese Eigenschaft gibt einen Verweis auf die zurück, die GridViewRow nur datengebunden war. Um auf die ProductsRow instance zuzugreifen, die an die GridViewRow gebunden sind, verwenden wir die DataItem -Eigenschaft wie folgt:

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 die GridView aus verschiedenen Zeilentypen besteht und dass dieses Ereignis für alle Zeilentypen ausgelöst wird. Der GridViewRowTyp eines Typs kann durch seine RowType Eigenschaft bestimmt werden und kann einen der möglichen Werte aufweisen:

• DataRow eine Zeile, die an einen Datensatz aus der GridView gebunden ist DataSource
• EmptyDataRow die Zeile, die angezeigt wird, wenn die GridView leer DataSource ist
• Footer die Fußzeile; angezeigt, wenn die GridView-Eigenschaft ShowFooter auf festgelegt ist True
• Header die Kopfzeile; angezeigt, wenn die ShowHeader-Eigenschaft von GridView auf True (Standard) festgelegt ist
• Pager für GridViews, die paging implementieren, die Zeile, die die Pagingschnittstelle anzeigt
• Separator nicht für gridView verwendet, aber von den Eigenschaften für die RowType DataList- und Repeater-Steuerelemente verwendet, zwei Datenwebsteuerelemente, die in zukünftigen Tutorials erläutert werden

Da die EmptyDataRowZeilen , Header, Footerund Pager keinem DataSource Datensatz zugeordnet sind, haben sie immer den Wert von Nothing für ihre DataItem Eigenschaft. Aus diesem Grund müssen wir vor dem Versuch, mit der aktuellen GridViewRowEigenschaft DataItem zu arbeiten, zuerst sicherstellen, dass wir es mit einer DataRowzu tun haben. Dies kann erreicht werden, indem Sie die GridViewRowEigenschaft 's RowType wie folgt überprüfen:

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: Hervorhebung der Zeile Gelb, wenn der UnitPrice-Wert kleiner als 10,00 USD ist

Der letzte Schritt besteht darin, das gesamte GridViewRow Programm hervorzuheben, wenn der UnitPrice Wert für diese Zeile kleiner als 10,00 USD ist. Die Syntax für den Zugriff auf die Zeilen oder Zellen einer GridView ist identisch mit der 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 auslöst, müssen die datengebundenen GridViewRow Daten der GridView-Auflistung Rows noch hinzugefügt werden. Daher können Sie nicht über den Ereignishandler mithilfe der Rows-Auflistung auf die RowDataBound aktuelle GridViewRow instance zugreifen.

Anstelle von können wir mithilfe e.Rowvon GridViewID.Rows(index)auf den aktuellen GridViewRow instance im RowDataBound Ereignishandler verweisen. Das heißt, um den aktuellen GridViewRow instance aus dem Ereignishandler hervorzuheben, würden RowDataBound wir folgendes verwenden:

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

Anstatt die GridViewRowEigenschaft von 's BackColor direkt festzulegen, bleiben wir bei der Verwendung von CSS-Klassen. 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 diesem Tutorial haben wir erfahren, wie Sie gridView, DetailsView und FormView basierend auf den an das Steuerelement gebundenen Daten formatieren. Um dies zu erreichen, haben wir einen Ereignishandler für die DataBound Ereignisse oder RowDataBound erstellt, bei denen die zugrunde liegenden Daten zusammen mit einer Formatierungsänderung untersucht wurden, falls erforderlich. Um auf die Daten zuzugreifen, die an eine DetailsView oder FormView gebunden sind, verwenden wir die DataItem -Eigenschaft im DataBound Ereignishandler. Für eine GridView-Eigenschaft enthält die Eigenschaft jeder GridViewRow instance DataItem die Daten, die an diese Zeile gebunden sind, die im RowDataBound Ereignishandler verfügbar ist.

Die Syntax zum programmgesteuerten Anpassen der Formatierung des Datenwebsteuerelements hängt vom Websteuerelement und der Anzeige der zu formatierenden Daten ab. Für DetailsView- und GridView-Steuerelemente kann über einen Ordnungsindex auf die Zeilen und Zellen zugegriffen werden. Für die FormView, die Vorlagen verwendet, wird die FindControl("controlID") -Methode häufig verwendet, um ein Websteuerelement in der Vorlage zu suchen.

Im nächsten Tutorial erfahren Sie, wie Sie Vorlagen mit GridView und DetailsView verwenden. Darüber hinaus wird eine weitere Technik zum Anpassen der Formatierung basierend auf den zugrunde liegenden Daten angezeigt.

Viel Spaß beim Programmieren!

Zum Autor

Scott Mitchell, Autor von sieben ASP/ASP.NET-Büchern und Gründer von 4GuysFromRolla.com, arbeitet seit 1998 mit Microsoft-Webtechnologien. Scott arbeitet als unabhängiger Berater, Trainer und Autor. Sein neuestes Buch ist Sams Teach Yourself ASP.NET 2.0 in 24 Stunden. Er kann unter mitchell@4GuysFromRolla.comoder über seinen Blog erreicht werden, der unter http://ScottOnWriting.NETzu finden ist.

Besonderen Dank an

Diese Tutorialreihe wurde von vielen hilfreichen Prüfern überprüft. Leitende Prüfer für dieses Tutorial waren E.R. Gilmore, Dennis Patterson und Dan Jagers. Möchten Sie meine anstehenden MSDN-Artikel lesen? Wenn dies der Fall ist, legen Sie eine Zeile unter abmitchell@4GuysFromRolla.com.

ZurückWeiter