C#.net中web工程中创建用户控件和被调用的方法

在进行Web开发时通常会出现这样的情况：即可用的工具的功能虽然强大，但不符合具体项目的需求，可能是给定控件的工作方式并不像所期望的那样，也可能是一部分代码本来的目的是能够在多个页上重用，但是许多开发人员实现起来却相当复杂。在这些情况下，定制控件的建立就尤为迫切。简言之，定制控件可以把多个现有的控件包装在一起，这些现有控件还可能有指定布局的额外属性；定制控件也可以与现有的控件完全不同。使用定制控件与使用ASP.NET中的控件一样简单，能使Web站点的编码非常容易。
在过去，实现定制控件是非常复杂的，尤其在大型系统中，由于使用定制控件需要复杂的注册过程，因此定制控件的实现就更为复杂。即使在简单的系统上，创建定制控件所需进行的编码也是一个相当复杂的过程。老版本Web语言的脚本编码功能也不能对手工编写的对象模型提供较好地访问，因此各个方面的性能都比较差。
.NET Framework使用简单的编程技术，为定制控件的创建提供了一个理想的设置。ASP.NET服务器控件的每个方面都可以随意定制，包括模板制作、客户端脚本编码等功能。但是，也不必为所有这些功能编写代码；控件越简单，创建就越容易。
另外，.NET系统中固有的程序集动态查询使Web应用程序在新Web服务器上的安装如同复制包含代码的目录结构一样简单。要使用自己创建的控件，只需复制包含这些控件的程序集和其他代码即可。甚至可以把频繁使用的控件放在Web服务器上一个位于全局程序集缓存器(GAC)的程序集中，这样服务器上所有的Web应用程序就可以访问它们了。
本章将介绍两类不同的控件：
● 用户控件——即把现有的ASP.NET页转化为控件
● 定制控件——即组合几个控件的功能、扩展现有的控件以及从头创建新的控件
我们将创建一个简单的控件，显示一副扑克牌(黑桃、方块、红桃和梅花)，以便轻松地把它嵌入到其他ASP.NET页面中，以此来阐明用户控件的用法。对于定制控件，则创建一个投票控件，它允许用户在列表中选择一个候选人进行投票，并查看投票过程。

27.1 用户控件

用户控件是用ASP.NET代码创建的控件，就像在标准的ASP.NET Web页面中创建控件一样，不同之处在于一旦创建了用户控件，就可以在多个ASP.NET页面中重用它们。
例如，假定已经创建了一个显示数据库中信息的页面，信息也许是关于订单的，就不必创建一个固定的页面去显示信息，而是可以把相关的代码放到用户控件中，然后把该控件插入到任意多个不同的Web页面中。
此外，可以给用户控件定义属性和方法，例如，可以指定Web页面上显示数据库表时的背景色属性，或者指定一个方法，重新进行数据库查询以检查数据库中的变化。
下面创建一个简单的用户控件，与其他章节一样，本章的示例项目也可以从Wrox网站www.wrox.com上下载。

一个简单的用户控件

在VS.NET中，创建一个新Web应用程序PCSUserCWebApp1。一旦生成标准文件，就可以选择Project | Add New Item菜单选项，添加名称为PCSUserC1.ascx的Web用户控件，如图27-1所示。

图 27-1
给项目添加的文件的扩展名为.ascx和.ascx.cs，它们的工作方式与前面的.aspx文件非常相似。.ascx文件将包含ASP.NET代码，看起来与普通的.aspx文件非常相似。.ascx.cs文件是代码后置文件，它定义了用户控件，定义的方式与在.aspx.cs文件中定义窗体的方式一样。
与.aspx文件相似，也可以在设计或HTML视图中查看.ascx文件。在HTML视图中查看文件，可以发现一个重要的区别：.ascx文件没有显示HTML代码，特别是没有<form>元素，原因在于：用户控件要插入到其他文件的ASP.NET窗体中，因此不需要自己的窗体标记。生成的代码如下所示。
<%@ Control Language="c#" AutoEventWireup="false" Codebehind="PCSUserC1.ascx.cs"
Inherits="PCSUserCWebApp1.PCSUserC1"
TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%>
这非常类似于在.aspx文件中生成的<%@ Page %>指令，但指定了Control，而不是Page，并包括一个TargetSchema属性。这个属性指定控件是为哪个浏览器创建的。在本例中是Internet Explorer 5，这会影响可以从VS.NET工具箱中添加的项目。
查看.aspx.cs文件中生成的代码，可以发现另一个与ASP.NET页面的重要区别：所生成的类是从System.Web.UI.UserControl继承来的。这也是因为控件将用在窗体中，控件并不是窗体。
本例的简单控件是一个显示图形的控件，显示的图形对应于扑克牌中的一种花色(即梅花、方块、红桃和黑桃)。这里所需的图形是VS.NET附带的图形；它们在C:/Program Files/Microsoft Visual Studio .NET 2003/Common7/Graphics/bitmaps/assorted目录中，其文件名分别是CLUB.BMP、DIAMOND.BMP、HEART.BMP和SPADE.BMP。把这些图形文件复制到项目目录中，以便在后面使用它们。
给新控件添加一些代码。在PCSUserC1.ascx的HTML视图中添加下列代码：
<%@ Control Language="c#" AutoEventWireup="false" Codebehind="PCSUserC1.ascx.cs"
Inherits="PCSUserCWebApp1.PCSUserC1"
TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%>
<table cellspacing=4>
<tr valign="middle">
<td>
<asp:Image Runat="server" ID="suitPic" ImageURL="club.bmp"/>
</td>
<td>
<asp:Label Runat="server" ID="suitLabel">Club</asp:Label>
</td>
</tr>
</table>
这段代码定义了控件的默认状态，即一个梅花图形和一个标签。在给控件添加额外功能之前，首先把这个控件添加到项目的Web页面WebForm1.aspx上，测试这个默认状态。
为了在.aspx文件中使用定制的控件，首先需要指定如何引用该控件，也就是说，如何在HTML中引用代表控件的标记名称。为此，在代码的最前面使用<%Register%>指令，如下所示。
<%@ Register TagPrefix="PCS" TagFTEL="UserC1" Src="PCSUserC1.ascx" %>
属性TagPrefix和TagName指定要使用的标记名称(指定的格式为<TagPrefix:TagName>)，使用属性Src指向包含用户控件的文件。现在，添加下面的元素，就可以使用控件了：
<form id="Form1" method="post" runat="server">
<PCS:UserC1 Runat="server" ID="myUserControl"/>
</form>
在窗体的后台编码文件中，用户控件没有在默认状态下声明，因此也需要给WebForm1.aspx.cs添加下面的声明：
public class WebForm1 : System.Web.UI.Page
{
//申明一个用户控件
protected PCSUserCWebApp1.PCSUserC1 myUserControl;
...
这就是测试用户控件所需要做的所有工作，运行项目的结果如图27-2所示。

图 27-2
可以看出，这个控件组合了两个现有的控件，即图形控件和标签控件，因此它属于合成控件一类。
为了控制显示的花色图形，可以在元素<PCS:UserC1>上使用属性。用户控件元素上的属性会自动映射到用户控件的特性上，因此，只需给控件的后台编码PCSUserC1.ascx.cs添加特性。这个特性称为Suit，让它接收合适的花色值。为了便于表示控件的状态，在PCSUserC1.ascx.cs文件中定义命名空间PCSUserCWebApp1中的一个枚举，以保存4个花色名称：
namespace PCSUserCWebApp1
{
...
public enum suit
{
club, diamond, heart, spade
}
...
}
类PCSUserC1需要一个成员变量，以保存花色类型currentSuit：
public class PCSUserC1 : System.Web.UI.UserControl
{
protected System.Web.UI.WebControls.Image suitPic;
protected System.Web.UI.WebControls.Label suitLabel;
protected suit currentSuit;
再添加一个访问这个成员变量的属性Suit：
public suit Suit
{
get
{
return currentSuit;
}
set
{
currentSuit = value;
suitPic.ImageUrl = currentSuit.ToString() + ".bmp";
suitLabel.Text = currentSuit.ToString();
}
}
这里的set存取器把图形的URL设置为前面复制的一个文件，并把要显示的文本设置为花色名称。
下面需要给WebForm1.aspx添加代码以访问这个新的属性。使用刚才添加的属性选择花色：
<PCS:UserC1 Runat="server" id="myUserControl" Suit="diamond"/>
ASP.NET处理器可以从提供的字符串中选择出正确的枚举项。但为了使该控件更有趣、更吸引人，下面使用一个单选按钮列表来选择花色：
<form id="Form1" method="post" runat="server">
<PCS:UserC1 Runat="server" ID="myUserControl"/>
<asp:RadioButtonList Runat="server" ID="suitList"
AutoPostBack="True">
<asp:ListItem Value="club" Selected="True">Club</asp:ListItem>
<asp:ListItem Value="diamond">Diamond</asp:ListItem>
<asp:ListItem Value="heart">Heart</asp:ListItem>
<asp:ListItem Value="spade">Spade</asp:ListItem>
</asp:RadioButtonList>
</form>
还需要给列表的SelectedIndexChanged事件添加事件处理程序。双击设计视图中的单选按钮列表，就可以添加处理程序。
注意：
把列表的autopostback属性设置为true，是因为除非进行回送操作，否则将不在服务器上执行suitList_SelectedIndexChanged事件处理程序，在默认状态下，这个控件也不会触发回送 操作。
在WebForm1.aspx.cx中，方法suitList_SelectedIndexChanged()需要以下代码：
protected void suitList_SelectedIndexChanged(object sender,
System.EventArgs e)
{
myUserControl.Suit = (suit)Enum.Parse(typeof(suit),
suitList.SelectedItem.Value);
}
我们知道，元素<ListItem>上的value属性代表前面定义的枚举suit的有效值，因此简单地把这些值解析为枚举类型，并把它们用作用户控件的Suit属性值。使用简单的数据类型转换语法，就可以把返回的对象类型转换为suit，因为这个类型不能通过隐式转换而得到。
在运行Web应用程序时，可以改变花色，如图27-3所示。

图 27-3
接下来，给控件添加一些方法。这是非常简单的，只需给PCSUserC1类添加方法就可以了：
public void Club()
{
Suit = suit.club;
}
public void Diamond()
{
Suit = suit.diamond;
}
public void Heart()
{
Suit = suit.heart;
}
public void Spade()
{
Suit = suit.spade;
}
4个方法Club()、Diamond()、Heart()和Spade()分别用于改变显示在屏幕上的扑克牌的花色。
在.aspx页面上的4个ImageButton控件上调用这些函数：
</asp:RadioButtonList>
<asp:ImageButton Runat="server" ID="clubButton"
ImageUrl="CLUB.BMP"
OnClick="clubButton_Click"/>
<asp:ImageButton Runat="server" ID="diamondButton"
ImageUrl="DIAMOND.BMP"
OnClick="diamondButton_Click"/>
<asp:ImageButton Runat="server" ID="heartButton"
ImageUrl="HEART.BMP"
OnClick="heartButton_Click"/>
<asp:ImageButton Runat="server" ID="spadeButton"
ImageUrl="SPADE.BMP"
OnClick="spadeButton_Click"/>
</form>
事件处理程序如下：
protected void clubButton_Click(object sender,
System.Web.UI.ImageClickEventArgs e)
{
myUserControl.Club();
suitList.SelectedIndex = 0;
}
protected void diamondButton_Click(object sender,
System.Web.UI.ImageClickEventArgs e)
{
myUserControl.Diamond();
suitList.SelectedIndex = 1;
}
protected void heartButton_Click(object sender,
System.Web.UI.ImageClickEventArgs e)
{
myUserControl.Heart();
suitList.SelectedIndex = 2;
}
protected void spadeButton_Click(object sender,
System.Web.UI.ImageClickEventArgs e)
{
myUserControl.Spade();
suitList.SelectedIndex = 3;
}
既然有了4个新按钮，就可以改变扑克牌的花色，如图27-4所示。

图 27-4
完成了用户控件的创建后，使用<%@Register%>指令和为控件创建的两个源代码文件(PCSUserC1.ascx和PCSUserC1.ascx.cs)，就可以在其他的Web页面中使用这个用户控件了。

下面是完整项目代码：
用户控件：PCSUSerC1.ascx
<%@ Control Language="c#" AutoEventWireup="false" Codebehind="PCSUSerC1.ascx.cs" Inherits="PCSUserCWebApp1.PCSUSerC1" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%>
<table cellspacing="4">
<tr valign="middle">
<td>
<asp:Image id="suitPic" runat="server" ImageUrl="pic/CLUB.BMP"></asp:Image></td>
<td>
<asp:Label id="suitLabel" runat="server">Club</asp:Label></td>
</tr>
</table>
图像为：

图 27-5

PCSUSerC1.ascx.cs
namespace PCSUserCWebApp1
{
using System;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

/// <summary>
/// PCSUSerC1 的摘要说明。
/// </summary>
public class PCSUSerC1 : System.Web.UI.UserControl
{
protected System.Web.UI.WebControls.Image suitPic;
protected System.Web.UI.WebControls.Label suitLabel;
protected suit currentSuit;

private void Page_Load(object sender, System.EventArgs e)
{
// 在此处放置用户代码以初始化页面
}
public enum suit{CLUB,DIAMOND,HEART,SPADE}

//控件的属性和方法的定义
public suit Suit{
get{return currentSuit;}

set{
currentSuit=value;
this.suitPic.ImageUrl="pic/"+currentSuit.ToString()+".bmp";
this.suitLabel.Text=currentSuit.ToString();
}
}

public void Club(){Suit=suit.CLUB;}

public void Diamond(){Suit=suit.DIAMOND;}

public void Heart(){Suit=suit.HEART;}

public void Spade(){Suit=suit.SPADE;}

WebForm1.aspx(页面调用)
<!-- 注册一个用户控件-->
<%@ Register TagPrefix="PCS" TagName="UserC1" Src="PCSUserC1.ascx"%>
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="PCSUserCWebApp1.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm1</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
用户控件：<br>
<PCS:USERC1 id="myUserControl" runat="server" Suit="DIAMOND"></PCS:USERC1><br><hr>
使用系统控件对用户控件的操作：<br>
<asp:ImageButton id="IB_DIAMOND" runat="server" ImageUrl="pic/DIAMOND.BMP"></asp:ImageButton>
<asp:ImageButton id="IB_SPADE" runat="server" ImageUrl="pic/SPADE.BMP"></asp:ImageButton>
<asp:ImageButton id="IB_HEART" runat="server" ImageUrl="pic/HEART.BMP"></asp:ImageButton>
<asp:ImageButton id="IB_CLUB" runat="server" ImageUrl="pic/CLUB.BMP"></asp:ImageButton></form>
</body>
</HTML>

页面图片为：

图 27-6

后台代码：WebForm1.aspx(页面调用)

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using PCSUserCWebApp1;

namespace PCSUserCWebApp1
{
/// <summary>
/// WebForm1 的摘要说明。
/// </summary>
public class WebForm1 : System.Web.UI.Page
{
protected System.Web.UI.WebControls.ImageButton IB_DIAMOND;
protected System.Web.UI.WebControls.ImageButton IB_SPADE;
protected System.Web.UI.WebControls.ImageButton IB_HEART;
protected System.Web.UI.WebControls.ImageButton IB_CLUB;

//申明一个用户控件
protected PCSUserCWebApp1.PCSUSerC1 myUserControl;

private void Page_Load(object sender, System.EventArgs e)
{
// 在此处放置用户代码以初始化页面

//用户控件属性取得
string a=myUserControl.Suit.ToString();
}

//用户控件方法的调用
private void IB_HEART_Click(object sender, System.Web.UI.ImageClickEventArgs e)
{
myUserControl.Heart();
}

private void IB_SPADE_Click(object sender, System.Web.UI.ImageClickEventArgs e)
{
myUserControl.Spade();
}

private void IB_CLUB_Click(object sender, System.Web.UI.ImageClickEventArgs e)
{
myUserControl.Club();
}

private void IB_DIAMOND_Click(object sender, System.Web.UI.ImageClickEventArgs e)
{
myUserControl.Diamond();
}

项目图片：

图 27-7