教学思路ASP.Net之服务器控件:一、Label、TextBox、HyperLink、三种Button控件-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

教学思路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如需转载请自行联系原作者

叶子文文

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章