[ASP.NET開發系列]在用戶控件中添加屬性

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

asp.netweb編程中提供了一種叫做“用戶控件”可以幫助我們完成這種做法,其文件擴展名是“.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

         2src屬性是連接到用戶控件的相關的文件名;

         3<wen:Hello ID=MyHello runat=server>這一句是在ASPX窗體中調用用戶控件Hello.ascx的語句。

以上的演示代碼沒有給控件添加屬性,下面我們舉一個用戶登錄的文件,把它寫成用戶控件,在向其中添加UserNamePassWord這兩個屬性。向用戶控件添加屬性很簡單,只要在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文件添加了UserNamePassWord這兩個屬性了,以下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>

發佈了159 篇原創文章 · 獲贊 3 · 訪問量 19萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章