演練GridView控件顯示目錄圖片

本博文，將帶你學習使用GridView控件顯示站點目錄的圖片。如果你已經學會怎樣做圖片縮略圖；怎樣應用接口來實現統一的屬性，方法或函數；怎樣動態加載用戶控件，等等。就不必往下看了。因為此篇博文就是演練這些方面的內容。

在站點上，准備好一些圖片，此次Insus.NET准備的是太陽系中幾顆星球的圖片，稍后就是在GridView控件顯示這些圖片。



對了，現在我們做開發，都是面向對象編程，為了演示好這個例子，Insus.NET決定先創建一個對象，在App_Code目錄中，創建一個Insus.NET.SolarSystem類別，大約如下，只有兩個屬性StarName，Picture，以及一個帶參數的構造函數。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

/// <summary>
/// Summary description for SolarSystem
/// </summary>
namespace Insus.NET
{
    public class SolarSystem
    {
        private string _StarName;
        private string _Picture;

        public string StarName
        {
            get { return _StarName; }
            set { _StarName = value; }
        }

        public string Picture
        {
            get { return _Picture; }
            set { _Picture = value; }
        }
        
        public SolarSystem()
        {
            //
            // TODO: Add constructor logic here
            //
        }

        public SolarSystem(string starName,string picture)
        {
            this._StarName = starName;
            this._Picture = picture;
        }
    }
}

接下來，我們為這個類別添加數據，讓其由抽象的對象變為真實有生命的對象，產生幾個，並把每個對象存放在List<T>集合中。

 List<SolarSystem> GetData()
    {
        List<SolarSystem> ss = new List<SolarSystem>();
        ss.Add(new SolarSystem("太陽", "太陽.jpg"));
        ss.Add(new SolarSystem("水星", "水星.jpg"));
        ss.Add(new SolarSystem("金星", "金星.jpg"));
        ss.Add(new SolarSystem("地球", "地球.jpg"));
        ss.Add(new SolarSystem("火星", "火星.jpg"));
        return ss;
    }

有了數據，數據展現出來，還是先用最簡單的方法來顯示吧，從簡單入手，最方便與快捷。在網點中創建一個網頁，如Default.aspx吧，打開.aspx網頁之后，拉一個GridView控件，並自定義模版來顯示數據

去.aspx.cs為GridView控件綁定數據。

預覽一下：




顯示圖片，就這樣簡單。如果這樣交給客戶，有些客戶或許接受，有些客戶客戶也許不能接受，他們不想一開始顯示時，就顯示圖片原本尺寸，而是先顯示縮略圖。縮略圖而已嘛，這也簡單，Insus.NET的博客中，也提供有實現縮略圖的方法，而且有兩個版本呢。
http://www.cnblogs.com/insus/articles/2060601.html

不過，此次，Insus.NET想使用另外的版本。哇這樣多版本，是否可以做到統一的標准？能有屬性，方法或是函數方面的統一，那只有接口了。下面是本演示而寫的一個接口：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

/// <summary>
/// Summary description for IThumbnail
/// </summary>
namespace Insus.NET
{
    public interface IThumbnail
    {
        string ThumbnailImageUrl { get; set; }
        int ThumbnailWidth { get; set; }
        int ThumbnailHeight { get; set; }
    }
}

由於我們要實現縮略圖，因此我們要做到圖片處理，而不是單單一個Image控件只可。因此，Insus.NET設計一個用戶控件Thumbnail.ascx來替代Image控件。
這個用戶控件的ascx頁面，只拉放一個asp:Image控件：

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Thumbnail.ascx.cs" Inherits="Thumbnail" %>
<asp:Image ID="Image1" runat="server" />

在.ascx.cs在實作上面的接口：



縮略圖處理：


OK,現在我們需要稍改一下GridView控件Html代碼，以及cs代碼，來實現把這個用戶控件嵌入GridView控件中去。
先改一下GridView

現在，我們去實現上圖Yellow高亮的事件：


此時，運行看看效果：



效果已經出來了。
不過，Insus.NET不想以后有關圖片所做的修改，再去改動GridView控件了，因此把這個用戶控件能有網頁運行，運態加載去GridView控件中去。可以看到下面的改動代碼：



改為PlaceHolder容器之后，用戶控件就可以在cs中動態加載至這個容器中來。




以下后續內容於2013-05-16 15:10分添加：

現在Insus.NET想讓用戶點一點縮略圖，讓它能Pop-up一個小窗口，展示原圖全尺寸，實現Pop-up技術還是使用Microsoft的ajax的ajaxToolkit:ModalPopupExtender，這個較簡單。對上面的程序改動也較小。

既然用到Ajax，得先下載AjaxContolToolkit，把AjaxControlToolkit.dll 放入站點的Bin目錄中。然后去.aspx.網頁，添加asp:ScriptManager組件：




考慮到站點也許會有多個地方，應用到AjaxToolkit的工具，這樣可以把AjaxToolkit注刪除入web.config配置文件中去。


現在我們可以去.ascx用戶控件寫Pop-up窗口了。


可復制html代碼如下：

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Thumbnail.ascx.cs" Inherits="Thumbnail" EnableViewState="false" %>

<asp:Image ID="Image1" runat="server" />

<asp:Panel ID="popupJiQiWindow" runat="server" Style="display: none; background-color: #ffffdd; border-width: 3px; border-style: solid; border-color: Gray; padding: 3px;">
    <asp:Panel ID="Panel7" runat="server" Style="float: right; background-color: #DDDDDD; border: solid 1px Gray; color: Black; height: 20px; text-align: center; line-height: 20px;">
        <asp:LinkButton ID="LinkButtonClose" runat="server" Style="margin-right: 4px; margin-left: 4px; text-decoration: none;"
            OnClientClick="return false;" Text="×" ForeColor="Red" ToolTip="Close" />
    </asp:Panel>
    <div style=" position:relative; padding:5PX; text-align:center; vertical-align:middle;">
        <asp:Image ID="Image2" runat="server" />
    </div>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender2" runat="server" TargetControlID="Image1"
    PopupControlID="popupJiQiWindow" BackgroundCssClass="modalBackground" CancelControlID="LinkButtonClose" />

接下來，可以為Pop-up窗口的Image2綁定圖片了。
由於在網頁給用戶控件傳入的圖片路徑已經是物理路徑了，參考下圖高亮代碼：


因此，我們需要顯示圖片全尺寸圖片時，需要把此物理路徑轉為相對路徑。把物理路徑轉為相對路徑，Insus.NET寫了一個函數：


看看下圖中的標注1代碼，是獲原圖片的寬度與高度，有關獲取圖片的寬度與高度，可以參考：http://www.cnblogs.com/insus/articles/2048578.html ，獲取到寬度與高度之后，來給Pop-up窗口的寬度與高度賦值。


標注2代碼，是把物理路徑轉換為相對路徑之后，賦值給Image2控件。
到此算補充完整了，最后還是附上動態演示：