ASP.NET用户控件说明和添加事件

在WEB开发中经常有一些代码是在很多地方重复出现的，象导航栏、用户登录/注册和首页上面的一些固定栏目等。这些可重用的代码我们可以把它写成一个通用模块供需要的地方来引用，这样做即节省了开发时间还方便以后的维护。

在ASP.NET的web编程中提供了一种叫做“用户控件”可以帮助我们完成这种做法，其文件扩展名是“.ascx”，由于ascx文件是用来插入ASPX页面中使用的，而一个ASPX窗体只能包含一个<form>标志，所以ascx用户控件不能包含<form></form>标志。

 

1、下面使用一个经典入门范例来创建一个简单的用户控件:

Hello.ascx  <html>     <body>       <h1> 经典入门范例</h1> <hr>       <h3>Hello Word</h3>     </body>   </html>

把这段代码保存为Hello.ascx文件，然后在ASPX页面上调用，具体调用如下：

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运行，将在页面上打印出字符串“Hello word”。

代码说明：1）指令@Register定义了用户控件文件的标签名“Hello”和标签前缀名”wen；”

                    2）src属性是连接到用户控件的相关的文件名；

         3）<wen:Hello ID=MyHello runat=server>这一句是在ASPX窗体中调用用户控件Hello.ascx的语句。

 

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

 

2、以下的演示代码给控件添加属性

下面我们举一个用户登录的文件，把它写成用户控件，在向其中添加UserName和PassWord这两个属性。

向用户控件添加属性很简单，只要在ascx文件中的<script></script>块中定义就行了。   至此，我们已经给UserLogin.ascx文件添加了UserName和PassWord这两个属性了，以下DEMO演示如何在ASPX页面上引用这两个属性。

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、以下的演示代码给控件添加事件

在上面我们定义了一个用户登录的用户控件UserLogin.ascx 文件，里面包含了一个LinkButton服务器按钮控件，当用户单击该按钮时服务器端会自动生成一个回发来激发Page.Load事件。除了服务器自动产生回发来激发Page.Load事件外，我们可以给LinkButton添加一个它自己的事件，添加事件其实也很简单，通过在<script></script>块中声明事件，然后把该事件添加到用户控件中。

我们现在通过以下的例子来说明如何在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页面中使用自定义事件：

<%@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 文件添加的事件。