ASP.NET中的用户定制控件(1)

创造的魅力——ASP.NET中的用户定制控件(1)
原创:冯涛 牛建新 2004年1月1日

目录

摘要

本文主要介绍ASP.NET中的用户控件和定制控件的概念、应用以及与传统ASP的比较等内容。通过对这些内容的介绍,使读者了解ASP.NET的复用性,更深入地体会.NET的魅力。(本文中涉及代码范例为C#编写)

本文假定读者对ASP.NET和C#有一些了解,并且希望了解如何在ASP.NET中创建复用的代码。

问题的提出

我们知道,一个美观的网站通常要做到的一点就是界面风格上的统一。每个页面都应该拥有统一的banner、统一的页脚。其实仔细想想看,一个网站中相同或是相似的模块其实还不止这些。从外观上的图片、表单到底层程序以及对数据库的操作,都有大量相同或相似的元素。

对于开发人员来说,处理这样的问题最先想到的就是代码复用,不会有人去选择重复的无意义劳动。

众所周知,ASP.NET应用程序是由面向对象的可编译的高级语言编写的,面向对象的一大优势就是它的复用性。那么在先进的ASP.NET中我们是如何实现代码复用的呢?

在下面的文章中我们将就这一问题展开讨论,来一起认识一下ASP.NET代码复用的两种主要形式:用户控件和定制控件。

复用的简单实现——用户控件

用户控件这个词相信熟悉Windows Form的开发人员并不陌生(当然如果听起来陌生也没有关系),的确ASP.NET中的用户控件和Windows Form中的也是很相似的。那么什么是ASP.NET中的用户控件呢?

用户控件也就是UserControl,继承自System.Web.UI.UserControl类。用户控件的表现形式是一个扩展名为.apcx的文件。与扩展名为.aspx的Web页面相似,它也可以拥有自己的后台代码(这项技术在Visual Studio .NET中式默认使用的)。同时用户控件还可以拥有自己的方法和属性。

也许你已经不耐烦了,那么好,下面就让我们一起来看一个用户控件的例子,在Visual Studio .NET中创建用户控件非常容易,一种方法是将一个已经做好的.aspx页面改为.ascx文件(.ascx文件即为用户控件),有关这方面的内容我们在 这里先不作介绍,我们首先来看在一个Project里直接创建一个.ascx文件的方法。首先新建一个ASP.NET Web Application Project,在Solution Explorer面板中右击WebApplication1 Project,如图所示:

然后在Add选项中选择Add New Item,如图所示:

如果已经有了做好的用户控件,我们就可以选择Add Existing Item选项来直接加入,这里我们从头创建一个新的用户控件。在弹出的Add New Item对话框中选中Web User Control单击Open,这样我们就往Project里新加了一个.ascx文件,即添加了一个用户控件,如图所示:

下面我们在WebUserControl1.ascx页中加入一个Image控件和一个Label控件。这样,一个网站中的各页中如banner处都要用到它时就可以引入这个控件,而不必为每一页都重复这项工作了。

在Visual Studio .NET中为.aspx页面引入一个用户控件的方法很简单,只要在Solution Explorer面板中将.ascx文件拖到当前的.aspx页面的Design界面中即可。完成之后在WebForm1.aspx页面的Design界面中会看到一个已经添加好的用户控件,而在HTML代码界面中则会多了下面一 些语句:

<%@ Register TagPrefix ="uc1" TagName="WebUserControl1" Src="WebUserControl1.ascx" %>

这是Visual Studio .NET自动为你加上的,实际上这完成了用户控件的注册过程,只有注册了的用户控件才可以在后面使用。在代码的最前面使用<%Register%>指令在HTML中引用代表控件的标记名称,属性TagPrefix和TagName指定要使用的标记名称(指定的格式为:TagPrefix:TagName),使用属性Src指向包含用户控件的文件。在WebForm1.aspx的HTML代码页面中还自动加入了下面的语句来使用控件:

<form id="Form1" method="post" runat="server">
  < uc1:webusercontrol1 id="WebUserControl11" runat="server" uc1:webusercontrol1>
<form >

在窗体的后台编码文件中,用户控件没有在默认状态下声明,因此需要给WebForm1.aspx.cs添加下面的声明:

public class WebForm1:System.Web.UI.Page
{
    protected WebUserControl1 WebUserControl11l;
    ...

在这里为了更好的展现应用用户控件的优势,我们在当前的示例Project中再加入一个.aspx页面,让两个.aspx页面同时引入我们刚刚做好的这个控件。这样,当我们改变控件时,这两个.aspx页面都会跟着发生改变 ,借此展现一下用户控件的优越性。在Project中新加入.aspx页面和加入一个.ascx文件差不多,读者只需根据刚才的介绍一步步来就可以了。加好后同样将WebUserControl1.ascx文件拖入。

在浏览器中浏览一下这两个.aspx页面,每个页面都会出现一幅图和一行字,如下图所示:

以上的工作都很容易,下面我们来改改用户控件,试一下这两个.aspx页面是否也会跟着改变。打开.ascx文件,将刚才的那幅图换成另外一幅,文字当然也相应地改一改。如下图所示:

我们可以看到,用户控件中的图片和文字都已发生了变化。好,下面让我们再次来浏览那两个.aspx页面,如图所示:

可以看到,WebForm1.aspx和WebForm2.aspx两个文件的浏览页面都已经随着控件的改变而发生了改变。

这样,我们只在.ascx文件一处更改了图片和文字,而引入这个控件的两个.aspx页面均发生了改变,做到了代码的复用,从而提高了效率省去了重复劳动。 使得维护更新也变得非常简单。

用户控件与传统ASP的比较

看完上面的讲解,大概有人会觉得其实用户控件不就是传统ASP中#include的翻版吗。这样的想法也没什么不对,事实上两者之间的确有些相似。但上文我们曾经谈到,用户控件可以拥有自己的方法和属性。也就是说,在页面中注册用户控件后,我们就可以把它当作一个类来使用了,可以把它在需要的位置实例化并给属性赋相应的值。这些都是传统ASP中#include无法做到的。也就是说,用户控件并不是单纯地将其中的代码搬到添加它的位置去执行,而是可以在注册页面中更改控件的属性和方法,从而进一步控制用户控件。

下面我们仍用一个例子来讲解,这个例子使我们可以利用WebForm1.aspx页面中的RadioButtonList控件来修改Picture.ascx文件中图片的属性,下面先来看一下WebForm1.aspx页面的浏览效果,如下图所示:

在这里选择不同的选项,上方的图片和文字也会随着改变。我们再来看一下WebForm1.aspx的编辑页面,如下图所示:

在Design页面中可以发现WebForm1.aspx页面其实是先引入了一个用户控件,即我们已经做好的Picture.ascx文件,然后在下面加了一个RadioButtonList控件。这里我们将RadioButtonList控件的三个ListItem分别设为了Value="CSharp", Value="VBDotNet", Value="ADODotNet",这三个值分别是用户控件根据在RadioButtonList中选项的不同将要进行替换的三幅图片的名称,之所以这样做是为了在WebForm1.aspx页面中更改用户控件的属性时告诉用户控件我们想要的是哪幅图片,下面是WebForm1.aspx页面的部分代码:

<%@ Register TagPrefix="UC" TagName="picture" Src="Picture.ascx"%>

 
<asp:RadioButtonList id="rblName" runat="server" AutoPostBack="True">
   <asp:ListItem Value="CSharp" Selected="True">c#</asp:ListItem>
   <asp:ListItem Value="VBDotNet">VB.NET</asp:ListItem>
   <asp:ListItem Value="ADODotNet">ADO.NET</asp:ListItem>
</asp:RadioButtonList>

上面的代码很容易看懂,这里就不作过多解释了,要说明的一点是AutoPostBack="True",RadioButtonList控件的默认设置是在客户端选择不同的选项时控件并不向服务器端发送信息(也就是不自动回送),一般是将RadioButtonList控件放到一个form中,在form中加一个Button,当单击Button后提交表单,进而将RadioButtonList控件信息发送回服务器。要想不用Button而要在选择不同的ListItem时就将所选信息发送回服务器,这就要将AutoPostBack属性设为True。当我们在RadioButtonList控件中进行选择时就触发了rblName_SelectedIndexChanged事件,此事件定义在了WebForm1.aspx的后台代码(WebForm1.aspx.cs)中。随便说一下,在HTML代码页的最上端有后台代码的相关信息,如下所示:

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="UserControlTest.WebForm1" %> 

下面是在WebForm1.aspx.cs中定义的rblName_SelectedIndexChanged事件处理程序,内容如下:

private void rblName_SelectedIndexChanged(object sender, System.EventArgs e)
{
    myFavorite.Name = (favorites)Enum.Parse(typeof(favorites),rblName.SelectedItem.Value);
}

此事件中只有一行语句,其含义是将RadioButtonList控件中当前的选中项传给用户控件的Name属性,在这里用的myFavorite对象是在后台代码文件的WebForm1类中定义的,如下所示:

public class WebForm1 : System.Web.UI.Page
{
   ...
   protected Picture myFavorite;
   ...

其中的Picture类就是我们在上面提到的用户控件的类,就是因为在这里创建了一个用户控件的对象,我们才可以在事件中引用控件的属性以及方法,从而进一步控制和修改注册到.aspx页面的用户控件。下面我们来看这个用户控件:

<asp:Image id="imgLogo" runat="server" ImageUrl="c.gif"></asp:Image>
<asp:Label id="lblName" runat="server">C# Language</asp:Label>

可以看到,控件中加入了一个Image控件和一个Label控件。下面来看为控件定义的类,在类之前我们定义了一个枚举类型,如下所示:

public enum favorites
{
    CSharp,VBDotNet,ADODotNet
}

这样,我们就可以让Name属性返回一个枚举类型的变量,代码如下所示:

protected favorites name;

public favorites Name
{
   get
    {
      return name;
    }
   set
   {
      name = value;
      imgLogo.ImageUrl = name.ToString() + ".gif";
      lblName.Text = name.ToString();
   }
}

首先在类中声明了一个favorites类型的name变量,用在了Name属性的get中,即return name 。在set中先将传来的值赋给name,然后再用
imgLogo.ImageUrl = name.ToString() + ".gif" 语句将图片的ImageUrl属性设定为用户想要的图片,在这里就用到了我们刚才为Image控件设的ID。然后,再将那个标签控件也设成当前图片的名字就可以了。

通过这个例子,可以看得出,用户控件不仅可以完成对代码的简单复用,而且还可以利用自身的属性和方法,适用不同的需要。

用户控件的本质

现在,我们已经介绍了用户控件的创建和应用,可能有人已经得出了结论:其实用户控件本质上就是一个ASP.NET页面。这样说也不算错,但却忽略了一点。我们下面就一起讨论一下用户控件的本质到底是什么?

我们用表格的方式来对用户控件和Web页面进行一下全面的比较:

  用户控件 Web页面
组成文件 一个.ascx文件
一个.cs文件
一个.aspx文件
一个.cs文件
编写格式 以"<%@ Control"开头
其中没有包含<html>、<form>等标签
以"<%@ Page"开头:
其中包含<html>、<form>等标签
运行方式 由CLR编译,然后存在高速缓存中 相同
能否独立运行 不能,只能被Web页调用 可以独立运行

从表格中我们可以看出,其实用户控件本质上可以认为是一个不完整的Web页。这也可以说是告诉我们,其实把.aspx页面转换为用户控件也是相当容易的事情。有的时候是有必要这么做的,这也是用户控件创建上的一个优势。

那么到现在用户控件的一个最突出的优势也就显现出来了,那就是创建起来非常的容易。它是ASP.NET中代码复用比较简单的实现方式,之所以这样说是相对于定制控件而言,好奇的你一定想知道定制控件的神奇之处,那就请接着看下篇文章:创造的魅力——定制控件

posted @ 2004-08-11 11:47  泡面 @ 幸福  阅读(930)  评论(0编辑  收藏  举报