在ASP.NET 2.0中操作數(shù)據(jù)之五十三：在Data Web控件顯示二進(jìn)制數(shù)據(jù)

導(dǎo)言：

　　在前面的教程我們闡述了應(yīng)用程序處理二進(jìn)制數(shù)據(jù)的2種模式，以及使用FileUpload 控件從瀏覽器向服務(wù)器文件系統(tǒng)上傳文件。當(dāng)文件上傳并存儲在文件系統(tǒng)里時，應(yīng)在相應(yīng)的數(shù)據(jù)庫記錄里存儲該文件的存儲路徑。

　　我們先來看如何為最終用戶提供二進(jìn)制數(shù)據(jù)。怎樣展示二進(jìn)制數(shù)據(jù)呢？這取決于其類型。比如圖片，我們將其顯示為image；如果是PDFs,Microsoft Word文檔、ZIP文件或其它類型的數(shù)據(jù)，或許提供一個“Download”鏈接比較妥當(dāng)。

　　在本節(jié)，我們看如何在GridView和DetailsView一類的數(shù)據(jù)Web控件里呈現(xiàn)二進(jìn)制數(shù)據(jù)，在后面的教程我們將注意力轉(zhuǎn)向?qū)⑸蟼魑募蛿?shù)據(jù)庫聯(lián)系起來。

第一步：提供BrochurePath值

　　表Categories的Picture列存儲相關(guān)類的圖片信息。具體的講，為16色的低質(zhì)量位圖，大小為172乘120像素，約11 KB。另外還包括一個約78字節(jié)的OLE報頭，在顯示圖片的時候需要將其剝離。為什么會有報頭信息呢？因為數(shù)據(jù)庫Northwind源于微軟的Access數(shù)據(jù)庫。在Access里二進(jìn)制數(shù)據(jù)OLE類型來存儲的，該類型會添加報頭。現(xiàn)在，我們看如何從圖片剝離報頭，以便顯示。在后面的教程我們將創(chuàng)建一個界面，將帶報頭的這些位圖替換為不帶報頭的等價的JPG圖片。

　　前面我們考察了如何使用FileUpload控件，讓我們繼續(xù)為服務(wù)器文件系統(tǒng)添加文件。不過暫時不用更新Categories表的BrochurePath列，那是下一章的內(nèi)容。我們現(xiàn)在需要手工為BrochurePath賦值。

　　在本教程，當(dāng)你下載東西時，可以看到在~/Brochures7文件夾有7個PDF小冊子，每個小冊子對應(yīng)一個種類，Seafood除外。我故意沒為Seafood提供PDF小冊子，以便探討如何處理某些記錄沒有附帶二進(jìn)制數(shù)據(jù)的情況。在服務(wù)器資源管理器里右鍵點擊Categories，選“查看表數(shù)據(jù)”，輸入文件路徑，如圖1所示。由于Seafood類沒有圖片，將其BrochurePath的值設(shè)為“NULL”。 

圖1:手工為表Categories的BrochurePath列鍵入值

第2步：在GridView里添加一個下載鏈接

　　當(dāng)為表Categories的BrochurePath列賦值后，我們準(zhǔn)備創(chuàng)建一個GridView用于展示每個種類，并附帶一個鏈接下載每個類的小冊子。在第4步我們將擴(kuò)展GridView以顯示每個類的圖片。

　　打開BinaryData文件夾的DisplayOrDownloadData.aspx頁面并進(jìn)入設(shè)計模式，從工具箱里拖一個GridView控件到頁面，設(shè)其ID為Categories，從其智能標(biāo)簽選擇綁定到一個名為CategoriesDataSource的ObjectDataSource控件。該控件調(diào)用類CategoriesBLL的GetCategories()方法。

圖2：創(chuàng)建一個名為CategoriesDataSource的ObjectDataSource控件

圖3：設(shè)置ObjectDataSource使用CategoriesBLL類

圖4：調(diào)用GetCategories()方法

　　完成設(shè)置后，Visual Studio自動的為CategoryID, CategoryName, Description, NumberOfProducts和BrochurePath生成BoundField。移除NumberOfProducts，因為GetCategories()方法用不上，同樣將CategoryID移除了。分別把CategoryName和 BrochurePath的HeaderText屬性改為“Category”和“Brochure”。做上述修改后，你的GridView and ObjectDataSource的聲明代碼看起來應(yīng)該像下面的這樣：

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>

　　在瀏覽器查看該頁（如圖5）。列出了所有的8個類，除了Seafood,其它7個類的BoundField列里顯示各自的BrochurePath值。由于Seafood的BrochurePath為NULL值，看起來為空格。

圖5：顯示了每個類別的Name, Description和BrochurePath值

　　與其顯示BrochurePath的text值，不如創(chuàng)建一個指向小冊子的鏈接。移除BrochurePath，代之以HyperLinkField。設(shè)它的HeaderText屬性為“Brochure”,Text屬性為“View Brochure”, DataNavigateUrlFields屬性為“ BrochurePath”。

圖6：添加一個指向BrochurePath的HyperLinkField

　　這樣將在GridView里添加一列鏈接，如圖7所示。點“View Brochure”時要么直接在瀏覽器顯示PDF，要么提示用戶下載該文件。這取決于瀏覽器的設(shè)置以及是否安裝了PDF閱讀器。

圖7：點擊“View Brochure”訪問某類的Brochure

圖8：顯示某類的PDF文件

隱藏?zé)o小冊子圖片的類的“View Brochure” 文本

　　如圖7所示，不管某個類的BrochurePath是否為NULL值，名為BrochurePath的HyperLinkField都呈現(xiàn)為其Text屬性(“View Brochure”) 。當(dāng)然，如果BrochurePath為NULL值，鏈接只顯示為文本（而不帶下劃線），就像Seafood類一樣（見圖7）。與顯示文本“View Brochure”相比，更為可取的是將那些BrochurePath值為空的類顯示為“No Brochure Available”。

　　為達(dá)此目的，我們需要用到TemplateField，使其產(chǎn)生一個基于BrochurePath值的合適的結(jié)果。我們先來看看如何實現(xiàn)，就像在教程之12《在GridView控件中使用TemplateField》一樣。

　　在“編輯列”對話框里選中名為BrochurePath的HyperLinkField，再點“Convert this field into a TemplateField”鏈接，將其轉(zhuǎn)換為TemplateField。 

圖9：將HyperLinkField轉(zhuǎn)換為TemplateField

　　這樣將創(chuàng)建一個TemplateField，其ItemTemplate模板包含一個HyperLink Web控件，該控件的NavigateUrl屬性為BrochurePath值。用下面的代碼將其替換掉：

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

　　然后，在ASP.NET頁面的“后臺代碼”里添加一個protected類型的GenerateBrochureLink方法，它接受一個輸入?yún)?shù)并返回一個字符串。

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()));
}

　　該方法判斷傳入的值是否為NULL。如果是，則返回一個消息指出該類沒有小冊子文件；相反，如果傳入值不為空，將顯示為一個鏈接。我們注意到，當(dāng)BrochurePath值不為空時，將調(diào)用ResolveUrl(url)方法。該方法的作用在于將傳入的相對路徑轉(zhuǎn)換為物理路徑。比如應(yīng)用程序的根目錄在/Tutorial55，ResolveUrl("~/Brochures/Meats.pdf")返回的路徑是/Tutorial55/Brochures/Meat.pdf.

圖10為經(jīng)過上述修改后的界面。我們注意到Seafood類的BrochurePath列現(xiàn)在顯示為文本“No Brochure Available”.

圖10：沒有小冊子的類將顯示為文本“No Brochure Available”

第3步：新增頁面以顯示類的圖片

　　當(dāng)用戶訪問一個ASP.NET頁面時，他將接收該頁面的HTML代碼。HTML代碼僅僅包含了text文本，而并不包含任何的二進(jìn)制數(shù)據(jù)。任何的二進(jìn)制數(shù)據(jù)，比如圖片，音樂文件、Flash程序、Windows Media Player視頻等，以獨立資源的形式存放于服務(wù)器。

　　HTML只包含了這些文件的引用，并不包含這些文件本身。

　　比如，在HTML里img>元素用來引用一張圖片，其src屬性指向該圖片文件，如：
img src="MyPicture.jpg" ... />

　　當(dāng)瀏覽器收到HTML代碼時，它向服務(wù)器發(fā)送獲取圖片的請求并將其顯示在瀏覽器中，該模式對所有的二進(jìn)制數(shù)據(jù)都適用。在第2步中，我們沒有在頁面的HTML標(biāo)記里將小冊子顯示在瀏覽器，而是在HTML標(biāo)記里提供一個超鏈接，當(dāng)點擊它是，導(dǎo)致瀏覽器直接請求PDF文件。

　　為了顯示或允許用戶下載儲存在數(shù)據(jù)庫中的二進(jìn)制數(shù)據(jù)，我們需要另外創(chuàng)建一個頁面，用于從數(shù)據(jù)庫返回所需的數(shù)據(jù)。對我們的應(yīng)用程序而言，由于直接存儲在數(shù)據(jù)庫中的二進(jìn)制數(shù)據(jù)只有一項——類的圖片，所以我們需要一個頁面，當(dāng)需要時從數(shù)據(jù)庫返回某個特定類的圖片。

　　在BinaryData文件夾添加一個DisplayCategoryPicture.aspx頁面，注意不要使用母版頁。該頁面接受一個包含CategoryID值的查詢字符串，返回Picture列的二進(jìn)制數(shù)據(jù)。由于該頁只返回二進(jìn)制數(shù)據(jù)，所以我們不需要頁面的HTML部分有任何代碼。進(jìn)入頁面的“源碼”模式，刪除頁面的所有代碼，只保留%@ Page %>部分。也即：DisplayCategoryPicture.aspx頁面的聲明代碼應(yīng)該只由如下的單獨行構(gòu)成：

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

如果%@ Page %>里包含有MasterPageFile屬性，將其刪除，同時在后臺代碼類的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);
}

　　代碼先讀取查詢字符串的CategoryID值，并對名為categoryID的變量賦值。然后，通過調(diào)用CategoriesBLL類的
GetCategoryWithBinaryDataByCategoryID(categoryID)方法獲取圖片數(shù)據(jù)，再通過Response.BinaryWrite(data)方法向客戶端返回數(shù)據(jù)。不過在此之前先要剝離數(shù)據(jù)的OLE報頭。怎么實現(xiàn)呢？創(chuàng)建一個名為strippedImageData的byte數(shù)組，它包含的字節(jié)剛好比Picture列的數(shù)據(jù)少78。而Array.Copy方法將從category.Picture的第78個字節(jié)開始復(fù)制數(shù)據(jù)（即剛好剝離OLE報頭）。

　　代碼中的Response.ContentType屬性指定了要返回內(nèi)容的MIME type，以便瀏覽器知道如何顯示數(shù)據(jù)。由于Categories表的Picture列存儲的是位圖圖片，故在這里，位圖圖片的MIME type是(image/bmp). 如果你忽視了MIME type，絕大多數(shù)瀏覽器也可以正確的顯示圖像，因為，它們能根據(jù)圖像文件的二進(jìn)制數(shù)據(jù)的內(nèi)容而推斷其類型。即便如此，還是盡可能的使用MIME type。

創(chuàng)建頁面后，可以訪問頁面

DisplayCategoryPicture.aspx?CategoryID=categoryID來查看某個特定類的圖片。圖11顯示的是Beverages類的圖片，頁面為
DisplayCategoryPicture.aspx?CategoryID=1.

圖11：顯示類Beverages的圖片

　　有時候，當(dāng)你訪問DisplayCategoryPicture.aspx?CategoryID=categoryID頁面時，有可能顯示這樣的提示：“Unable to cast object of type 'System.DBNull' to type 'System.Byte[]'”。原因有可能是如下2方面。第一，表Categories的Picture列允許為NULL值，而DisplayCategoryPicture.aspx page頁面總是假定傳入的為非NULL值。當(dāng)Picture為NULL值時，不能直接訪問CategoriesDataTable的Picture屬性。如果你允許Picture為NULL值，添加如下代碼：

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

　　上述代碼假定在Images文件夾里存在名為NoPictureAvailable.gif的圖片，當(dāng)某個類沒有圖片時，就顯示該圖片。

　　另一種情況：當(dāng)你在向?qū)Ю镞x用“使用SQL語句”的模式再次運行主查詢時，它將影響GetCategoryWithBinaryDataByCategoryID方法的SELECT命令返回的列（換句話說，主查詢沒有返回Picture列，再次運行主查詢時將使GetCategoryWithBinaryDataByCategoryID方法也不會返回Picture列）。所以，應(yīng)確保GetCategoryWithBinaryDataByCategoryID方法的SELECT命令返回Picture列。

　　注意：每次訪問DisplayCategoryPicture.aspx頁面時，都會訪問數(shù)據(jù)庫并返回所需的圖片。如果圖片自最近一次訪問以來沒有改變過的話，這樣每次訪問數(shù)據(jù)庫再返回數(shù)據(jù)的做法效率是不高的。幸運的是，HTTP允許使用conditional GETs，這樣的話，客戶端使HTTP請求發(fā)送一個If-Modified-Since HTTP header。If-Modified-Since HTTP header包含了客戶端最近一次從服務(wù)器獲取的數(shù)據(jù)以及時間。如果請求的內(nèi)容沒有發(fā)生改變，服務(wù)器響應(yīng)為Not Modified status code (304)，并不返回請求的內(nèi)容。簡而言之，如果請求的資源自最近一次訪問以來沒發(fā)送改變的話，服務(wù)器將不會回傳該資源，以達(dá)到減輕服務(wù)器負(fù)荷的目的。

第四步：在GridView控件里顯示Category Pictures

　　現(xiàn)在我們有一個web頁面來顯示某個特定種類的圖片的。通過Image Web控件或 HTML img>元素來指向DisplayCategoryPicture.aspx?CategoryID=categoryID頁面，從而達(dá)到顯示該圖片的目的。我們可以在GridView控件或DetailsView控件的 ImageField里顯示圖片。ImageField的DataImageUrlField屬性、DataImageUrlFormatString屬性與HyperLinkField的DataNavigateUrlFields屬性、DataNavigateUrlFormatString屬性用法相似。

　　讓我們對DisplayOrDownloadData.aspx頁面里名為Categories的GridView控件進(jìn)行擴(kuò)充。添加一個ImageField，設(shè)其DataImageUrlField屬性為CategoryID；
DataImageUrlFormatString屬性為DisplayCategoryPicture.aspx?CategoryID={0}。這樣將為GridView增加一列，呈現(xiàn)為一個img>元素，其src屬性為DisplayCategoryPicture.aspx?CategoryID={0},其中{0}將由GridView row的CategoryID值填充。

圖12：為GridView控件添加一個ImageField

添加完成后，你的GridView控件的聲明代碼看起來應(yīng)像下面這樣：

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>

花幾分鐘在瀏覽器里查看該頁面，注意每一行記錄現(xiàn)在都包含一張該類的圖片。

圖13：每一行記錄都顯示一張圖片

總結(jié)：

　　在本節(jié)我們探討了如何顯示二進(jìn)制數(shù)據(jù)，數(shù)據(jù)是如何呈現(xiàn)的取決于它的類型。對PDF小冊子文件來說，我們提供了一個“View Brochure”鏈接，當(dāng)點擊它時，直接將用戶指向PDF小冊子文件。對某個種類的圖片，我們先是創(chuàng)建一個頁面來從數(shù)據(jù)庫獲取并顯示它，然后再在一個GridView控件里顯示圖片。既然看到了如何展示二進(jìn)制數(shù)據(jù)，我們準(zhǔn)備探討如何對其展開插入、更新、刪除操作。接下來的教程我們看如何將上傳文件和相應(yīng)的數(shù)據(jù)庫記錄聯(lián)系起來。然后，再探討如何更新現(xiàn)存的二進(jìn)制數(shù)據(jù)，以及當(dāng)刪除數(shù)據(jù)庫記錄時如何刪除相應(yīng)的二進(jìn)制數(shù)據(jù)。

　　祝編程快樂！

作者簡介

　　本系列教程作者 Scott Mitchell，著有六本ASP/ASP.NET方面的書，是4GuysFromRolla.com的創(chuàng)始人，自1998年以來一直應(yīng)用 微軟Web技術(shù)。大家可以點擊查看全部教程《[翻譯]Scott Mitchell 的ASP.NET 2.0數(shù)據(jù)教程》，希望對大家的學(xué)習(xí)ASP.NET有所幫助。