教学思路ASP.Net之服务器控件：一、Label、TextBox、HyperLink、三种Button控件

     在ASP.net中，控件主要分为HTML控件和服务器控件，具体在页面中采用哪一类的控件，随着学习的深入和开发经验的积累，同学们会慢慢的熟练起来，就目前而言，服务器控件在学习中使用的比较频繁，而且在用法上和Winform很类型，为了更好的过渡，我们先教授服务器控件，首先，让我们从最简单的label控件开始学习。

        服务器控件在一个页面的源代码中必须使用<asp: Contolstype（控件类型如：Label） ID=”控件名称”runat=“server”  Text=“控件上的文字” >控件的作用范围，如：在控件上的显示绑定的数据</asp:>，如果控件没有需要作用的范围也可以采用没有闭元素的形式，如：<asp: Contolstype（控件类型如：Label） ID=”控件名称”runat=“server”  Text=“控件上的文字”Contolstype（控件类型如：Label） />，这是一种XHTML的书写格式。

      label控件除了能起到标签的作用，比如我们可以像Winform中一样，设置其Text属性，还能起到给页面添加热键的功能，终端用户在网页上执行操作的用Alt+热键即可。在给控件设置热键时，要避免IE已经使用了的Alt+F、E、V、I、O、T、A、W、H，如果使用了这些字母，IE操作就会替代我们在页面上的操作。

     

       TextBox控件的使用中与Winform有一个属性是需要记住的，TextMode文本的行为模式，值分别为：single单行输入文本、MultiLine多行输入文本、Password密码输入文本，当TextBox支持多行时，一定还需要修改wrap属性，将其改为True，这样输入的文本可以根据文本框的width自动进行换行，而不是需要用户输入回车进行换行； AutoCompleteType 属性增加了自动完成功能，会记录下此符合此属性值的历史填写记录，当其值是None时， TextBox 控件与不同页面上具有相同 ID 属性的其他 TextBox 控件共享该列表，当其值为 Disabled视为取消自动完成功能。

       HyperLink控件会在页面出现超链接的效果，可以设置NavigateUrl属性点击后将从一个页面转向NavigateUrl属性值的页面，类似于<a>标签，Text属性的值将设置为超链接的文本。如

    <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Default.aspx">使用Hyperlink控件实现超链接</asp:HyperLink>
   <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/Default.aspx"  Text="使用Hyperlink控件实现超链接"/>

       Button控件在web中分为三种样式：Button（标准的窗体按钮）、LinkButton（在按钮上显示超文本链接的按钮控件）、ImageButton（按钮的显示方式是用一张图片），如果想修改Button和LinkButton按钮的上的显示文字，同样是修改Text属性；ImageButton上的图片需要将图片的路径赋给ImagUrl属性；LinkButton中最重要的属性是PostBackUrl，值为当点击linkbutton时，可以讲页面转向到的页面地址，这个页面地址和图片路径一样都可以采用相对路径和绝对路径，

       下面同学们在工具栏里拖放两个label和两个TextBox控件，三种button到页面，布置成登录窗体的功能，因为在页面上不识别回车，所以在用户名与密码行的换行，可以在页面的源代码中使用<br/>来实现换行，请同学们试着将密码文本框改为密码形式，将标准按钮文字设置为“清空”、将linkbutton文本设置为“进入百度”，显示效果是当用到点击此按钮时，将进入到 http://www.baidu.com/,将登录按钮用Imagebutton来布置，选择一张本地图片，目前的学习我还不打算写任何代码，一切得操作到是在设计界面的属性界面可以做到如上效果。

1 < %@ Page Language ="C#" AutoEventWireup ="true"     CodeFile ="Default.aspx.cs" Inherits ="_Default" % >
2 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
3 < html xmlns ="http://www.w3.org/1999/xhtml" >
4 < head runat ="server" >
5         < title >无标题页 </title>
6 </head>
7 < body >
8         < form id ="form1" runat ="server" >
9         < div >
10         < ! --Acesskey是快捷键，AssociatedControlID是快捷键所绑定作用的控件，请同学们猜想一下label上显示的字？-- >
11                 <asp:Label ID="Label1" runat="server" Text="用户名：" AccessKey="y"    
12                         AssociatedControlID="TextBox1">User < u >n </u>ame </asp:Label>
13                         <!--AutoCompleteType属性增加了自动完成功能，值为32种，我采用了email，当
14                         填写后你会发现TextBox1中会包含所有填写过的Email形式的文本-->
15                 < asp:TextBox ID ="TextBox1" runat ="server" AutoCompleteType ="Email" > </asp:TextBox>
16                 < br />    
17                 <asp:Label ID="Label2" runat="server" Text="密     码：" AccessKey="m"    
18                         AssociatedControlID="TextBox2"> < u >P </u>assword </asp:Label>
19                 < asp:TextBox ID ="TextBox2" runat ="server" TextMode ="Password" > </asp:TextBox>
20                 < br />
21                 < ! --登录按钮采用imagebutton，图片路径为在本项目文件夹下的相对路径-- >
22                 < asp:ImageButton ID ="ImageButton1" runat ="server" ImageUrl ="~/denglu.gif" />
23                 < asp:Button ID ="Button1" runat ="server" Text ="清空" />
24                     < ! --连接按钮采用LinkButton，点击后将进入百度网页-- >
25                 < asp:LinkButton ID ="LinkButton1" runat ="server" PostBackUrl ="http://www.baidu.com" >进入百度搜索 </asp:LinkButton>
26         </div>
27         </form>
28 </body>
29 </html>

效果如下：请同学们注意留意TextBox1中AutoCompleteType属性修改后的效果图。

     有关具体代码实现具体功能的C#语句我会在讲过常用的控件用法后具体讲解！

本文出自 “叶子文文” 博客，转载请与作者联系！