教学思路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来布置,选择一张本地图片,目前的学习我还不打算写任何代码,一切得操作到是在设计界面的属性界面可以做到如上效果。
< %@ Page  Language ="C#"  AutoEventWireup ="true"     CodeFile ="Default.aspx.cs"  Inherits ="_Default" % > 
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 
< html  xmlns ="http://www.w3.org/1999/xhtml" > 
< head  runat ="server" > 
5          < title >无标题页 </title> 
</head> 
< 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#语句我会在讲过常用的控件用法后具体讲解!
本文转自叶子文文博客51CTO博客,原文链接http://blog.51cto.com/leafwf/185688如需转载请自行联系原作者

叶子文文
相关文章
|
3月前
|
开发框架 前端开发 JavaScript
盘点72个ASP.NET Core源码Net爱好者不容错过
盘点72个ASP.NET Core源码Net爱好者不容错过
68 0
|
3月前
|
开发框架 .NET
ASP.NET Core NET7 增加session的方法
ASP.NET Core NET7 增加session的方法
37 0
|
6月前
|
开发框架 前端开发 .NET
Ajax之三 Ajax服务器端控件(下)
Ajax之三 Ajax服务器端控件(下)
45 0
|
6月前
|
开发框架 前端开发 JavaScript
Ajax之三 Ajax服务器端控件(上)
Ajax之三 Ajax服务器端控件
33 0
|
29天前
|
开发框架 前端开发 .NET
进入ASP .net mvc的世界
进入ASP .net mvc的世界
28 0
|
2月前
|
SQL 开发框架 前端开发
ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
32 0
|
4月前
|
JavaScript C#
【傻瓜级JS-DLL-WINCC-PLC交互】2.wincc使用C#开发的.net控件
【傻瓜级JS-DLL-WINCC-PLC交互】2.wincc使用C#开发的.net控件
40 0
|
4月前
|
JavaScript Linux C#
【傻瓜级JS-DLL-WINCC-PLC交互】1.C#用windows窗体控件创建.net控件
【傻瓜级JS-DLL-WINCC-PLC交互】1.C#用windows窗体控件创建.net控件
65 0
|
4月前
|
开发框架 .NET 数据安全/隐私保护
Asp.Net第二章服务器端控件
Asp.Net第二章服务器端控件
27 0
|
4月前
|
开发框架 JavaScript .NET
Asp.Net就业课之三验证控件
Asp.Net就业课之三验证控件
44 0

热门文章

最新文章