演练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;}}
}

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控件显示目录图片相关推荐

VC++下载图片然后控件显示JPG图片的实现
本人采用VS2003开发平台,由于可以兼容VC6.0的大量代码.但是要实现目前C#的大量功能,还是要费不少功夫的.下面讲下如何如下图片下载,然后显示在图片控件的功能.单独封装了两个函数可以只直接使用. ...
c# picturebox控件显示本地图片和显示网上的图片
显示本地图片 pictureBox1.Image=Image.FormFile(@"图片路径"); 显示网络图片 pictureBox1.ImageLocation = @&quo ...
如何让web控件FileUpload选择完文件之后就自动触发事件，让Image控件显示出图片来...
function SelectImg(url){ document.all.item("ProductImg").src=document.getE ...
mfc picture控件显示png图片
onpaint函数里添加程序: CClientDC *pDC = new CClientDC(GetDlgItem(IDC_LIGHT)); CRect rect; GetDlgItem(IDC_LI ...
数据绑定技术一：GridView控件
在网站或应用程序中,要显示数据信息,可用到ASP.NET提供的数据源控件和能够显示数据的控件. 一.数据源控件数据源控件用于连接数据源.从数据源中读取数据以及把数据写入数据源. 1.数据源控件特点 ...
GridView控件 Image控件与图片的二进制数据库存储和显示
1.将图片以二进制存入数据库 2.读取二进制图片在页面显示 3.设置Image控件显示从数据库中读出的二进制图片 4.GridView中ImageField以URL方式显示图片 5.GridView显 ...
9206晚自习点歌功能拆解图片加载控件显示与隐藏等等
使用panel面版布局控制面版的Dock属性项目资源存放位置 bin/debug下布局图片工具栏的设置设置工具项为图文模式图在上,文在下给菜单项添加图片,并且设置图片不压缩,不缩小左右 ...
GridView控件绑定数据库显示数据
1 USE master 2 GO 3 IF EXISTS(SELECT * FROM sysDatabases WHERE name='BookDB') 4 DROP DATABASE BookDB ...
C#利用Picturebox控件显示图片
源文章:https://blog.csdn.net/liyuqian199695/article/details/54098938 C#利用Picturebox控件显示图片 1.Picturebox控 ...

演练GridView控件显示目录图片

演练GridView控件显示目录图片相关推荐

最新文章

热门文章