ASP.NET用户控件的创建和使用

 

1、 Web用户控件概述

Web用户控件是一种服务器控件，它与ASP.NET页面有着同样的所见即所得的特点，并以.ascx为扩展名存储为文本文件，同样具有自己的界面和代码，它比服务器控件提供了更多的功能，为创建具有复杂的用户界面元素代来极大的方便

1） Web控件与普通控件比较

1）用户控件的文件扩展名为.ascx

2) 没有@Page指令，而是包含@Control指令，该指令对配置及其他属性进行定义

3）不能作为独立文件运行，而必须象处理任何控件一样，将它们添加到ASP.NET页中

4）用户控件没有html,body,form元素，但同样可以在用户控件上使用HTML元素和WEB控件

2） 用户控件的优点

1）可能将常用的内容或者控件以及控件的运行程序逻辑，设计为用户控件，然后重复使用，例如网页上的导航栏，几乎每个页都需要相同的导航栏，这时可以将其设计为用户控件，在多个页中使用

2）如果网页内容需要改变，只需要修改用户控件中的内容即可

总之，对于页面上重复使用的元素，如导航，站内搜索，用户注册和登录等，都可以将其代码封装到WEB用户控件中，以减少代码量，此外，使用用户控件的高速缓存功能，可以提高页面的性能，因此母板页其实就是一种用户控件。

3) 应该注意的问题

1）不能将用户控件放入网站的App_Code文件夹中，否则运行时将出错，用户控件属于System.Web.UI.UserControl类，它直接继承于System.Web.UI.Control

2) 创建好用户控件后，必须添加到其他WEB页中才能显示出来，不能直接单独显示运行，不能设置为”起始页“

如下：

Code

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Sample.ascx.cs" Inherits="ASP.NET_3._5.UC.Sample" %>

<asp:Label ID="ColumnName" runat="server"asp:Label>

<asp:TextBox ID="Condition" runat="server"></asp:TextBox>

<asp:Button ID="Search" runat="server" Text="搜索"/>

2、创建一个搜索数据的用户控件：

1.添加一个Sample.ascx的文件

2.从工具箱中拖入1个Lable控件，设置ID为：ColumnName

3.从工具箱中拖入1个TextBox控件，设置其属性ID为：Condition,

4.从工具箱里拖入一个Button控件，并设置其属性ID为：Search,Text为搜索。

看“源”文件如下：

Code

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Sample.ascx.cs" Inherits="ASP.NET_3._5.UC.Sample" %>

<asp:Label ID="ColumnName" runat="server"asp:Label>

<asp:TextBox ID="Condition" runat="server"></asp:TextBox>

<asp:Button ID="Search" runat="server"  Text="搜索"/>

5，打开Search.ascx.cn文件看后置代码，定义如下属性

Code

public string lableText {get;set;}　　//提示用户输入什么样的查询条件

public string connectionString { get; set; }    //连接数据库

public GridView resultGridView { get; set; }    //要填充的GridView控件

public string tableName { get; set; }    //要查询数据库中的数据表名

public string columnCondition { get; set; }    //根据哪一条进行查询

public string errorMessage { get; set; }    //错误信息

6.定义一个函数，SearchResult(),该函数将会根据用户输入的查询条件查询到数据并把数据集返回，该函数要利用到数据库访问知识，代码如下：

Code

private DataTable SearchResult() {

System.Data.OleDb.OleDbConnection conn = new System.Data.OleDb.OleDbConnection(connectionString);

string strsql = "select * from " + tableName + " where " + columnCondition + " like '%" + this.Condition.Text.ToString() + "%'";

conn.Open();

System.Data.OleDb.OleDbDataAdapter ada = new System.Data.OleDb.OleDbDataAdapter(strsql,conn);

System.Data.DataTable dataTable = new DataTable();

ada.Fill(dataTable);

conn.Close();

return dataTable;

}

7.打开Search.ascx文件，双击Search按钮，则在Search.ascx.cs文件中生成按钮事件，这个事件中将绑定数据到GridView中。

1   protected void Search_Click(object sender, EventArgs e)

2         {

3             resultGridView.DataSource = SearchResult().DefaultView;

4             resultGridView.DataBind();

5         }

6

8.在Page_Load事件中加入初始化ColumnName标签代码，

protected void Page_Load(object sender, EventArgs e)

{

this.ColumnName.Text = this.lableText;

}

这样就创建好了一个搜索功能的用户控件，这个控件在哪个页面需要使用时，只需要加入到ASP.ENT页面就行了，像使用WEB控件一样。

用户控件的使用：

使用用户控件和使用web控件一样，拖入页面，然后设置他的属性就是了。

就拿刚才的搜索功能的用户控件来说，

1.在Default.aspx页面拖入用户控件

如下代码，我们在页面添加了一个ID为Sample1的用户控件和一个ID为：GridView1的GridView，并绑定数据。

Code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ASP.NET_3._5._Default" %>

<%@ Register src="UC/Sample.ascx" tagname="Sample" tagprefix="uc1" %>

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

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>用户自定义控件--搜索功能</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<uc1:Sample ID="Sample1" runat="server" lableText="城市："/>

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">

<Columns>

<asp:BoundField DataField="id" HeaderText="序号"/>

<asp:BoundField DataField="name" HeaderText="姓名"/>

<asp:BoundField DataField="city" HeaderText="城市"/>

<asp:BoundField DataField="phone" HeaderText="电话"/>

<asp:BoundField DataField="carrier" HeaderText="职业"/>

<asp:BoundField DataField="positon" HeaderText="职位"/>

</Columns>

</asp:GridView>

</div>

</form>

</body>

</html>

设置页面加载事件

因为页面已经添加了控件，所以后台代码就可以设置控件的属性的值了，

Sample1.connectionString 设置连接字符串，

Sample1.columnCondition 设置按哪个字段查询

Sample1.tableName = "basic" 设置查询哪个表，

Sample1.resultGridView = this.GridView1。设置控件的GridView

Code

protected void Page_Load(object sender, EventArgs e)

{

Sample1.connectionString = @"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=D:\YtbWork\donet\ASP.NET 3.5\ASP.NET 3.5\App_Data\db1.mdb";

Sample1.columnCondition = "city";

Sample1.resultGridView = this.GridView1;

Sample1.tableName = "basic";

}

因为我们在控件的按钮事件中有如下代码，所以，当点击搜索，就会绑定数据到GridView

protected void Search_Click(object sender, EventArgs e)

{

resultGridView.DataSource = SearchResult().DefaultView;

resultGridView.DataBind();

}

分析用户控件的创建和使用：

<%@ Register src="UC/Sample.ascx" tagname="Sample" tagprefix="uc1" %>

<uc1:Sample ID="Sample1" runat="server" lableText="城市："/>