本博文，將帶你學習使用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;}} } Insus.NET.SolarSystem

接下來，我們為這個類別添加數據，讓其由抽象的對象變為真實有生命的對象，產生幾個，并把每個對象存放在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;} View Code

有了數據，數據展現出來，還是先用最簡單的方法來顯示吧，從簡單入手，最方便與快捷。在網點中創建一個網頁，如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; }} } Insus.NET.IThumbnail

由于我們要實現縮略圖，因此我們要做到圖片處理，而不是單單一個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" /> View Code

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


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


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


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

?

轉載于:https://www.cnblogs.com/insus/archive/2013/05/16/3081055.html

總結

以上是生活随笔為你收集整理的演练GridView控件显示目录图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。