css&javascript 連製資料庫撈出圖片(datalist)

這次一樣要製作連結資料庫
下面2個圖是從yahoo抓來的
當然yahoo不太可能是這樣製作
不過我預期可以呈現類似的效果

圖1

圖2

這是課堂上由老師帶領製作出類似的成果：

當然沒辦法像yahoo那麼多變化
但也是由此此延伸出來
就不做影片了，上一篇用影片紀錄
後來發現效率不好，NG又要重錄
錄好後又要檢查，想想還是用文字加圖片紀錄好了

DataList元件
紀錄一下它的屬性：

RepeatColumns　重複欄數，像第1張是3欄，第2張是1欄
RepeatDircetion　重複方向，可設定垂直或水平，第1張是水平，第2張是垂直
最後利用「編輯樣版」，放入表格排一下版就好

再來是資料部份，裡面其實是有3個Table選出資料欄位
這部份要用到SQL Server的Join語法
很屌的是這些元件微軟都已經想好了

在資料連結時就可以利用查詢產生器
不用寫任何語法，第2張圖中join是用拉的(有像Access)
滑鼠點一點就可以完成想要的查詢

最後也是最重要一點就是把圖片從資料庫裡撈出來
需利用選出來的產品編號再去資料庫把圖撈出
在網頁的原始碼要寫入：

<td style="width: 150px">
      <img src="getProductImage.ashx?Pid=<%# Eval("產品編號") %>" /></td>

如此他就會去找getProductImage.ashx?Pid =撈出的產品編號值
ashx是泛型處理常式，可以應用範圍很多
例如針對下載寫好後，全網站都可用此泛型
本例中是寫對產品編號回傳對應的圖片
接著getProductImage.ashx的撰寫：

public void ProcessRequest(HttpContext context)
{
    //取得網頁傳來的值
    int productid = int.Parse(context.Request.QueryString["Pid"]);
    //連結資料庫
    SqlConnection conn = new SqlConnection("server=localhost;database=中文北風;UID=SQLUser;PWD=1234");
    //SQL指令
    SqlCommand cmd = new SqlCommand("SELECT 產品圖片 FROM 產品資料 WHERE 產品編號=@Pid", conn);
    //將id 設為cmd 的查詢
    cmd.Parameters.Add("Pid", SqlDbType.Int).Value = productid;
    conn.Open();
    //取得的結果轉成byte陣列
    byte[] img = cmd.ExecuteScalar() as byte[];
    cmd.Dispose();
    conn.Close();
    //寫回去
    context.Response.OutputStream.Write(img, 0, img.Length);
}