在WEB開發(fā)中經(jīng)常有一些代碼是在很多地方重復(fù)出現(xiàn)的,象導(dǎo)航欄、用戶登錄/注冊(cè)和首頁(yè)上面的一些固定欄目等。這些可重用的代碼我們可以把它寫成一個(gè)通用模塊供需要的地方來引用,這樣做即節(jié)省了開發(fā)時(shí)間還方便以后的維護(hù)。
在ASP.NET的web編程中提供了一種叫做“用戶控件”可以幫助我們完成這種做法,其文件擴(kuò)展名是“.ascx”,由于ascx文件是用來插入ASPX頁(yè)面中使用的,而一個(gè)ASPX窗體只能包含一個(gè)<form>標(biāo)志,所以ascx用戶控件不能包含<form></form>標(biāo)志。
1、下面使用一個(gè)經(jīng)典入門范例來創(chuàng)建一個(gè)簡(jiǎn)單的用戶控件:
Hello.ascx
<html>
<body>
<h1>經(jīng)典入門范例</h1><hr>
<h3>Hello Word</h3>
</body>
</html>
把這段代碼保存為Hello.ascx文件,然后在ASPX頁(yè)面上調(diào)用,具體調(diào)用如下:
Hello.aspx <%@Register TagPrefix=”wen” TagName=”Hello” src=”Hello.ascx”%>
<html>
<body>
<form id=frm runat=server>
<wen:Hello ID=MyHello runat=server>
</form>
</body>
</html>
在IE瀏覽器的地址里輸入
http://localhost/Hello.aspx運(yùn)行,將在頁(yè)面上打印出字符串“Hello word”。代碼說明:1)
指令@Register定義了用戶控件文件的標(biāo)簽名“Hello”和標(biāo)簽前綴名”wen;”
2)src屬性是連接到用戶控件的相關(guān)的文件名;
3)<wen:Hello ID=MyHello runat=server>這一句是在ASPX窗體中調(diào)用用戶控件Hello.ascx的語(yǔ)句。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
2、以下的演示代碼給控件添加屬性
下面我們舉一個(gè)用戶登錄的文件,把它寫成用戶控件,在向其中添加UserName和PassWord這兩個(gè)屬性。
向用戶控件添加屬性很簡(jiǎn)單,只要在ascx文件中的<script></script>塊中定義就行了。 至此,我們已經(jīng)給UserLogin.ascx文件添加了UserName和PassWord這兩個(gè)屬性了,以下DEMO演示如何在ASPX頁(yè)面上引用這兩個(gè)屬性。
UserLogin.ascx <html>
<title>用戶登錄</title>
<body>
<table>
<tr>
<td>用戶名:</td>
<td><asp:TextBox ID=”txt1” runat=”server”></td>
</tr>
<tr>
<td>密 碼:</td>
<td><asp:TextBox ID=”txt2” TextMode=”password” runat=”server”></td>
</tr>
<hr>
<tr>
<td></td>
<td><asp:LinkButton Text=”登陸” runat=”server”></td>
</tr>
</table>
</body>
</html>
<script language=”C#” runat=”server”>
public string UserName{
get{return txt1.Text;}
set{txt1.Text=value;}
}
public string PassWord{
get{return txt2.Text;}
set{txt2.Text=value;}
}
</script>
UserLogin.aspx
<%@Register TagPrefix=”wen” TagName=”UserLogin” src=” UserLogin.ascx” %>
<html>
<title>引用屬性</title>
<body>
<form runat=”server”>
<wen: UserLogin ID=”MyLogin” runat=”server”>
</form>
用戶名:<asp:Label ID=”Lab1” runat=”server”/><br>
密 碼:<asp:Label ID=”Lab2” runat=”server”/><br>
</body>
</html>
<script language=”C#” runat=”server”>
void Page_Load(Object sender,EventArgs e){
if(IsPostBack){
Lab1.Text=MyLogin.UserName;
Lab2.Text=MyLogin.PassWord;
}
}
</script>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
3、以下的演示代碼給控件添加事件
在上面我們定義了一個(gè)用戶登錄的用戶控件UserLogin.ascx 文件,里面包含了一個(gè)LinkButton服務(wù)器按鈕控件,當(dāng)用戶單擊該按鈕時(shí)服務(wù)器端會(huì)自動(dòng)生成一個(gè)回發(fā)來激發(fā)Page.Load事件。除了服務(wù)器自動(dòng)產(chǎn)生回發(fā)來激發(fā)Page.Load事件外,我們可以給LinkButton添加一個(gè)它自己的事件,添加事件其實(shí)也很簡(jiǎn)單,通過在<script></script>塊中聲明事件,然后把該事件添加到用戶控件中。
我們現(xiàn)在通過以下的例子來說明如何在UserLogin.ascx用戶控件中添加事件。 UserLogin.ascx <html>
<title>用戶登錄</title>
<body>
<table>
<tr>
<td>用戶名:</td>
<td><asp:TextBox ID=”txt1” runat=”server”></td>
</tr>
<tr>
<td>密 碼:</td>
<td><asp:TextBox ID=”txt2” TextMode=”password” runat=”server”></td>
</tr>
<hr>
<tr>
<td></td>
<td><asp:LinkButton Text=”登陸” OnClick=”MyOnClick” runat=”server”></td>
</tr>
</table>
</body>
</html>
<script language=”C#” runat=”server”>
public string UserName{
get{return txt1.Text;}
set{txt1.Text=value;}
}
public string PassWord{
get{return txt2.Text;}
set{txt2.Text=value;}
}
public event Eventhandler Login; //添加事件句柄
void MyOnClick(Object Sender,EventArgs e){
if(Login != null)
Login(this,new EventArgs()); //激活Login事件
}
</script>
在ASPX頁(yè)面中使用自定義事件:
<%@Register TagPrefix=”wen” TagName=”UserEvent” src=” UserLogin.ascx”%> <html>
<body>
<form runat=server>
<wen:UserEvent ID=”MyLogin” OnLogin=”OnLoginPress” runat=”server”>
</form>
<asp:Label ID=”Lab1” runat=”server”/><br>
<asp:Label ID=”Lab2” runat=”server”/><br>
</body>
</html>
<script Language=”C#” runat=”server”>
void OnLoginPress(Object Render, EventArgs e){
Lab1.Text=MyLogin.UserName;
Lab2.Text=MyLogin.PassWord;
}
</script>
說明:這里的OnLogin事件是我們給用戶控件UserLogin.ascx文件添加的事件。