天天看點

[ASP.NET開發系列]在使用者控件中添加屬性和事件

在WEB開發中經常有一些代碼是在很多地方重複出現的,象導航欄、使用者登入/注冊和首頁上面的一些固定欄目等。這些可重用的代碼我們可以把它寫成一個通用子產品供需要的地方來引用,這樣做即節省了開發時間還友善以後的維護。

在ASP.NET的web程式設計中提供了一種叫做“使用者控件”可以幫助我們完成這種做法,其檔案擴充名是“.ascx”,由于ascx檔案是用來插入ASPX頁面中使用的,而一個ASPX窗體隻能包含一個<form>标志,是以ascx使用者控件不能包含<form></form>标志。

下面使用一個經典入門範例來建立一個簡單的使用者控件,檔案名為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的語句。

以上的示範代碼沒有給控件添加屬性,下面我們舉一個使用者登入的檔案,把它寫成使用者控件,在向其中添加UserName和PassWord這兩個屬性。向使用者控件添加屬性很簡單,隻要在ascx檔案中的<script></script>塊中定義就行了。

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.ascx檔案添加了UserName和PassWord這兩個屬性了,以下DEMO示範如何在ASPX頁面上引用這兩個屬性。

UserLogin.aspx

<%@Register TagPrefix=”wen” TagName=”UserLoginContorl” src=” UserLogin.ascx” %>

<html>

<title>引用屬性</title>

<body>

  <form runat=”server”>

    <wen: UserLogin.ascx  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>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

在《在使用者控件中添加屬性》這一篇文章中我們定義了一個使用者登入的使用者控件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檔案添加的事件。