你的分享就是我们的动力 ---﹥

演练GridView控件显示目录图片

时间:2013-05-16 14:22来源:www.chengxuyuans.com 点击:

本文,将带你学习使用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的博客中,也提供有实现缩略图的方法,而且有两个版本呢。

不过,此次,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中动态加载至这个容器中来。

 


 

转载注明地址:http://www.chengxuyuans.com/asp.net/60492.html