一个网站的美观与否直接影响着这个网站的受欢迎度。随着Internet的迅速发展，人们更加倾向于访问界面美观的网站，这意味着在网站开发过程中，设计和实现美观且实用的用户界面变得越来越重要。基于此原因，本章将着重介绍ASP.NET中关于页面设计的一些最优方案。

2.3 用户控件设计方案

在ASP.NET中，除了可以使用Web服务器控件以及HTML服务控件外，开发人员还可以自行设计Web用户控件。Web用户控件不仅可以实现各种复杂的功能，而且还可以在多个网页中重复使用。基于此原因，ASP.NET提供了一种用户控件的设计方案。

2.3.1 普通用户控件设计方案

用户控件基本的应用就是把网页中经常用的到且使用频率较高的程序封装到一个模块中，以便在其他页面中使用，提高代码的重用性和程序开发的效率。

1．方案分析

为了提高应用程序中的代码重用性，经常会使用用户控件来设计网站中比较常用的模块。基本思想就是“模块化设计，模块化应用”。此设计方案的核心是构建用户控件，具体构建方法有3种。

方法一，普通用户控件的创建。普通的用户控件的创建过程很简单，其创建步骤读者可参见本章第2.1节页面设计技术概述中有关创建普通用户控件的步骤。

方法二，将现有的Web页转换为用户控件。对于提高代码的重用性来说，这是最佳的选择方案。在程序开发过程中，当发现一个Web页会经常会用到且使用的频率较高时，并打算在整个应用程序中访问其功能，则可以对该页面略加改动，将其更改为一个用户控件，关键的转换技术在本章第2.1节页面设计技术概述中有相关介绍。

方法三，就像能以编程方式在 ASP.NET 网页上创建任何服务器控件一样，也能以同样方式创建用户控件。以编程方式创建的用户控件，称之为动态加载用户控件。动态加载用户控件时，需要事先为此用户控件添加属性。通过添加用户控件属性可使用户控件功能更加强大。

2．实施过程

方案实施一简单普通用户控件的创建

实例位置：光盘\mr\02\2.3\2.3.1\01

在开发网站过程中，当用户要查看包含重要信息的页面时，一般都会弹出一个要求用户登录的界面，此界面可以根据实际需要设置不同级别用户的登录的权限，如一般用户级别、管理员级别和BOSS级别等。

用户登录的控件的制作一种方法就是可将ASP.NET网站中经常用到的用户登录控件设计成了用户控件，并在其它Web页中以拖曳方式对其进行引用，从而提高了页面代码的重用性。

方案运行效果如图2.16所示。

图2.16 用户登录控件

具体实施过程：

（1）新建一个ASP.NET网站，将其命名为03，设置主页名为denglu.aspx。

（2）创建一个用户控件WebUserControl.ascx，用来实现用户登录功能。创建该用户控件步骤如下。

右键单击项目解决方案，选择“添加新项”，打开“添加新项”窗口，选择“Web用户控件”选项，并在“名称”文本框中输入控件名称“WebUserControl”，如图2.17所示。

图2.17 创建Web用户控件

注意：不能将用户控件放入网站的App_Code文件夹中，如果某个用户控件在App_Code文件夹中，则运行包含该控件的页面时将发生分析错误。另外用户控件属于System.Web.UI.UserContol类型，它直接继承于System.Web.UI.Control.。

创建该用户控件时涉及到的控件如表2.9所示。

表2.9 用户控件WebUserControl用到的控件

控件类型	控件名称	用途
HTML/Table	table	布局页面
标准/TextBox	TxtName	输入用户名
	txtPwd	输入用户密码
	txtCheckCode	输入验证码
标准/Image	Image1	显示用户登录时的验证号码
标准/ ImageButton	ImageButton1	显示“提交”按钮图标
标准/ ImageButton	ImageButton2	显示“取消”按钮图标

（3）在“解决方案资源管理器”中鼠标单击选择已创建好的用户控件，将其拖曳到引用页中（这里的引用页为denglu.aspx页）。

（4）主要程序代码。

在用户控件WebUserControl.ascx上，双击【提交】按钮将会触发ImageButton控件的Click事件，在此事件中根据数据库中信息来判断用户登录的用户名和密码是否正确。代码如下：

protected void ImageButton1_Click(object sender, ImageClickEventArgs e)

{

SqlConnection con = new SqlConnection("Server=(local);database=db_ChengBao365;Uid=sa;Pwd=");

SqlCommand myCommand = new SqlCommand("select count(*) from UserData where loginName=@loginName and loginPwd=@loginPwd", con);

myCommand.Parameters.Add(new SqlParameter("@loginName", SqlDbType.NVarChar, 20));

myCommand.Parameters["@loginName"].Value = txtName.Text;

myCommand.Parameters.Add(new SqlParameter("@loginPwd", SqlDbType.NVarChar, 20));

myCommand.Parameters["@loginPwd"].Value = txtPwd.Text;

con.Open();

int i = Convert.ToInt32(myCommand.ExecuteScalar());

con.Close();

if (i > 0)

{

if (txtCheckCode.Text == Session["CheckCode"].ToString())

{

Response.Write("<script>alert('登录成功！！！')</script>");

}

else

{

Response.Write("<script>alert('验证码输入错误！！！！')</script>");

}

else

{

Response.Write("<script>alert('用户名称或密码错误！！！！')</script>");

}

说明：在创建此用户登录控件时，采用了验证码技术，应用此技术将有效地防止用户利用机器人程序自动登录。同时为了防止SQL注入式攻击，通过采用SqlCommand.Parameters的属性的参数传值实现用户登录再次验证，有效地将非法字符过滤掉。

方案实施二将现有的Web页直接转换为用户控件

实例位置：光盘\mr\02\2.3\2.3.1\02

为了使读者更好地掌握普通用户控件的开发方案，下面介绍另一种方案，即将Web页（后缀名为.aspx）中编写的用户登录控件直接转换为Web用户控件（后缀为.ascx）。这种转换方案是创建用户控件方案中最优的一种。通过以下内容的介绍希望读者能掌握其转换的核心思想。

在实施这个方案过程中主要应用到两个Web页，一个是默认主页Default.aspx；另一个是PreDefault.aspx页，此页将被用来转换为Web用户控件（即应用程序中使用的WebUserControl.ascx）。转换后的用户控件将在默认主页Default.aspx中被引用。

方案运行效果如图2.18所示。

图2.18 用户登录控件

具体实施步骤：

（1）新建一个网站，将其命令为04，默认主页名为Default.aspx。

（2）创建一个用户登录的PreDefault.aspx页，其前台代码编写如下。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PreDefault.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

<div>

<table align="center" class="css" style="background-image: url(../image/登录.gif);

width: 472px; height: 1px; border-right: #00cc99 thin groove; border-top: #00cc99 thin groove; border-left: #00cc99 thin groove; border-bottom: #00cc99 thin groove;">

td align="center" class="cssTitle" colspan="3" style="height: 64px; background-image: url(images/dengluchuangkou_17.gif);">

</td>

</tr> <tr>

</td>

<asp:TextBox ID="txtName" runat="server" CssClass="InputCss" Width="140px"></asp:TextBox></td>

</tr>

<tr>

<asp:TextBox ID="txtPwd" runat="server" CssClass="InputCss" TextMode="Password" Width="140px"></asp:TextBox></td>

</tr>

<tr>

<asp:TextBox ID="txtCheckCode" runat="server" CssClass="InputCss" Width="50px"></asp:TextBox>

<asp:Image ID="Image1" runat="server" Height="20px" Width="70px" src="checkCode.aspx" /></td>

</tr> <tr>

<asp:Label ID="Label1" runat="server" Style="left: -304px; position: relative; top: 40px"

Text="明日科技有限公司"></asp:Label>

  </td>

</tr> <tr>

<td align="right" colspan="3" style="background-image: url(images/dengluchuangkou_30.gif);

height: 30px">

 <asp:ImageButton ID="ImageButton1" runat="server" Height="36px" ImageUrl="~/images/dengluchuangkouxiao_04.gif"

OnClick="ImageButton1_Click" />

<asp:ImageButton ID="ImageButton2" runat="server" Height="36px" ImageUrl="~/images/dengluchuangkouxiao_03.gif"

OnClick="ImageButton2_Click" Style="left: -140px; position: relative; top: 0px" />

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

（2）重命名.aspx页使其文件扩展名为.ascx（即文件的全名更改后为WebUserControl.ascx）。从该页面中移除html、body和form元素。

（3）将ASP.NET指令类型从@ Page指令更改为@ Control指令。

（4）移除@ Control指令中除Language、AutoEventWireup（如果存在）、CodeFile和Inherits 之外的所有属性，并对这些保留的属性作相应的改动（具体更改参见以下代码）。

更改为用户控件后的前台代码如下：

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %>

<table align="center" class="css" style="background-image: url(../image/登录.gif);

width: 472px; height: 1px; border-right: #00cc99 thin groove; border-top: #00cc99 thin groove; border-left: #00cc99 thin groove; border-bottom: #00cc99 thin groove;">

td align="center" class="cssTitle" colspan="3" style="height: 64px; background-image: url(images/dengluchuangkou_17.gif);">

</td>

</tr> <tr>

</td>

<asp:TextBox ID="txtName" runat="server" CssClass="InputCss" Width="140px"></asp:TextBox></td>

</tr>

<tr>

<asp:TextBox ID="txtPwd" runat="server" CssClass="InputCss" TextMode="Password" Width="140px"></asp:TextBox></td>

</tr>

<tr>

<asp:TextBox ID="txtCheckCode" runat="server" CssClass="InputCss" Width="50px"></asp:TextBox>

<asp:Image ID="Image1" runat="server" Height="20px" Width="70px" src="checkCode.aspx" /></td>

</tr>

<tr>

<asp:Label ID="Label1" runat="server" Style="left: -304px; position: relative; top: 40px"

Text="明日科技有限公司"></asp:Label>

  </td>

</tr>

<tr>

<td align="right" colspan="3" style="background-image: url(images/dengluchuangkou_30.gif);

height: 30px">

 <asp:ImageButton ID="ImageButton1" runat="server" Height="36px" ImageUrl="~/images/dengluchuangkouxiao_04.gif"

OnClick="ImageButton1_Click" />

<asp:ImageButton ID="ImageButton2" runat="server" Height="36px" ImageUrl="~/images/dengluchuangkouxiao_03.gif"

OnClick="ImageButton2_Click" Style="left: -140px; position: relative; top: 0px" />

</td>

</tr>

</table>

说明：可以看到将PreDefault.aspx页转换为用户控件后，其前台代码中完全没有了html、body 或 form 元素。

（5）由于PreDefault.aspx页为代码隐藏的ASP.NET网页，通过在方案分析中知，此页的后台代码也要做相应的改动。具体改动如下。

打开PreDefault.aspx页的代码隐藏文件即PreDefault.aspx.cs的文件，可以看到该文件继承的类为Page类，代码如下：

public partial class _Default : System.Web.UI.Page

相应的操作只需把PreDafault.aspx代码隐藏文件中继承的类从Page更改为UserControl，代码如下：

public partial class WebUserControl : System.Web.UI.UserControl

（6）验证PreDefault.aspx页转换成用户控件是否成功。在Default.aspx页中对此用户控件通过@Register指令进行引用。通过实际验证，转换成功！代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default2" %>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

<body>

<div>

<uc1:WebUserControl ID="WebUserControl1" runat="server" />

</div>

</form>

</body>

</html>

方案实施三动态加载用户控件

实例位置：光盘\mr\02\2.3\2.3.1\03

除了以上两种开发用户控件的方案外，具有一定编程技术的程序员可以以编程方式创建用户控件。如某公司在开发一本图书时，都需要提前在网络上进行宣传，针对图书的待定价格的宣传时，可以通过一个以动态编程方式创建的用户控件来实现读者对此图书提出的建议性的价格。

如以下控件，标题 “Hello ASP.NET方案宝典”是动态加载MyControl.ascx用户控件得到的；除此之外，图中的文本框和图中命名为“增大价格”、“减少价格”的两个按钮都是通过动态加载Spinner.ascx用户控件得到的。

方案运行效果如图2.19所示。

图2.19 动态加载用户控件

动态加载用户控件的核心内容就是创建用户控件的属性，并动态地对其进行访问。创建用户控件的属性并没有什么特殊之处，创建这种属性如同创建任何类属性一样。但要注意以下几个方面的内容。

l 在用户控件创建属性时，必须确定所提供属性是可读写、只读或者只写。例如，在本实例中提供的是可读写属性。示例代码如下：

public int MinValue//设置为可读写属性

{

get//读属性

{

return m_minValue;

}

set//写属性

{

if (value >= this.MaxValue)

{

throw new

Exception("MinValue must be less than MaxValue.");

}

else

{

m_minValue = value;

}

public int MaxValue//设置为可读写属性

{

get//读属性

{

return m_maxValue;

}

set//写属性

{

if (value <= this.MinValue)

{

throw new

Exception("MaxValue must be greater than MinValue.");

}

else

{

m_maxValue = value;

}

l 为属性提供隐藏值。可以通过计算属性值和数据库检索方式予以实现，或者在私有成员变量中存储该隐藏值。同时，还必须确定是否为属性设置一个默认值。例如，本实例中创建私有成员变量以保存隐藏值。

private int m_minValue;

private int m_maxValue = 100;

private int m_currentNumber = 0;

l 将隐藏值集成到代码中。例如，本实例中，用户控件Spinner.ascx中有两个Button控件，在这两个控件的Click事件中将处理程序中设置的这些隐藏值。

自定义一个DisplayNumber()，用来获取当前图书价格。

//自定义一个DisplayNumber()，用来获取当前图书价格

protected void DisplayNumber()

{

textNumber.Text = this.CurrentNumber.ToString();

ViewState["currentNumber"] = this.CurrentNumber.ToString();

}

单击【增大价格】，触发其buttonUp_Click事件，在此事件中主要用来判断图书价格是否过到上限，如果用户选择的图书价格超过此上限，图书价格将会往下减，代码如下：

protected void buttonUp_Click(Object sender, EventArgs e)

{

if (m_currentNumber == this.MaxValue)

{

m_currentNumber = this.MinValue;

}

else

{

m_currentNumber += 1;

}

DisplayNumber();//调用DisplayNumber方法

}

单击【减少价格】，触发其buttonDown _Click事件，在此事件中主要用来判断图书价格是否过到下限，如果用户选择的图书价格超过此下限，图书价格将会往上增，代码如下：

protected void buttonDown_Click(Object sender, EventArgs e)

{

if (m_currentNumber == this.MinValue)

{

m_currentNumber = this.MaxValue;

}

else

{

m_currentNumber -= 1;

}

DisplayNumber();//调用DisplayNumber方法

}

具体实施过程：

（1）新建一个网站，将其命名为05，默认主页名为Default.aspx。

（2）编写两个用户控件。在该网站的解决方案下，右键单击网站名称，选择“新建文件夹“命令，创建一个名为UserControls的文件夹。

右键单击此文件夹，在弹出的快捷菜单中选择“添加新项”命令，打开“添加新项…”对话框，选择“Web用户控件”图标，分别创建两个名为MyControl.ascx和Spinner.ascx的用户控件文件。这两个文件都创建了用户控件的属性。

（3）在应用Table表格布好局的Default.aspx页中添加两个PlaceHolder控件，并通过@Reference指令将上步中创建的两个用户控件分别引用到包含它的页面中（即Default.aspx页）。

本实例主要采用在客户端以编程方式来引用这两个用户控件的属性，主要程序代码如下：

<%@ Page Language="C#" %>

<%@ Reference Control="~/Controls/Spinner.ascx" %>]

<%@ Reference Control="MyControl.ascx" %>

private Controls_Spinner Spinner1;

protected void Page_Load(object sender, EventArgs e)

{

//动态加载Spinner.ascx用户控件

Spinner1 = (Controls_Spinner)LoadControl("~/Controls/Spinner.ascx");

Spinner1.MaxValue = 108;

Spinner1.MinValue = 88;

PlaceHolder1.Controls.Add(Spinner1);

//动态加载MyControl.ascx用户控件

MyControl ctrl = (MyControl)Page.LoadControl("MyControl.ascx");

ctrl.LabelText = "Hello ASP.NET方案宝典!";

PlaceHolder2.Controls.Add(ctrl);

}

protected void Button1_Click(object sender, EventArgs e)

{

Label1.Text = Spinner1.CurrentNumber.ToString();

}

</script>

<html>

<title>Load User Control Programmatically</title>

</head> <body>

<br />

<table align="center" style="border-left-color: #ffff66; border-bottom-color: #ffff66;

……

<asp:PlaceHolder

ID="PlaceHolder2" runat="server"></asp:PlaceHolder>

<br />

<asp:Label ID="Label4" runat="server" Font-Size="10pt" Text="请选择

你对此图书建议的价格:"></asp:Label><br />

<asp:PlaceHolder runat=server ID="PlaceHolder1" />

</td> <td align="center" style="background-image: url(images/dengluchuangkou_25.gif); width: 81px;

height: 97px">

<asp:Button ID="Button1" runat="server"

Text="请确认选择的价格"

OnClick="Button1_Click" Width="124px" /></td>

<td align="center" style="background-image: url(images/dengluchuangkou_20.gif); width: 256px;

height: 97px"></td> </tr>

……

Text="您建议的价格为【"></asp:Label>         <asp:Label ID="Label1" runat="server" Text="" style="left: 0px; position: relative; top: -1px"></asp:Label>

……

</table>

</div>

</form>

</body>

</html>

3．补充说明

从架构上讲，基于用户控件的解决方案非常成功。然而，对于大规模应用程序，这实际上不是一个很容易管理的模型。用户控件的使用效率会随着应用程序的复杂性（包含的页数）上升而下降。例如，某个大型网站它包含的网页为几百张（或更多），那么通过使用用户控件处理公共要素的方法很快就会失效而且变得无法控制。为了找到一个更好的解决方案，ASP.NET2.0提出了母版页设计方案（本章第2.7节将给予详细介绍）。

2.3.2 高级用户控件设计方案

在开发网站过程中，都会用到用户控件的高级应用，不仅可以提高工作效率，减少代码的编写量，还可配合其它页面设计技术如和母版页技术结合应用。

1．方案分析

如果想给访问者一致的感觉，每个网站都需要具有一个统一的界面风格和样式。浏览一些Web站点时，会发现这些站点中几乎都包含有类似的外观，如一些相同的图形、外表、用户界面（UI）小部件，甚至还共享一些导航菜单或搜索窗体。为了达到这样一个效果，就可以应用用户控件高级设计方案来实现。

为了更好地理解用户控件的这种高级应用，将通过在本节实施过程中创建的一个博客网站来对用户控件的高级应用进行具体的分析。

在设计一个网站的首页时，可以将这个网站的首页界面全部用应用用户控件来拼接。应用这种组成结构体现了一种“拼积木”的思想方法，即将创建的多个用户控件模块拼接在一起来构建一个站点。应用这种思想融会着一个高层的设计原则，即“模块化设计，模块化应用”原则。这种原则可以说无处不在，本章以后要介绍的母版页设计方案中读者将会更深的体会到这种高层设计思想。

另外，用户控件的高级应用还体现在一种被称复合式用户控件的身上。复合式用户控件，即将一个用户控件嵌套在另一个用户控件中。应用此方法用户可以不必每次都单独引用嵌套在复合式用户控件中的用户控件，从而进一步增强了应用程序中的代码重用功能。该方法可以将两个或者更多的现有用户控件封装到一个控件中。

2．实施过程

实例位置：光盘\mr\02\2.3\2.3.2\01

为了更好地理解高级用户控件设计方案，下面通过开发某企业博客网中的主页为例，来介绍此方案中的实施过程。希望读者能更好地掌握这种重要的开发技术。

此方案中主要通过创建的6个用户控件来对一个博客网站首页页面进行布局设计。首先对实例中创建的6个用户控件的功能分析如下。

l Header.ascx控件。功能：用来实现界面头部的设计，如图2.20所示。在这个界面的头部中主要实现用户登录、用户注册和两个用户超级链接功能。

图2.20 网站头部的用户控件

图2.21 网站尾部的用户控件

l SystemNotice.ascx控件。功能：用来实现网站中部内容的设计，主要用来显示网站当前的主要内容。如图2.22所示。

图2.22 网站中部的用户控件

l VisitorNav.ascx控件。功能：用来实现此博客网站的信息导航，如图2.23所示。通过使用4个HypeLink控件，分别显示“首页”、“博客文章”、“博客注册”和“帮助”，单击每个HypeLink控件，可链接到相应的URL地址。

图2.23 网站中的导航控件

说明：此VisitorNav.ascx导航控件将被嵌入到Header.ascx用户控件中，实现的方法只需把这个导航控件以拖曳方式直接拖放到Header.ascx用户控件的适当位置中即可。此时的Header.ascx用户控件就是一个复合式用户控件。同样，以下介绍的Left.ascx控件也是一个复合式用户控件。

l Calendar.ascx控件。功能：将日历控件（即Calendar控件）添加到Left.ascx用户控件中使之成为网站左侧设计的一部分。日历控件如图2.24所示。

l Left.ascx控件。功能：用来设计此博客网站的左侧内容，如图2.25所示。此控件显示了一个日历控件和一张“明日科技”公司的形象标志图片。