網頁資料除了文字之外也包括圖片，本範例將介紹如何用資料庫管理一些書籍的封面圖檔與介紹文字超連結等資料。類似一般網路書店的網頁，使用者可以在圖書目錄中點選想看的書，程式會調出資料庫中的圖文資料顯示於網頁有限的空間，這樣就不必一次將所有書籍顯示在一張網頁上面，讓網頁開啟很慢，全部出現後網頁太大讀者還找不到要看的部分。
建立圖檔資料
本範例將使用老師已經出版的幾本書為示範資料，請到老師網站的我寫的書下載相關的圖與介紹文字。
首先開啟一個空的ASP.NET網站，加入一個 images 目錄將幾個書本封面圖檔置入(在網頁上用另存圖片功能下載)。
建立資料庫
參考前面的單元建立一個SQL資料表欄位定義如下：
分別是書名(主索引鍵)、圖檔名稱、介紹文字與超連結，請注意更改資料型別，依可能需求增減字元數目。
資料表命名為Books。
並由老師的網頁拷貝內容輸入資料如下：
其中超連結是老師網頁中點選縮圖時會連到的網頁網址，通常就是該出版公司網站的原書介紹網頁。
書名選單與圖檔顯示設計
加入一張Web Form網頁，置入一個RadioButtonList，將RepeatDirection屬性設為Horizontal(水平)；再加入一個Image物件。
設定RadioButtonList連結Books資料表的"書名"與"圖檔"欄位，書名顯示於外，圖檔名為內部的值(Value)，如下圖：
且AutoPostBack功能必須勾選。
接著雙擊RadioButtonList寫程式如下：
執行程式畫面應該如下，選擇書名會同步顯示圖檔。
取得選取書的完整資訊
被選的書除了書名與圖檔還有說明文字與超連結需要用到卻未讀進網頁，如果使用登入範例的方法將所有帳密身分讀入，以此例來說可能資料太多了！因此在此介紹一個只隨著讀者選取的書讀入一筆資料的方式。先叫入一個GridView物件，設定顯示『Books』資料表，此時設定介面有點變化：
在此必須選上面的ConnectionString，意思是之前的SqlDataSource1已經建立了一個資料連結字串，指向本專案的資料庫，你只需選擇使用這個連結字串加以修改就可以了！到以下介面請選擇"介紹"與"超連結"欄位，然後按WHERE(W)按鍵準備加入篩選資料的條件。
出現以下畫面請依序選擇資料行為圖檔，運算子"="，來源是Control(控制項)，控制項ID是RadioButtonList1，最後別忘了按下加入鍵，看到SQL語句出現在SQL運算式的視窗才算完成動作。這些設定是讓GridView只會顯示RadioButtonList1選擇的書的資料，為何用圖檔而非書名是遷就這個介面只能設定SelectedValue，而之前設定RadioButtonList1的Value就是圖檔。
測試一下程式此時執行畫面大概如下：
下面的資料也會隨著選擇的書而變，但是GridView在此如同登入單元的範例，只是帶入資料之用，接下來請在網頁上Image的下方插入一個HyperLink將Text屬性改為"書名"，再加一個TextBox物件，屬性修改：TextMode=MultiLine, Rows=10, Width=400。整個頁面變成這樣：
顯示介紹文字與超連結
我們的目標是選書之後不僅出現封面圖，還會有說明文字出現在TextBox，超連結會有書名以及應有的超連結功能，此事應該發生在GridView物件資料改變之後，因為每次讀者選書之後就會觸動GridView的更新(DataBind)，更新完(DataBound)舊有資料可用了！所以程式應該寫在GridView1_DataBound事件內：
程式首先看使用者是否已經選擇書名，沒有的話本程式不必執行。
接著是將選擇書名顯示於超連結，取得GridView資料的第二欄為超連結網址，第一欄為說明文字。
接下來應該將GridView設定為隱藏，以免破壞畫面。但是這樣有時會變成連資料也無法讀取，原因我還不清楚，變通的辦法是將GidView的字體顏色變成與網頁背景相同，並將BorderStyle設為None，這樣使用者就看不到它了！
當然這些不便都是因為我們想盡量使用既有的控制項完成工作，事實上本課程稍後會介紹使用ADO.NET語法的程式寫法，那時就可以直接用程式到資料庫直接讀取我們要的資料，不必使用GridView或DataSource物件來做中介了。
最終執行畫面大致如下：
