ASP.NET:就是喜歡Web Form，就是喜歡拖控制項（二）

ASP.NET:就是喜歡Web Form，就是喜歡拖控制項（一）
ASP.NET:就是喜歡Web Form，就是喜歡拖控制項（二）
ASP.NET:就是喜歡Web Form，就是喜歡拖控制項（三）
ASP.NET:就是喜歡Web Form，就是喜歡拖控制項（四）
ASP.NET:就是喜歡Web Form，就是喜歡拖控制項（五）

這一篇...... 拖了太久了 原來打算叫FormView提示 後來覺得內容其實不全是FormView相關，就改成了現在這個名字。在這個ASP.NET MVC流行的時候算是一種反抗？

第一篇實在太基礎，也沒好意思發上首頁，大家可以到此處看看：ASP.NET:就是喜歡Web Form，就是喜歡拖控制項（一）

咱們言歸正傳，書接上回，上一篇示範了如何利用VS自動產生要提交的表單。這裡我們來考慮一個比較複雜的情況，帶上傳圖片的表單以及在WebForm中顯示資料庫裡儲存的圖片。

回憶一下這個資料庫表：

commodity 商品

id	name	company_id
1	包子	3
2	蒸餃	3
3	人才	1
4	MVP	1
5	Window 7	2

 

既然是商品，每種商品配張圖片是再正常不過的事情了，對於類似的需求，很多人喜歡把圖片存到一起，然後用一個GUID作為檔案名稱，資料庫裡存圖片檔案的GUID。然而隨之而來的增、刪、改、查備份都變得異常困難，這也太麻煩了！有沒有更好的方法呢？

其實大部分資料庫都是有Image這個欄位類型的,我們完全可以把圖片存入資料庫中。我們期望的表結構是這樣的：

id	name	company_id	image
1	包子	3	[bin]
2	蒸餃	3	[bin]
3	人才	1	[bin]
4	MVP	1	[bin]
5	Window 7	2	[bin]

建表:

我們按照上一篇的方法，從這個資料表建立一個FormView，並且將Default Mode 設定為Insert，結果如：

好了，我們自動產生了一個插入資料的表單，但是很遺憾，image欄位產生了TextBox，指望使用者把圖片內容copy下來輸入到文字框裡顯然是極其不現實的想法。我們希望通過上傳的方式來提交圖片，那麼，我們來編輯Insert模板，改為使用上傳控制項。

這是TextBox的資料繫結方式，TextBox的Text被綁定到了image欄位。

然而很遺憾,當我們放一個FileUpload在這裡時，只出現了2個Bindable屬性，即使選中Show all properties，也沒有我們想要的屬性。

無計可施了嗎？當然不是！我們還可以直接改ASP.NET代碼。找到相應的代碼先:

然後把 FileBytes屬性綁定到image欄位就好了：

<asp:FileUpload ID="imageFileUpload" runat="server" FileBytes='<%# Bind("image") %>'/>

 

然後我們把程式運行起來看看，按照原計劃插入一個新商品種類：包子。

點擊運行,我們卻得到一個錯誤：SQL變數類型與欄位不匹配。

其實我們只要把資料來源裡面的image參數類型限制刪掉就好了：

好了,做完之後,資料看起來可以正確插入了。

 

 

 

 

好了，我們現在已經成功地將圖片存入了資料庫，但是存的到底對不對還有待證實,況且把圖片存起來容易,顯示出來難。

我們嘗試用一個GridView來顯示我們的表格，然而自動產生的表格會忽略掉image欄位，看來要想顯示圖片還是要自己想辦法。

 

首先我們來分析，HTML中圖片要以單獨的URL形式存在，所以我們不可能在同一個頁面上做什麼手腳。我們的圖片URL的內容，就是對應商品的image欄位裡的二進位值了。所以我們需要一個類似圖片Service的頁面。這裡我們建立一個叫做CommodityImage.aspx的頁面。

當然我們不能為表中每一行都建立一個頁面，所以CommodityImage.aspx還應該能夠處理post或者get來的參數，根據資料項目的主鍵來查詢資料表，我們只要把這個頁面的response流替換成資料表中image欄位的內容就好了。

那麼這裡需要用C#來查詢資料庫嘛？當然不！為了盡量偷懶，我們這裡還有些小技巧：P

我們要把頁面裡面零零碎碎的HTMl和ASP.NET標籤先全都去掉，只留下

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CommodityImage.aspx.cs" Inherits="WebForm.CommodityImage" %>

然後我們切換到設計檢視，拖一個SqlDataSource上去！然後配置這個DataSource，注意我們要的是只是image欄位，而且必須從post或者get來的參數（這裡我們還是用post來的）來得到id，所以我們要加上查詢條件：

點擊where之後，配置方法

配置好資料來源之後，我們就可以在Page_load裡面用下面代碼來替換Response資料流：

Response.Clear();
Response.ContentType = "image/jpeg";
foreach (System.Data.DataRowView record in SqlDataSource1.Select(DataSourceSelectArguments.Empty))
{
    Response.BinaryWrite(record[0] as Byte[]);
}

這裡我們把SqlDataSource寫到ASP.NET標記中，讓IDE替我們完成了大部分工作，所以只要用6行有效代碼就可以顯示圖片了，可以在頁面url後面跟個?id=1看看效果，就是我們剛才上傳的圖片。

好了有了這個圖片頁面，我們在GridView裡面把它顯示出來，首先我們給Grid添加一個模板列：

然後就可以編輯這個列的模板了，既然是顯示圖片，我們就拖一個image上去，現在我們要把這個image的url指向我們剛才寫好的圖片服務頁面，而且要把id作為QueryString傳過去。具體做法看圖便知，無需多言：

 

最後效果,看起來不錯吧：（圖中上傳的樣本圖片如果侵犯了您的權利，請與我聯絡，我將第一時間處理，嘿嘿）

 

下一篇或者幾篇的內容可能包括：

自動填寫欄位：提交時間、提交使用者ID、自增的主鍵、從session中安全地取得資訊

多表查詢：如何把引用的外鍵變成一個下拉式清單？

融合用戶端技術：用CSS讓頁面變得美觀 用用戶端JavaScript增加互動 看起來簡陋的頁面和大小不一淩亂的圖片會立刻不一樣

 

PS.關於這個系列

其實雖然一直在拖拖拽拽，但我並不是真的只是想分享一些拖拖拽拽的技巧，除了作為小項目中偷懶的小招數，我希望讀過這幾篇隨筆的您能夠更多思考WebForm究竟是怎樣的一種編程模型。其實大部分時候，我們的勞累並非來自商務邏輯的複雜，而是來自錯誤的設計。Web應用程式涉及SQL、ASP.NET標記、C#、HTML、CSS、JavaScript等各個層次不同用途的語言，把商務邏輯和功能寫在哪個層次其實對工作量的影響非常巨大。

這個系列來源於以前幫朋友做過的一個小項目，是一個類似進銷存的系統、還有統計管理等一些功能，而其中唯一的一處C#代碼就是上面提到的5行C#，我希望能分享這段有趣的開發經曆，讓大家看到WebForm的一個不同的側面。