一、建立一個gridview控制元件，並新增列。

其中ImageField就是顯示圖片的列，屬性DataImagteUrlField繫結為圖片的路徑,也就是資料庫儲存圖片路徑的欄位名。

二、建立一個用來顯示大圖片的div 以及Img控制元件。以及css樣式、js。

Html

 <div id="Show_img_Max" onclick="divClick()">
            <div>
                <img src="" class="Show_imgStyle" />
            </div>
 </div>
 

css樣式

* {
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        #form1 > .divMain {
            margin: 0 auto;
            padding-top: 150px;
            width: 800px;
            height: 500px;
            text-align: center;
        }

        #Show_img_Max {
            position: absolute;
            top: 1px;
            display: none;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }

            #Show_img_Max > div {
                margin: 100px auto;
                width: 550px;
                height: 350px;
            }

            #Show_img_Max .Show_imgStyle {
                width: 550px;
                height: 350px;
            }
 

js

  function CellClick(ImgUrl) {
            $(".Show_imgStyle").attr("src", ImgUrl);
            $("#Show_img_Max").css("display", "block");
        }
        function divClick() {
            $("#Show_img_Max").css("display", "none");
        }

三、新增一個gridview行資料繫結後激發事件（RowDataBound），在該事件寫程式碼。

 protected void grdview_test_RowDataBound(object sender, GridViewRowEventArgs e)
    {
       //判斷是否為資料行
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            //設定圖片的寬、高度
            (e.Row.Cells[3].Controls[0] as Image).Width = 70;
            (e.Row.Cells[3].Controls[0] as Image).Height = 50;
            //獲取當前行的圖片路徑
            string ImgUrl = (e.Row.Cells[3].Controls[0] as Image).ImageUrl;
            //給帶圖片的單元格新增點選事件
            e.Row.Cells[3].Attributes.Add("onclick", e.Row.Cells[3].ClientID.ToString() 
                +".checked=true;CellClick('" + ImgUrl+ "')");
        }
    }

四、資料方面就自己添加了。效果圖如下：

顯示：

點選圖片後：

然後點選其他地方或者圖片就恢復原狀。

由於我是第一次寫部落格，所以有什麼不好的地方請指出，我會努力改正，相信以後會寫的更好，謝謝。