[ASP.NET开发系列]在用户控件中添加属性

80酷酷网    80kuku.com

  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

< TagPrefix=”wen” TagName=”Hello” src=”Hello.ascx”%>

<html>

<body>

  <form id=frm runat=server>

   <wen:Hello ID=MyHello runat=server>

  </form>

</body>

</html>

 在IE浏览器的地址里输入 运行,将在页面上打印出字符串“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

< 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”>

  密  码:<asp:Label ID=”Lab2”  runat=”server”>

</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>

分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: