Freigeben über


Anzeigen von Binärdaten in den Datenwebsteuerelementen (VB)

von Scott Mitchell

PDF herunterladen

In diesem Tutorial sehen wir uns die Optionen zum Darstellen von Binärdaten auf einer Webseite an, einschließlich der Anzeige einer Bilddatei und der Bereitstellung eines "Download"-Links für eine PDF-Datei.

Einführung

Im vorherigen Tutorial haben wir die beiden Techniken zum Zuordnen von Binärdaten zu einem zugrunde liegenden Datenmodell der Anwendung untersucht und das FileUpload-Steuerelement verwendet, um Dateien aus einem Browser in das Dateisystem des Webservers hochzuladen. Wir müssen noch sehen, wie die hochgeladenen Binärdaten dem Datenmodell zugeordnet werden. Das heißt, nachdem eine Datei hochgeladen und im Dateisystem gespeichert wurde, muss ein Pfad zur Datei im entsprechenden Datenbankdatensatz gespeichert werden. Wenn die Daten direkt in der Datenbank gespeichert werden, müssen die hochgeladenen Binärdaten nicht im Dateisystem gespeichert, sondern in die Datenbank eingefügt werden.

Bevor wir uns jedoch mit dem Zuordnen der Daten mit dem Datenmodell befassen, sehen wir uns zunächst an, wie die Binärdaten für den Endbenutzer bereitgestellt werden. Die Darstellung von Textdaten ist einfach genug, aber wie sollten Binärdaten dargestellt werden? Dies hängt natürlich vom Typ der Binärdaten ab. Bei Bildern möchten wir wahrscheinlich das Bild anzeigen; Für PDFs, Microsoft Word Dokumente, ZIP-Dateien und andere Arten von Binärdaten ist die Bereitstellung eines Downloadlinks wahrscheinlich besser geeignet.

In diesem Tutorial erfahren Sie, wie Sie die Binärdaten zusammen mit den zugehörigen Textdaten mithilfe von Datenwebsteuerelementen wie GridView und DetailsView darstellen. Im nächsten Tutorial richten wir unser Augenmerk darauf, der Datenbank eine hochgeladene Datei zuzuordnen.

Schritt 1: Bereitstellen vonBrochurePathWerten

Die Picture Spalte in der Categories Tabelle enthält bereits Binärdaten für die verschiedenen Kategoriebilder. Insbesondere enthält die Picture Spalte für jeden Datensatz den binären Inhalt eines körnigen, qualitativ minderwertigen Bitmapbilds mit 16 Farben. Jedes Kategoriebild ist 172 Pixel breit und 120 Pixel hoch und verbraucht etwa 11 KB. Darüber hinaus enthält der binäre Inhalt in der Picture Spalte einen 78-Byte-OLE-Header, der entfernt werden muss, bevor das Bild angezeigt wird. Diese Headerinformationen sind vorhanden, da die Northwind-Datenbank ihre Wurzeln in Microsoft Access hat. In Access werden Binärdaten mithilfe des OLE Object-Datentyps gespeichert, der für diesen Header verwendet wird. Im Folgenden erfahren Sie, wie Sie die Kopfzeilen aus diesen Bildern mit niedriger Qualität entfernen, um das Bild anzuzeigen. In einem zukünftigen Tutorial erstellen wir eine Schnittstelle zum Aktualisieren einer Kategoriespalte Picture und ersetzen diese Bitmapbilder, die OLE-Header verwenden, durch entsprechende JPG-Bilder ohne die unnötigen OLE-Header.

Im vorherigen Tutorial haben wir erfahren, wie Sie das FileUpload-Steuerelement verwenden. Daher können Sie dem Dateisystem des Webservers Broschürendateien hinzufügen. Dadurch wird die Spalte in der Categories Tabelle jedoch nicht aktualisiertBrochurePath. Im nächsten Tutorial erfahren Sie, wie Sie dies erreichen, aber vorerst müssen wir manuell Werte für diese Spalte angeben.

Im Download dieses Tutorials finden Sie sieben PDF-Broschürendateien im ~/Brochures Ordner, eine für jede der Kategorien mit Ausnahme von Meeresfrüchten. Ich habe absichtlich ausgelassen, eine Seafood-Broschüre hinzuzufügen, um zu veranschaulichen, wie mit Szenarien umgegangen wird, in denen nicht alle Datensätze binärdaten zugeordnet sind. Um die Categories Tabelle mit diesen Werten zu aktualisieren, klicken Sie unter Server Explorer mit der rechten Maustaste auf den Categories Knoten, und wählen Sie Tabellendaten anzeigen aus. Geben Sie dann die virtuellen Pfade zu den Broschürendateien für jede Kategorie ein, die über eine Broschüre verfügt, wie in Abbildung 1 dargestellt. Da es keine Broschüre für die Kategorie Meeresfrüchte gibt, belassen Sie den BrochurePath Wert der Spalte als NULL.

Geben Sie die Werte für die BrochurePath-Spalte der Kategorientabelle manuell ein.

Abbildung 1: Manuelles Eingeben der Werte für die Spalte der Categories Tabelle BrochurePath (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Mit den BrochurePath für die Categories Tabelle bereitgestellten Werten können wir eine GridView erstellen, die jede Kategorie zusammen mit einem Link zum Herunterladen der Broschüre der Kategorie auflistet. In Schritt 4 erweitern wir dieses GridView-Objekt, um auch das Kategoriebild anzuzeigen.

Ziehen Sie zunächst ein GridView-Objekt aus der Toolbox auf die Designer der DisplayOrDownloadData.aspx Seite im BinaryData Ordner. Legen Sie die GridViews ID auf Categories fest, und wählen Sie über das Smarttag von GridView aus, um es an eine neue Datenquelle zu binden. Binden Sie sie insbesondere an eine ObjectDataSource namens CategoriesDataSource , die Daten mithilfe der Methode s GetCategories() des CategoriesBLL Objekts abruft.

Erstellen einer neuen ObjectDataSource mit dem Namen CategoriesDataSource

Abbildung 2: Erstellen einer neuen ObjectDataSource namens CategoriesDataSource (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Konfigurieren der ObjectDataSource für die Verwendung der CategoriesBLL-Klasse

Abbildung 3: Konfigurieren der ObjectDataSource für die Verwendung der CategoriesBLL -Klasse (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Abrufen der Liste der Kategorien mithilfe der GetCategories()-Methode

Abbildung 4: Abrufen der Liste der Kategorien mithilfe der GetCategories() -Methode (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Nach Abschluss des Assistenten zum Konfigurieren von Datenquellen fügt Visual Studio automatisch Categories ein BoundField-Element zur GridView für , CategoryIDCategoryName, DescriptionNumberOfProducts, und BrochurePathDataColumn hinzu. Fahren Sie fort, und entfernen Sie boundField NumberOfProducts , da die Abfrage der GetCategories() Methode diese Informationen nicht abruft. Entfernen Sie außerdem die CategoryID BoundField-Eigenschaft, und benennen Sie die CategoryName Eigenschaften und BrochurePath BoundFields HeaderText in Kategorie bzw. Broschüre um. Nachdem Sie diese Änderungen vorgenommen haben, sollte Das deklarative Markup von GridView und ObjectDataSource wie folgt aussehen:

<asp:GridView ID="Categories" runat="server" 
    AutoGenerateColumns="False" DataKeyNames="CategoryID"
    DataSourceID="CategoriesDataSource" EnableViewState="False">
    <Columns>
        <asp:BoundField DataField="CategoryName" HeaderText="Category" 
            SortExpression="CategoryName" />
        <asp:BoundField DataField="Description" HeaderText="Description" 
            SortExpression="Description" />
        <asp:BoundField DataField="BrochurePath" HeaderText="Brochure" 
            SortExpression="BrochurePath" />
    </Columns>
</asp:GridView>
<asp:ObjectDataSource ID="CategoriesDataSource" runat="server" 
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetCategories" TypeName="CategoriesBLL">
</asp:ObjectDataSource>

Zeigen Sie diese Seite über einen Browser an (siehe Abbildung 5). Jede der acht Kategorien ist aufgeführt. Die sieben Kategorien mit BrochurePath Werten enthalten den Wert, der BrochurePath im jeweiligen BoundField angezeigt wird. Meeresfrüchte, die einen NULL Wert für ihre BrochurePathhaben, zeigt eine leere Zelle an.

Jeder Kategoriename, jede Beschreibung und jeder BrochurePath-Wert ist aufgelistet.

Abbildung 5: Name, Beschreibung und BrochurePath Wert jeder Kategorie sind aufgelistet (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Anstatt den Text der BrochurePath Spalte anzuzeigen, möchten wir einen Link zur Broschüre erstellen. Entfernen Sie hierzu das BrochurePath BoundField, und ersetzen Sie es durch ein HyperLinkField. Legen Sie die neue HyperLinkField-Eigenschaft HeaderText auf Brochure, die Text -Eigenschaft auf Broschüre anzeigen und die - DataNavigateUrlFields Eigenschaft auf BrochurePathfest.

Hinzufügen eines HyperLinkField für BrochurePath

Abbildung 6: Hinzufügen eines HyperLinkField für BrochurePath

Dadurch wird eine Spalte mit Links zu GridView hinzugefügt, wie in Abbildung 7 dargestellt. Wenn Sie auf einen Link Broschüre anzeigen klicken, wird die PDF-Datei entweder direkt im Browser angezeigt oder der Benutzer aufgefordert, die Datei herunterzuladen, je nachdem, ob ein PDF-Reader installiert ist und die Einstellungen des Browsers.

Eine Broschüre der Kategorie kann angezeigt werden, indem Sie auf den Link Broschüre anzeigen klicken.

Abbildung 7: Eine Broschüre der Kategorie kann durch Klicken auf den Link Broschüre anzeigen angezeigt werden (Klicken Sie hier, um ein Bild in voller Größe anzuzeigen)

Die PDF-Broschüre der Kategorie wird angezeigt

Abbildung 8: Die PDF-Datei für die Broschüre der Kategorie wird angezeigt (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Ausblenden des Broschürentexts für Kategorien ohne Broschüre

Wie in Abbildung 7 dargestellt, zeigt das BrochurePath HyperLinkField seinen Text Eigenschaftswert ( Broschüre anzeigen ) für alle Datensätze an, unabhängig davon, ob ein Nicht-WertNULL für BrochurePathvorhanden ist. Wenn BrochurePathNULList, wird der Link natürlich nur als Text angezeigt, wie dies bei der Kategorie Meeresfrüchte der Fall ist (siehe Abbildung 7). Anstatt den Text Broschüre anzeigen anzuzeigen, ist es vielleicht schön, wenn in diesen Kategorien ohne BrochurePath Wert alternativer Text angezeigt wird, z. B. Keine Broschüre verfügbar.

Um dieses Verhalten bereitzustellen, müssen wir ein TemplateField verwenden, dessen Inhalt über einen Aufruf einer Seitenmethode generiert wird, die die entsprechende Ausgabe basierend auf dem BrochurePath Wert ausgibt. Wir haben diese Formatierungsmethode zuerst im Tutorial Verwenden von TemplateFields im GridView-Steuerelement untersucht.

Wandeln Sie das HyperLinkField in ein TemplateField um, indem Sie hyperLinkField BrochurePath auswählen und dann im Dialogfeld Spalten bearbeiten auf den Link Dieses Feld in ein TemplateField konvertieren klicken.

Konvertieren des HyperLinkField in ein TemplateField

Abbildung 9: Konvertieren von HyperLinkField in ein TemplateField

Dadurch wird ein TemplateField mit einem ItemTemplate erstellt, das ein HyperLink-Websteuerelement enthält, dessen NavigateUrl Eigenschaft an den BrochurePath Wert gebunden ist. Ersetzen Sie dieses Markup durch einen Aufruf der -Methode GenerateBrochureLink, und übergeben Sie den Wert von BrochurePath:

<asp:TemplateField HeaderText="Brochure">
    <ItemTemplate>
        <%# GenerateBrochureLink(Eval("BrochurePath")) %>
    </ItemTemplate>
</asp:TemplateField>

Erstellen Sie als Nächstes eine Protected Methode in der ASP.NET CodeBehind-Klasse der Seite namens GenerateBrochureLink , die einen String zurückgibt und als Object Eingabeparameter akzeptiert.

Protected Function GenerateBrochureLink(BrochurePath As Object) As String
    If Convert.IsDBNull(BrochurePath) Then
        Return "No Brochure Available"
    Else
        Return String.Format("<a href="{0}">View Brochure</a>", _
            ResolveUrl(BrochurePath.ToString()))
    End If
End Function

Diese Methode bestimmt, ob der übergebene Object Wert eine Datenbank NULL ist, und gibt in diesem Fall eine Meldung zurück, die angibt, dass in der Kategorie keine Broschüre vorhanden ist. Andernfalls wird, wenn ein BrochurePath Wert vorhanden ist, dieser in einem Link angezeigt. Beachten Sie, dass, wenn der BrochurePath Wert vorhanden ist, er an die ResolveUrl(url) -Methode übergeben wird. Diese Methode löst die übergebene URL auf und ersetzt das ~ Zeichen durch den entsprechenden virtuellen Pfad. Wenn die Anwendung beispielsweise unter /Tutorial55gerootet ist, ResolveUrl("~/Brochures/Meats.pdf") wird zurückgegeben /Tutorial55/Brochures/Meat.pdf.

Abbildung 10 zeigt die Seite, nachdem diese Änderungen angewendet wurden. Beachten Sie, dass im Feld der BrochurePath Kategorie "Meeresfrüchte" jetzt der Text Keine Broschüre verfügbar angezeigt wird.

Der Text Keine Broschüre verfügbar wird für die Kategorien ohne Broschüre angezeigt

Abbildung 10: Der Text, der keine Broschüre verfügbar ist, wird für kategorien ohne Broschüre angezeigt (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Schritt 3: Hinzufügen einer Webseite zum Anzeigen eines Kategoriebilds

Wenn ein Benutzer eine ASP.NET Seite besucht, erhält er den HTML-Code der ASP.NET Seite. Der empfangene HTML-Code ist nur Text und enthält keine Binärdaten. Alle zusätzlichen Binärdaten wie Bilder, Audiodateien, Macromedia Flash Anwendungen, eingebettete Windows Medienwiedergabe Videos usw. sind als separate Ressourcen auf dem Webserver vorhanden. Der HTML-Code enthält Verweise auf diese Dateien, enthält jedoch nicht den tatsächlichen Inhalt der Dateien.

In HTML wird das <img> -Element beispielsweise verwendet, um auf ein Bild zu verweisen, wobei das src Attribut wie folgt auf die Bilddatei verweist:

<img src="MyPicture.jpg" ... />

Wenn ein Browser diesen HTML-Code empfängt, sendet er eine weitere Anforderung an den Webserver, um den binären Inhalt der Bilddatei abzurufen, die dann im Browser angezeigt wird. Das gleiche Konzept gilt für alle Binärdaten. In Schritt 2 wurde die Broschüre nicht als Teil des HTML-Markups der Seite an den Browser gesendet. Vielmehr lieferte der gerenderte HTML-Code Hyperlinks, die beim Klicken dazu führten, dass der Browser das PDF-Dokument direkt anfordere.

Zum Anzeigen oder Herunterladen von Binärdaten, die sich in der Datenbank befinden, müssen wir eine separate Webseite erstellen, die die Daten zurückgibt. Für unsere Anwendung ist nur ein binäres Datenfeld direkt in der Datenbank gespeichert. Daher benötigen wir eine Seite, die beim Aufruf die Bilddaten für eine bestimmte Kategorie zurückgibt.

Fügen Sie dem Ordner eine neue ASP.NET Seite mit dem BinaryData Namen DisplayCategoryPicture.aspxhinzu. Lassen Sie dabei das Kontrollkästchen Seite master auswählen deaktiviert. Diese Seite erwartet einen CategoryID Wert in der Abfragezeichenfolge und gibt die Binärdaten der Spalte dieser Kategorie Picture zurück. Da diese Seite Binärdaten und nichts anderes zurückgibt, benötigt sie kein Markup im HTML-Abschnitt. Klicken Sie daher auf die Registerkarte Quelle in der unteren linken Ecke, und entfernen Sie das gesamte Markup der Seite mit Ausnahme der <%@ Page %> Direktive. Das heißt, DisplayCategoryPicture.aspx das deklarative Markup sollte aus einer einzelnen Zeile bestehen:

<%@ Page Language="VB" AutoEventWireup="true" 
    CodeFile="DisplayCategoryPicture.aspx.vb" 
    Inherits="BinaryData_DisplayCategoryPicture" %>

Wenn das Attribut in der MasterPageFile<%@ Page %> Direktive angezeigt wird, entfernen Sie es.

Fügen Sie der CodeBehind-Klasse der Seite den folgenden Code zum Page_Load Ereignishandler hinzu:

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    Dim categoryID As Integer = _
        Convert.ToInt32(Request.QueryString("CategoryID"))
    ' Get information about the specified category
    Dim categoryAPI As New CategoriesBLL()
    Dim categories As Northwind.CategoriesDataTable = _
        categoryAPI.GetCategoryWithBinaryDataByCategoryID(categoryID)
    Dim category As Northwind.CategoriesRow = categories(0)
    ' Output HTTP headers providing information about the binary data
    Response.ContentType = "image/bmp"
    ' Output the binary data
    ' But first we need to strip out the OLE header
    Const OleHeaderLength As Integer = 78
    Dim strippedImageLength As Integer = _
        category.Picture.Length - OleHeaderLength
    Dim strippedImageData(strippedImageLength) As Byte
    Array.Copy(category.Picture, OleHeaderLength, _
        strippedImageData, 0, strippedImageLength)
    Response.BinaryWrite(strippedImageData)
End Sub

Dieser Code beginnt mit dem Lesen des CategoryID Abfragezeichenfolgenwerts in eine Variable mit dem Namen categoryID. Als Nächstes werden die Bilddaten über einen Aufruf der Methode der CategoriesBLL Klasse s GetCategoryWithBinaryDataByCategoryID(categoryID) abgerufen. Diese Daten werden mithilfe der Response.BinaryWrite(data) -Methode an den Client zurückgegeben, aber bevor dies aufgerufen wird, muss der OLE-Header des Picture Spaltenwerts entfernt werden. Dies wird erreicht, indem ein Byte Array mit dem Namen strippedImageData erstellt wird, das genau 78 Zeichen weniger enthält als das, was sich in der Picture Spalte befindet. Die Array.Copy -Methode wird verwendet, um die Daten ab category.Picture Position 78 nach zu strippedImageDatakopieren.

Die Response.ContentType -Eigenschaft gibt den MIME-Typ des zurückgegebenen Inhalts an, damit der Browser weiß, wie er gerendert werden soll. Da es sich bei der Categories Spalte der Tabelle um Picture ein Bitmapbild handelt, wird hier der Bitmap-MIME-Typ verwendet (image/bmp). Wenn Sie den MIME-Typ weglassen, zeigen die meisten Browser das Bild weiterhin ordnungsgemäß an, da sie den Typ basierend auf dem Inhalt der Binärdaten der Bilddatei ableiten können. Es ist jedoch ratsam, den MIME-Typ nach Möglichkeit einzubeziehen. Eine vollständige Auflistung der MIME-Medientypen finden Sie auf der Website der Internet Assigned Numbers Authority.

Wenn diese Seite erstellt wurde, kann ein bestimmtes Kategoriebild angezeigt werden, indem Sie besuchen DisplayCategoryPicture.aspx?CategoryID=categoryID. Abbildung 11 zeigt das Bild der Kategorie Getränke, das von DisplayCategoryPicture.aspx?CategoryID=1angezeigt werden kann.

Das Bild der Getränkekategorie wird angezeigt

Abbildung 11: Das Bild der Getränkekategorie wird angezeigt (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Wenn Sie beim Besuch DisplayCategoryPicture.aspx?CategoryID=categoryIDeine Ausnahme mit dem Wert Unable to cast object of type 'System.DBNull' in type 'System.Byte[]' erhalten, gibt es zwei Ursachen. Erstens lässt die Spalte der CategoriesPicture Tabelle Werte zu NULL . Die DisplayCategoryPicture.aspx Seite geht jedoch davon aus, dass ein Nicht-WertNULL vorhanden ist. Auf die PictureCategoriesDataTable Eigenschaft von kann nicht direkt zugegriffen werden, wenn sie über einen NULL Wert verfügt. Wenn Sie Werte für die Picture Spalte zulassen NULL möchten, sollten Sie die folgende Bedingung einschließen:

If category.IsPictureNull() Then
    ' Display some "No Image Available" picture
    Response.Redirect("~/Images/NoPictureAvailable.gif")
Else
    ' Send back the binary contents of the Picture column
    ' ... Set ContentType property and write out ...
    ' ... data via Response.BinaryWrite ...
End If

Im obigen Code wird davon ausgegangen, dass es eine Bilddatei mit dem Namen NoPictureAvailable.gif im Ordner gibt, die Images Sie für diese Kategorien ohne Bild anzeigen möchten.

Diese Ausnahme kann auch verursacht werden, wenn die CategoriesTableAdapter s-Methode GetCategoryWithBinaryDataByCategoryID s-Anweisung SELECT in die Spaltenliste der Standard Abfrage zurückgesetzt wurde. Dies kann passieren, wenn Sie Ad-hoc-SQL-Anweisungen verwenden und sie den Assistenten für die Standard-Abfrage von TableAdapter erneut ausführen. Vergewissern Sie sich, dass die GetCategoryWithBinaryDataByCategoryID -Anweisung der SELECT Methode weiterhin die Picture Spalte enthält.

Hinweis

Bei DisplayCategoryPicture.aspx jedem Besuch von wird auf die Datenbank zugegriffen, und die angegebenen Bilddaten der Kategorie werden zurückgegeben. Wenn sich das Bild der Kategorie seit dem letzten Anzeigen des Benutzers nicht geändert hat, ist dies jedoch verschwendeter Aufwand. Glücklicherweise ermöglicht HTTP bedingte GETs. Bei einem bedingten GET sendet der Client, der die HTTP-Anforderung ausgibt, einen If-Modified-Since HTTP-Header , der das Datum und die Uhrzeit angibt, zu der der Client diese Ressource zuletzt vom Webserver abgerufen hat. Wenn sich der Inhalt seit diesem angegebenen Datum nicht geändert hat, antwortet der Webserver möglicherweise mit einem nicht geänderten status Code (304) und verzichtet auf das Zurücksenden des angeforderten Ressourceninhalts. Kurz gesagt, diese Technik befreit den Webserver davon, Inhalte für eine Ressource zurücksenden zu müssen, wenn sie seit dem letzten Zugriff des Clients nicht geändert wurden.

Um dieses Verhalten zu implementieren, müssen Sie jedoch der Tabelle eine PictureLastModified Spalte hinzufügen, die Categories erfasst werden soll, wann die Picture Spalte zuletzt aktualisiert wurde, sowie Code, um nach dem If-Modified-Since Header zu suchen. Weitere Informationen zum If-Modified-Since Header und zum bedingten GET-Workflow finden Sie unter HTTP Conditional GET for RSS Hackers und A More Look at Performing HTTP Requests in an ASP.NET Page.

Schritt 4: Anzeigen der Kategoriebilder in einer GridView

Nachdem wir nun über eine Webseite zum Anzeigen eines bestimmten Kategoriebilds verfügen, können wir sie mithilfe des Image-Websteuerelements oder eines HTML-Elements <img> anzeigen, das auf DisplayCategoryPicture.aspx?CategoryID=categoryIDzeigt. Bilder, deren URL durch Datenbankdaten bestimmt wird, können in gridView oder DetailsView mithilfe von ImageField angezeigt werden. ImageField enthält DataImageUrlField Eigenschaften und DataImageUrlFormatString , die wie die HyperLinkField-Eigenschaften DataNavigateUrlFields und DataNavigateUrlFormatString -Eigenschaften funktionieren.

Erweitern Sie die Categories GridView in DisplayOrDownloadData.aspx , indem Sie ein ImageField hinzufügen, um jedes Kategoriebild anzuzeigen. Fügen Sie einfach imageField hinzu, und legen Sie dessen DataImageUrlField Eigenschaften und DataImageUrlFormatString auf CategoryID bzw DisplayCategoryPicture.aspx?CategoryID={0}. fest. Dadurch wird eine GridView-Spalte erstellt, die ein <img> Element rendert, dessen src Attributverweise verweist DisplayCategoryPicture.aspx?CategoryID={0}, wobei {0} durch den Wert der GridView-Zeile CategoryID ersetzt wird.

Hinzufügen eines ImageFields zur GridView

Abbildung 12: Hinzufügen eines ImageField zur GridView

Nach dem Hinzufügen des ImageField sollte die deklarative Syntax Ihrer GridView wie folgt aussehen:

<asp:GridView ID="Categories" runat="server" AutoGenerateColumns="False" 
    DataKeyNames="CategoryID" DataSourceID="CategoriesDataSource" 
    EnableViewState="False">
    <Columns>
        <asp:BoundField DataField="CategoryName" HeaderText="Category" 
            SortExpression="CategoryName" />
        <asp:BoundField DataField="Description" HeaderText="Description" 
            SortExpression="Description" />
        <asp:TemplateField HeaderText="Brochure">
            <ItemTemplate>
                <%# GenerateBrochureLink(Eval("BrochurePath")) %>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:ImageField DataImageUrlField="CategoryID" 
            DataImageUrlFormatString="DisplayCategoryPicture.aspx?CategoryID={0}">
        </asp:ImageField>
    </Columns>
</asp:GridView>

Nehmen Sie sich einen Moment Zeit, um diese Seite über einen Browser anzuzeigen. Beachten Sie, dass jeder Datensatz jetzt ein Bild für die Kategorie enthält.

Das Bild der Kategorie wird für jede Zeile angezeigt.

Abbildung 13: Das Kategoriebild wird für jede Zeile angezeigt (Klicken Sie, um das Bild in voller Größe anzuzeigen)

Zusammenfassung

In diesem Tutorial haben wir die Darstellung von Binärdaten untersucht. Wie die Daten dargestellt werden, hängt vom Typ der Daten ab. Für die PDF-Broschürendateien haben wir dem Benutzer einen Link Broschüre anzeigen angeboten, der den Benutzer beim Klicken direkt zur PDF-Datei führte. Für das Bild der Kategorie haben wir zuerst eine Seite erstellt, um die Binärdaten aus der Datenbank abzurufen und zurückzugeben, und dann haben wir diese Seite verwendet, um jedes Kategoriebild in einer GridView anzuzeigen.

Nachdem wir uns nun mit der Anzeige von Binärdaten beschäftigt haben, können wir untersuchen, wie Einfügungen, Aktualisierungen und Löschvorgänge für die Datenbank mit den Binärdaten ausgeführt werden können. Im nächsten Tutorial wird erläutert, wie Sie eine hochgeladene Datei dem entsprechenden Datenbankdatensatz zuordnen. Im Tutorial danach erfahren Sie, wie Sie vorhandene Binärdaten aktualisieren und die Binärdaten löschen, wenn der zugehörige Datensatz entfernt wird.

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. Hauptprüfer für dieses Tutorial waren Teresa Murphy und Dave Gardner. Möchten Sie meine anstehenden MSDN-Artikel lesen? Wenn dies der Fall ist, legen Sie eine Zeile unter abmitchell@4GuysFromRolla.com.