Wyświetlanie danych binarnych w kontrolkach internetowych danych (C#)

Autor: Scott Mitchell

Pobierz plik PDF

W tym samouczku przyjrzymy się opcjom prezentowania danych binarnych na stronie sieci Web, w tym wyświetlania pliku obrazu i udostępniania linku "Pobierz" dla pliku PDF.

Wprowadzenie

W poprzednim samouczku omówiliśmy dwie techniki kojarzenia danych binarnych z bazowym modelem danych aplikacji i użyto kontrolki FileUpload do przekazywania plików z przeglądarki do systemu plików serwera internetowego. Jeszcze nie widzieliśmy, jak skojarzyć przesłane dane binarne z modelem danych. Oznacza to, że po przekazaniu i zapisaniu pliku w systemie plików ścieżka do pliku musi być przechowywana w odpowiednim rekordzie bazy danych. Jeśli dane są przechowywane bezpośrednio w bazie danych, przekazane dane binarne nie muszą być zapisywane w systemie plików, ale muszą zostać wprowadzone do bazy danych.

Zanim przyjrzymy się skojarzeniu danych z modelem danych, najpierw przyjrzyjmy się sposobom dostarczania danych binarnych użytkownikowi końcowemu. Prezentowanie danych tekstowych jest wystarczająco proste, ale jak powinny być prezentowane dane binarne? Zależy to oczywiście od typu danych binarnych. W przypadku obrazów prawdopodobnie chcemy wyświetlić obraz; w przypadku plików PDF, dokumentów programu Microsoft Word, plików ZIP i innych typów danych binarnych, udostępnienie linku pobierania jest prawdopodobnie bardziej odpowiednie.

W tym samouczku przyjrzymy się, jak przedstawić dane binarne wraz ze skojarzonymi z nimi danymi tekstowym przy użyciu kontrolek sieci Web danych, takich jak GridView i DetailsView. W następnym samouczku skupimy się na skojarzeniu przekazanego pliku z bazą danych.

Krok 1. PodanieBrochurePathwartości

Kolumna Picture w Categories tabeli zawiera już dane binarne dla różnych obrazów kategorii. W szczególności kolumna dla każdego rekordu Picture zawiera binarną zawartość ziarnistego, niskiej jakości, 16-kolorowego obrazu bitmapowego. Każdy obraz kategorii ma szerokość 172 pikseli i 120 pikseli wysokości i zużywa około 11 KB. Co więcej, zawartość binarna w Picture kolumnie zawiera 78-bajtowy nagłówek OLE, który należy usunąć przed wyświetleniem obrazu. Te informacje nagłówkowe są obecne, ponieważ baza danych Northwind wywodzi się z aplikacji Microsoft Access. W programie Access dane binarne są przechowywane za pomocą typu danych obiektu OLE, który dołącza ten nagłówek. Na razie zobaczymy, jak usunąć nagłówki z tych obrazów o niskiej jakości, aby wyświetlić obraz. W przyszłym samouczku stworzymy interfejs do aktualizowania kolumny Picture kategorii oraz zastąpimy te obrazy bitmapowe, które używają nagłówków OLE, równoważnymi obrazami JPG bez zbędnych nagłówków OLE.

W poprzednim samouczku pokazano, jak używać kontrolki FileUpload. W związku z tym można dodać pliki broszur do systemu plików serwera internetowego. Nie powoduje to jednak zaktualizowania BrochurePath kolumny Categories w tabeli. W następnym samouczku zobaczymy, jak to zrobić, ale na razie musimy ręcznie podać wartości dla tej kolumny.

W pobraniu tego samouczka w folderze ~/Brochures znajdziesz siedem plików broszur PDF, po jednym dla każdej z kategorii z wyjątkiem owoców morza. Celowo pominąłem dodanie broszury Owoce morza, aby zilustrować sposób obsługi scenariuszy, w których nie wszystkie rekordy mają skojarzone dane binarne. Aby zaktualizować tabelę Categories przy użyciu tych wartości, kliknij prawym przyciskiem myszy Categories węzeł w Eksploratorze serwera i wybierz polecenie Pokaż dane tabeli. Następnie wprowadź wirtualne ścieżki do plików broszur dla każdej kategorii, która ma broszurę, jak pokazano na rysunku 1. Ponieważ nie ma broszury dla kategorii Owoce morza, pozostaw wartość kolumny BrochurePath jako NULL.

Rysunek 1. Ręczne wprowadzanie wartości kolumny Categories tabeli BrochurePath (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Krok 2: Podanie linku do pobrania broszur w widoku siatki

W przypadku BrochurePath wartości podanych dla Categories tabeli możemy utworzyć element GridView zawierający listę każdej kategorii wraz z linkiem umożliwiającym pobranie broszury kategorii. W kroku 4 rozszerzymy ten widok GridView, aby wyświetlić również obraz kategorii.

Zacznij od przeciągnięcia kontrolki GridView z przybornika na projekt strony DisplayOrDownloadData.aspx znajdującej się w folderze BinaryData. Ustaw właściwość GridView na IDCategories i za pomocą tagu inteligentnego GridView wybierz powiązanie go z nowym źródłem danych. W szczególności powiąż go z obiektem ObjectDataSource o nazwie CategoriesDataSource , który pobiera dane przy użyciu CategoriesBLL metody object s GetCategories() .

Rysunek 2. Tworzenie nowego obiektuDataSource o nazwie CategoriesDataSource (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Rysunek 3. Konfigurowanie obiektu ObjectDataSource do używania CategoriesBLL klasy (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Rysunek 4. Pobieranie listy kategorii przy użyciu GetCategories() metody (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Po zakończeniu pracy kreatora Konfigurowanie źródła danych, program Visual Studio automatycznie doda pole BoundField do kontrolki Categories GridView dla pól CategoryID, CategoryName, Description, NumberOfProducts i BrochurePathDataColumn. Przejdź dalej i usuń NumberOfProducts pole BoundField, ponieważ GetCategories() zapytanie metody nie pobiera tych informacji. Usuń również BoundField CategoryID i zmień nazwy BoundField CategoryName oraz BrochurePath na Category i Broszura odpowiednio. Po wprowadzeniu tych zmian deklaratywne znaczniki GridView i ObjectDataSource powinny wyglądać następująco:

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

Wyświetl tę stronę za pośrednictwem przeglądarki (zobacz Rysunek 5). Każda z ośmiu kategorii jest wymieniona. Siedem kategorii z wartościami BrochurePath mają wartość BrochurePath wyświetlaną w odpowiednim polu BoundField. Ryby i owoce morza, które mają NULL wartość dla elementu BrochurePath, wyświetlają pustą komórkę.

Rysunek 5. Każda nazwa kategorii, opis i BrochurePath wartość są wyświetlane (kliknij, aby wyświetlić obraz pełnowymiarowy)

Zamiast wyświetlać tekst BrochurePath kolumny, chcemy utworzyć link do broszury. Aby to osiągnąć, usuń BrochurePath pole BoundField i zastąp je polem HyperLinkField. Ustaw nową właściwość pola HyperLinkField HeaderText do Brochure, jego właściwość Text do View Brochure i jego właściwość DataNavigateUrlFields do BrochurePath.

Rysunek 6. Dodawanie pola HyperLinkField dla BrochurePath

Spowoduje to dodanie kolumny linków do kontrolki GridView, jak pokazano na rysunku 7. Kliknięcie linku Wyświetl broszurę spowoduje wyświetlenie pliku PDF bezpośrednio w przeglądarce lub wyświetlenie monitu użytkownika o pobranie pliku w zależności od tego, czy czytnik plików PDF jest zainstalowany, a ustawienia przeglądarki.

Rysunek 7: Broszura tej kategorii może być obejrzana po kliknięciu linku Wyświetl broszurę (kliknij, aby wyświetlić obraz pełnowymiarowy)

Rysunek 8. Zostanie wyświetlony plik PDF broszury kategorii (kliknij, aby wyświetlić obraz pełnowymiarowy)

Ukrywanie tekstu broszury do wyświetlenia dla kategorii, które nie mają broszury

Jak pokazuje Rysunek 7, obiekt HyperLinkField wyświetla wartość swojej Text właściwości ( Wyświetl broszurę ) dla wszystkich rekordów, niezależnie od tego, czy istnieje nieNULL-wartość dla BrochurePath. Oczywiście, jeśli BrochurePath to NULL, link jest wyświetlany tylko jako tekst, podobnie jak w przypadku kategorii Owoce morza (zapoznaj się z rysunkiem 7). Zamiast wyświetlać tekst "Zobacz Broszurę", warto, aby kategorie bez wartości BrochurePath wyświetlały tekst alternatywny, na przykład "Brak dostępnej broszury".

Aby zapewnić to zachowanie, musimy użyć TemplateField, którego zawartość jest generowana za pośrednictwem wywołania metody strony, która emituje odpowiednie dane wyjściowe na podstawie wartości BrochurePath. Najpierw zapoznaliśmy się z tą techniką formatowania w samouczku Używanie pól szablonów w kontrolce GridView (Using TemplateFields in the GridView Control).

Przełącz pole HyperLinkField w pole szablonu, wybierając BrochurePath pole HyperLinkField, a następnie klikając łącze Konwertuj to pole na pole szablonu w oknie dialogowym Edytowanie kolumn.

Rysunek 9. Konwertowanie pola HyperLinkField na pole szablonu

Spowoduje to utworzenie pola TemplateField z ItemTemplate kontrolką sieci Web HyperLink, której właściwość NavigateUrl jest powiązana z wartością BrochurePath. Zastąp ten znacznik wywołaniem metody GenerateBrochureLink, przekazując wartość elementu BrochurePath:

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

Następnie utwórz metodę protected w klasie będącej częścią ASP.NET, nazwanej GenerateBrochureLink, która zwraca string i akceptuje object jako parametr wejściowy.

protected string GenerateBrochureLink(object BrochurePath)
{
    if (Convert.IsDBNull(BrochurePath))
        return "No Brochure Available";
    else
        return string.Format(@"<a href="{0}">View Brochure</a>", 
            ResolveUrl(BrochurePath.ToString()));
}

Ta metoda określa, czy przekazana object wartość jest bazą danych NULL , a jeśli tak, zwraca komunikat wskazujący, że kategoria nie ma broszury. W przeciwnym razie jeśli istnieje wartość BrochurePath, jest ona wyświetlana w hiperłączu. Należy pamiętać, że jeśli BrochurePath wartość jest obecna, zostanie przekazana do ResolveUrl(url) metody . Ta metoda rozpoznaje przekazany adres URL, zastępując ~ znak odpowiednią ścieżką wirtualną. Na przykład, jeśli aplikacja jest zakorzeniona w /Tutorial55, ResolveUrl("~/Brochures/Meats.pdf") zwróci /Tutorial55/Brochures/Meat.pdf.

Rysunek 10 przedstawia stronę po zastosowaniu tych zmian. Zwróć uwagę, że pole Kategorii BrochurePath owoce morza zawiera teraz tekst Brak dostępnej broszury.

Rysunek 10: Jest wyświetlany tekst "Brak dostępnej broszury" dla tych kategorii bez broszury (kliknij, aby wyświetlić obraz w pełnym rozmiarze)

Krok 3. Dodawanie strony internetowej w celu wyświetlenia obrazu kategorii

Gdy użytkownik odwiedza stronę ASP.NET, otrzymuje kod HTML strony ASP.NET. Otrzymany kod HTML jest tylko tekstem i nie zawiera żadnych danych binarnych. Wszelkie dodatkowe dane binarne, takie jak obrazy, pliki dźwiękowe, aplikacje Macromedia Flash, osadzone wideo Windows Media Player, itp., są dostępne jako oddzielne zasoby na serwerze WWW. Kod HTML zawiera odwołania do tych plików, ale nie zawiera rzeczywistej zawartości plików.

Na przykład w kodzie HTML <img> element jest używany do odwołowania się do obrazu z atrybutem src wskazującym plik obrazu w następujący sposób:

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

Gdy przeglądarka odbierze ten kod HTML, wysyła kolejne żądanie do serwera internetowego w celu pobrania zawartości binarnej pliku obrazu, który następnie jest wyświetlany w przeglądarce. Ta sama koncepcja dotyczy wszystkich danych binarnych. W kroku drugim broszura nie została przekazana do przeglądarki jako część znaczników HTML strony. Zamiast tego renderowany HTML, który dostarczał hiperłącza, po kliknięciu powodował, że przeglądarka zażądała dokument PDF bezpośrednio.

Aby wyświetlić lub zezwolić użytkownikom na pobieranie danych binarnych znajdujących się w bazie danych, musimy utworzyć oddzielną stronę internetową zwracającą dane. W naszej aplikacji istnieje tylko jedno pole danych binarnych przechowywane bezpośrednio w bazie danych jako zdjęcie kategorii. W związku z tym potrzebujemy strony, która po wywołaniu zwraca dane obrazu dla określonej kategorii.

Dodaj nową stronę ASP.NET do BinaryData folderu o nazwie DisplayCategoryPicture.aspx. Aby to zrobić, pozostaw niezaznaczone pole wyboru "Wybierz stronę wzorcową". Ta strona oczekuje wartości CategoryID w łańcuchu zapytania i zwraca dane binarne kolumny z kategorii Picture. Ponieważ ta strona zwraca dane binarne i nic innego, nie wymaga żadnych znaczników w sekcji HTML. Dlatego kliknij kartę Źródło w lewym dolnym rogu i usuń wszystkie znaczniki strony z wyjątkiem dyrektywy <%@ Page %>. Oznacza to, że DisplayCategoryPicture.aspx deklaratywne znaczniki powinny składać się z jednej linii.

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeFile="DisplayCategoryPicture.aspx.cs" 
    Inherits="BinaryData_DisplayCategoryPicture" %>

Jeśli zobaczysz atrybut MasterPageFile w dyrektywie <%@ Page %>, usuń go.

W klasie code-behind strony dodaj następujący kod do programu obsługi zdarzeń Page_Load :

protected void Page_Load(object sender, EventArgs e)
{
    int categoryID = Convert.ToInt32(Request.QueryString["CategoryID"]);
    // Get information about the specified category
    CategoriesBLL categoryAPI = new CategoriesBLL();
    Northwind.CategoriesDataTable categories = 
        categoryAPI.GetCategoryWithBinaryDataByCategoryID(categoryID);
    Northwind.CategoriesRow category = 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 int OleHeaderLength = 78;
    int strippedImageLength = category.Picture.Length - OleHeaderLength;
    byte[] strippedImageData = new byte[strippedImageLength];
    Array.Copy(category.Picture, OleHeaderLength, 
        strippedImageData, 0, strippedImageLength);
    
    Response.BinaryWrite(strippedImageData);
}

Ten kod rozpoczyna się od odczytania CategoryID wartości ciągu zapytania do zmiennej o nazwie categoryID. Następnie dane obrazu są pobierane za pośrednictwem wywołania CategoriesBLL metody s GetCategoryWithBinaryDataByCategoryID(categoryID) klasy. Te dane są zwracane do klienta przy użyciu metody Response.BinaryWrite(data), ale przed wywołaniem Picture należy usunąć nagłówek OLE wartości kolumny. Jest to realizowane przez utworzenie byte tablicy o nazwie strippedImageData , która będzie zawierać dokładnie 78 znaków mniej niż to, co znajduje się w kolumnie Picture . Metoda Array.Copy służy do kopiowania danych od category.Picture pozycji 78 do strippedImageData.

Właściwość Response.ContentType określa typ MIME zwracanej zawartości, aby przeglądarka wiedziała, jak ją renderować. Categories Ponieważ kolumna Picture tabeli jest obrazem mapy bitowej, typ MIME mapy bitowej jest używany tutaj (image/bmp). Jeśli pominięto typ MIME, większość przeglądarek nadal będzie wyświetlać obraz poprawnie, ponieważ może on wywnioskować typ na podstawie zawartości danych binarnych pliku obrazu. Jednak rozważne jest uwzględnienie typu MIME, jeśli jest to możliwe. Aby uzyskać pełną listę typów multimediów MIME, zobacz witrynę internetową urzędu numerów przypisanych do Internetu.

Po utworzeniu tej strony można wyświetlić zdjęcie konkretnej kategorii, odwiedzając stronę DisplayCategoryPicture.aspx?CategoryID=categoryID. Rysunek 11 przedstawia obraz kategorii Napoje, który można wyświetlić z witryny DisplayCategoryPicture.aspx?CategoryID=1.

Rysunek 11. Obraz kategorii napojów jest wyświetlany (kliknij, aby wyświetlić obraz pełnowymiarowy)

Jeśli podczas wizyty DisplayCategoryPicture.aspx?CategoryID=categoryID zostanie wyświetlony wyjątek, który brzmi "Nie można przekonwertować obiektu typu 'System.DBNull' na typ 'System.Byte[]'", mogą to powodować dwie rzeczy. Najpierw kolumna CategoriesPicture tabeli zezwala na NULL wartości. Na stronie DisplayCategoryPicture.aspx przyjęto jednak założenie, że obecna jest wartość nie-NULL. Właściwość PictureCategoriesDataTable nie może być bezpośrednio dostępna, jeśli jej wartość to NULL. Jeśli chcesz zezwolić na NULL wartości dla Picture kolumny, należy uwzględnić następujący warunek:

if (category.IsPictureNull())
{
    // 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 ...
}

Powyższy kod zakłada, że istnieje plik obrazu o nazwie NoPictureAvailable.gif w Images folderze, który chcesz wyświetlić dla tych kategorii bez obrazu.

Ten wyjątek może być również spowodowany tym, że instrukcja metody CategoriesTableAdapterGetCategoryWithBinaryDataByCategoryIDSELECT została przywrócona do listy kolumn głównego zapytania, co może się zdarzyć, jeśli używasz ad-hoc instrukcji SQL i ponownie uruchomisz kreatora dla głównego zapytania TableAdaptera. Upewnij się, że instrukcja GetCategoryWithBinaryDataByCategoryID metody SELECT nadal zawiera kolumnę Picture.

Aby wdrożyć to zachowanie, należy jednak dodać kolumnę PictureLastModified do tabeli Categories aby uchwycić, kiedy ostatnio zaktualizowano kolumnę Picture, a także kod do sprawdzenia nagłówka If-Modified-Since. Aby uzyskać więcej informacji na temat nagłówka If-Modified-Since i przepływu pracy warunkowego GET, zobacz HTTP Conditional GET for RSS Hackers (Warunkowe pobieranie HTTP dla hakerów RSS) oraz A Deeper Look at Performing HTTP Requests in an ASP.NET Page (Dokładne spojrzenie na wykonywanie żądań HTTP na stronie ASP.NET).

Krok 4: Wyświetlanie obrazów kategorii w GridView

Teraz, gdy mamy stronę internetową do wyświetlenia określonego obrazu kategorii, możemy wyświetlić go przy użyciu kontrolki Obraz Web lub elementu HTML <img> wskazującego na DisplayCategoryPicture.aspx?CategoryID=categoryID. Obrazy, których adres URL jest określany przez dane bazy danych, mogą być wyświetlane w elementach GridView lub DetailsView za pomocą pola ImageField. Pole ImageField zawiera właściwości DataImageUrlField i DataImageUrlFormatString, które działają jak właściwości DataNavigateUrlFields i DataNavigateUrlFormatString HyperLinkField.

Rozszerzmy Categories GridView w DisplayOrDownloadData.aspx, dodając pole ImageField, aby pokazać obraz każdej kategorii. Wystarczy dodać pole ImageField i ustawić odpowiednio właściwości DataImageUrlField i DataImageUrlFormatString na CategoryID i DisplayCategoryPicture.aspx?CategoryID={0}. Spowoduje to utworzenie kolumny GridView, która renderuje element <img>, którego atrybut src odwołuje się do DisplayCategoryPicture.aspx?CategoryID={0}, gdzie wartość CategoryID wiersza GridView zastępuje {0}.

Rysunek 12. Dodawanie pola obrazu do kontrolki GridView

Po dodaniu ImageField składnia deklaratywna kontrolki GridView powinna wyglądać następująco:

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

Poświęć chwilę, aby wyświetlić tę stronę w przeglądarce. Zwróć uwagę, jak każdy rekord zawiera teraz obraz kategorii.

Rysunek 13. Obraz kategorii jest wyświetlany dla każdego wiersza (kliknij, aby wyświetlić obraz pełnowymiarowy)

Podsumowanie

W tym samouczku zbadaliśmy, jak przedstawić dane binarne. Sposób prezentowania danych zależy od typu danych. W przypadku plików broszur PDF zaoferowaliśmy użytkownikowi link View Broszura, który po kliknięciu zabrał użytkownika bezpośrednio do pliku PDF. W przypadku zdjęcia kategorii najpierw utworzyliśmy stronę do pobrania i zwrócenia danych binarnych z bazy danych, a następnie użyliśmy tej strony do wyświetlenia zdjęcia każdej kategorii w widoku GridView.

Teraz, gdy przyjrzeliśmy się sposobom wyświetlania danych binarnych, jesteśmy gotowi do sprawdzenia, jak wykonać operacje wstawiania, aktualizowania i usuwania względem bazy danych przy użyciu danych binarnych. W następnym samouczku przyjrzymy się, jak skojarzyć przekazany plik z odpowiednim rekordem bazy danych. W tym samouczku zobaczymy, jak zaktualizować istniejące dane binarne, a także jak usunąć dane binarne po usunięciu skojarzonego rekordu.

Szczęśliwe programowanie!

Informacje o autorze

Scott Mitchell, autor siedmiu książek ASP/ASP.NET i założyciel 4GuysFromRolla.com, współpracuje z technologiami internetowymi firmy Microsoft od 1998 roku. Scott pracuje jako niezależny konsultant, trener i pisarz. Jego najnowsza książka to Sams Teach Yourself ASP.NET 2.0 w 24 godzinach. Można go uzyskać pod adresem mitchell@4GuysFromRolla.com.

Specjalne podziękowania

Ta seria samouczków została omówiona przez wielu przydatnych recenzentów. Główni recenzenci tego samouczka to Teresa Murphy i Dave Gardner. Chcesz przejrzeć nadchodzące artykuły MSDN? Jeśli tak, napisz do mnie na adres mitchell@4GuysFromRolla.com.