ASP.NET GridView 顯示資料庫圖片：HttpHandler 完整實作

問題背景

`GridView` 無法直接繫結資料庫中的二進位圖片資料（`varbinary`/`image` 欄位）。解決方案：建立獨立的 `HttpHandler` (`.ashx`) 專責輸出圖片串流，`GridView` 中使用 `` 控制項指向該 Handler 帶入圖片 ID。

資料庫結構

CREATE TABLE Images (
 ID INT IDENTITY(1,1) PRIMARY KEY,
 ImageName NVARCHAR(100),
 ImageData VARBINARY(MAX),
 ContentType NVARCHAR(50)
)

步驟 1：上傳圖片存入資料庫

<asp:FileUpload ID="fuImage" runat="server" /><br />
<asp:TextBox ID="txtImageName" runat="server" /><br />
<asp:Button ID="btnUpload" runat="server" Text="上傳" OnClick="btnUpload_Click" />

protected void btnUpload_Click(object sender, EventArgs e)
{
 if (!fuImage.HasFile) return;

 Stream fs = fuImage.PostedFile.InputStream;
 int len = fuImage.PostedFile.ContentLength;
 string name = txtImageName.Text;
 string type = fuImage.PostedFile.ContentType;

 byte[] data = new byte[len];
 fs.Read(data, 0, len);

 string connStr = ConfigurationManager.ConnectionStrings["ConnStr"].ConnectionString;
 using (SqlConnection conn = new SqlConnection(connStr))
 {
 string sql = "INSERT INTO Images (ImageName, ImageData, ContentType) VALUES (@Name, @Data, @Type)";
 using (SqlCommand cmd = new SqlCommand(sql, conn))
 {
 cmd.Parameters.AddWithValue("@Name", name);
 cmd.Parameters.AddWithValue("@Data", data);
 cmd.Parameters.AddWithValue("@Type", type);
 conn.Open();
 cmd.ExecuteNonQuery();
 }
 }
}

步驟 2：建立 ImageHandler.ashx

<%@ WebHandler Language="C#" Class="ImageHandler" %>
using System;
using System.Web;
using System.Data.SqlClient;
using System.Configuration;

public class ImageHandler : IHttpHandler
{
 public void ProcessRequest(HttpContext context)
 {
 string idStr = context.Request.QueryString["id"];
 if (string.IsNullOrEmpty(idStr)) return;

 string connStr = ConfigurationManager.ConnectionStrings["ConnStr"].ConnectionString;
 using (SqlConnection conn = new SqlConnection(connStr))
 {
 string sql = "SELECT ImageData, ContentType FROM Images WHERE ID = @ID";
 using (SqlCommand cmd = new SqlCommand(sql, conn))
 {
 cmd.Parameters.AddWithValue("@ID", idStr);
 conn.Open();
 using (SqlDataReader dr = cmd.ExecuteReader())
 {
 if (dr.Read())
 {
 context.Response.ContentType = dr["ContentType"].ToString();
 context.Response.BinaryWrite((byte[])dr["ImageData"]);
 }
 }
 }
 }
 }

 public bool IsReusable => false;
}

步驟 3：GridView 繫結與顯示

<asp:GridView ID="gvImages" runat="server" AutoGenerateColumns="False" DataKeyNames="ID">
 <Columns>
 <asp:BoundField DataField="ImageName" HeaderText="圖片名稱" />
 <asp:TemplateField HeaderText="預覽">
 <ItemTemplate>
 <asp:Image ID="imgPreview" runat="server" 
 ImageUrl='<%# "ImageHandler.ashx?id=" + Eval("ID") %>' 
 Width="100" Height="100" />
 </ItemTemplate>
 </asp:TemplateField>
 </Columns>
</asp:GridView>

protected void Page_Load(object sender, EventArgs e)
{
 if (!IsPostBack) BindGrid();
}

void BindGrid()
{
 string connStr = ConfigurationManager.ConnectionStrings["ConnStr"].ConnectionString;
 using (SqlConnection conn = new SqlConnection(connStr))
 {
 string sql = "SELECT ID, ImageName FROM Images";
 using (SqlDataAdapter da = new SqlDataAdapter(sql, conn))
 {
 DataTable dt = new DataTable();
 da.Fill(dt);
 gvImages.DataSource = dt;
 gvImages.DataBind();
 }
 }
}

進階優化

• 快取：在 Handler 中設定 `Response.Cache.SetCacheability(HttpCacheability.Public)`、`SetMaxAge`、`SetETag`，減少資料庫查詢。
• 縮圖：上傳時同步產生縮圖存入另一欄位，或 Handler 即時縮放（`System.Drawing`），預覽更快。
• 安全性：驗證圖片類型、限制檔案大小、防止惡意檔案上傳。
• 效能：大量圖片考慮儲存於檔案系統/Blob Storage，資料庫僅存路徑。

總結

HttpHandler 專職輸出二進位內容，是 ASP.NET 顯示資料庫圖片的標準模式。結合 GridView TemplateField，即可輕鬆建構圖片資料庫瀏覽介面。