第五讲 基本 Web服务器控件的应用教学内容一,ASP.NET控件概述二,Label,TextBox,Button控件三、登录页面设计四、注册页面设计教学目标一、了解 ASP.NET控件的基本知识;
二、掌握 Label控件,TextBox控件和 Button控件使用;
三、掌握登录页面设计方法;
四、掌握注册页面设计方法。
一,ASP.NET控件概述
在 ASP.NET页面中,可以使用两种类型的控件:
HTML控件 和 Web服务器窗体控件 。
(一 )HTML控件
HTML控件由 HTML标签转化而来,主要用来在网页上显示静态信息。由于提供了各种类型的 HTML控件,使用它们来展示信息就显得十分的方便,对于文字、表格、图像等都有对应的控件可以选择。
由于 HTML控件由 HTML标签转化而来,它作为客户端项表现出来,因而不能为其编写服务器代码。
然而也可以将 HTML控件作为服务器控件使用,这时需要在其 HTML标签内加上属性 runat=server,就可以为其编写程序代码了。
注意:
所有的服务器控件都需要占用系统资源,
若不需要为其编写服务器代码,就没有必要将其转化为服务器控件。若已经转化了,
将其转换回来就是,方法是在页面的控件上击右键,于弹出菜单上去掉“作为服务器控件运行”的勾选,或者在其 HTML标记上去掉 runat=”server”属性。
HTML服务器控件具有以下几个重要特点:
可在服务器上使用面向对象技术对其进行编程控制,
这为编程开发提供了便利。
提供了一组事件,可以为事件编写事件处理程序。
自动维护控件状态。在页面窗体到服务器端往返期间,
用户在 HTML服务器控件中输入的值将在页面回传中自动维护。
与验证控件进行交互。便于验证用户是否在控件输入了适当的信息。
允许在 HTML服务器控件中自定义属性。开发人员可以将任何需要的属性添加到 HTML服务器控件的属性集中,页框架将读取并呈现它们而不更改其他任何功能。
工具箱的,HTML”选项卡上提供多个基于 HTML
input元素的控件:
Input (Text) 控件,input type="text"元素
Input (Password) 控件,input type="password"元素
Input (Button) 控件,input type="button"元素
Input (Submit) 控件,input type="submit"元素
Input (Reset) 控件,input type="reset"元素
Input (Checkbox) 控件,input type="checkbox"元素
Input (Radio) 控件,input type="radio"元素
Input (File) 控件,input type="file"元素
Input (Hidden) 控件,input type="hidden"元素
关于 HTML控件的几点说明:
一,HTML控件的使用和同学们在学习DW时的相关内容基本保持一致。
二,在使用 HTML控件时要和 HTML脚本语言的标记和属性紧密的结合起来。
三、要注意在 HTML控件和服务器控件之间进行合理选择。
(二 ) Web服务器控件
1、服务器控件的定义在网页上经常会遇到填写注册信息一类的界面,一般包括文本框、单选框、复选框、
下拉列表和按钮等基本元素,这些基本元素就是 控件 。 服务器控件 是一种在服务器端完成的控件,服务器端在处理完控件动作后,
再生成标准的 HTML文件发送给客户端。服务器控件在页中使用包含属性 runat="server"
声明性标记标识。
2,Web服务器控件
标准的 Web服务器控件,包括最常用的控件,
这类控件在网页中占 90%。主要是指传统的 Web窗体控件。
数据控件,这类控件用来链接数据源。该类控件可细分为两种类型:数据源控件和数据绑定控件。
导航控件,与站点导航数据结合,实现站点导航功能。
登录控件,为 Web应用程序提供可靠完整的登录解决方案。
3、服务器控件的创建
在设计视图中创建服务器控件
在源视图中创建服务器控件
<asp:button ID="button"
runat="server" ></asp:button>
4、设置控件的属性
设置控件的属性将定义其外观和行为。有两种方式设置控件属性:
在“设计”视图中,选择控件,然后在“属性”
窗口中设置属性。
在“源”视图中,在控件的元素标记中置入插入点,然后在“属性”窗口中设置属性。
例如:
<asp:Label ID="Label1" runat ="server"
Text="这是第一个 label控件 " ForeColor="Blue"
Font-Size="Small" Font-Bold="true">
</asp:Label>
<asp:Label ID="Label2" runat="server"
Text="这是第二个 label控件 " ForeColor="Red"
Font-Size="Medium" Font-Italic="true">
</asp:Label>
<asp:Label ID="Label3" runat="server"
Text="这是第三个 label控件 " ForeColor="Green"
Font-Size="Large" Font-Underline="true">
</asp:Label>
5、服务器控件的基本属性
ASP.NET服务器控件 的公有属性
AccessKey属性:用来为控件指定键盘的快速键,
这个属性的内容为数字或是英文字母。例如设置为
,A”,那么使用时用户按下 Alt+A组合键就会制动将焦点移动到这个控件的上面。只有 Internet Explorer
4.0或者更高的版本才支持这个特性。
Backcolor属性用于设置对象的背景色,其属性的设定值为颜色名称或是 #RRGGBB 的格式。边框属性包括有 BorderWidth,BorderColor,BorderStyle等几个属性。其中,BorderWidth属性可以用设定 Web控件的边框宽度,单位是像素计算。
Enabled属性用于设置禁止控件还是使能控件。当该属性值为 False时,控件为禁止状态。当该属性值为
True时控件为使能状态,对于有输入焦点的控件,用户可以对控件执行一定的操作。
Font属性有以下几个子属性,分别表现不同的字体特性,Font-Bold:如果属性值设定为 True,则会变成粗体显示。 Font-Italic:如果属性值设定为 True,
则会变成斜体显示。 Font-Names:设置字体的名字。
Font-Size:设置字体大小,共有九种大小可供选择
Smaller,Larger,XX-Small,X-Small,Small、
Medium,Large,X-Large或者 XX-Large。
Font-Strikeout:如果属性值设定为 True,则文字中间显示一条删除线。 Font-Underline:如果属性值设定为 True,则文字下面显示一条底线。
TabIndex属性用来设置 Tab按钮的顺序。当用户使用者按下 Tab键时,输入焦点将从当前控件跳转到下一个可以获得焦点的控件,TabIndex属性就是用于定义这种跳转顺序的。合理的使用 TabIndex属性,可以使用户使用程序时更加轻松,使得程序更加人性化。
ToolTip属性用于设置控件的提示信息。在设置了该属性值后,当鼠标停留在 Web 控件上一小段时间后就会出现 ToolTip属性中设置的文字。
Visible 属性决定了控件是否会被显示,如果属性值为 true将显示该控件,否则将隐藏该控件。
Height和 Width属性分别用于设置控件的高度和宽度,单位是 pixel(像素)。
6、服务器控件的标识
利用每个服务器控件的 id属性标识该控件,对它进行操作,如下例。
<script language ="c#" runat ="server">
void page_load(object Src,EventArgs e)
{
Label1.Text = "欢迎你的到来 ";
}
</script>
<body>
<asp:Label ID="Label1" runat="server">
</asp:Label>
</body>
7、服务器控件事件
可以为 Web服务器控件创建事件处理程序。
如在 ASP.NET页面上添加一个按钮,然后为该按钮的 Click事件编写事件处理程序。
与传统 HTML页或基于客户端的 Web应用程序中的事件相比,由 ASP.NET服务器控件引发的事件的工作方式稍有不同,因为与服务器控件关联的事件是在客户端触发的,但是由 ASP.NET页在服务器上处理的。
服务器控件的基本事件
(三 ) HTML控件和 Web窗体控件的选用在一个 Web Form网页上可以同时使用 HTML控件和 Web
窗体控件,两类控件中有一些控件的功能是对应的,如都有
Label控件。在选择控件时如何把握呢?
1.使用 HTML控件
● 如果需要将已有的 ASP网页转换成 ASP.NET网页,则可选择 HTML控件。由于 HTML服务器控件可以方便地对应于
HTML项,所有的 HTML设计环境都会支持它。
● 当控件需要与客户端互动时,则使用 HTML服务器控件。
● 有些 HTML控件功能在 Web窗体控件中找不到对应控件时,就只能使用 HTML控件。 例如常常使用 Table HTML控件在页面上定位,使用 File Field HTML控件浏览文件目录和选择文件,这两个 HTML控件在 Web窗体控件中找不到合适的对应控件。
(四 ) 控 件 使用的步骤
1.加入控件到页面
2.调整控件的位置与大小
3.设置或获取控件的属性
4.编写事件处理程序三,Label控件
Label控件称为标签,或静态文本,它的文本是可以由程序代码改变的,但程序运行后不能由用户改变。 Label控件主要用作显示文本,作用在于提示信息(提示输入、提示错误)
和展示文本信息。
(一 )HTML标记
<asp:Label id=“Label1” runat=“server”>姓名
</asp:Label>
标记了一个 Label控件,其 ID为 Label1,为 Web服务器控件,在页面上显示“姓名”两个汉字。
(二 )常用属性
ID属性,用于惟一标识该控件,默认值为类名 Label之后加上,1”、,2”等。可以在其属性窗口修改这个属性值。如将
Label1修改为 LabelName,表示用来显示姓名。
Text属性,设置控件显示在页面上的文本内容,上面的
HTML标记中的“姓名”就是 Text属性值。 Text属性值的类型为 string,默认值与控件类型名相同。设置或获取 Text属性的 C#语法如下:
Object.Text=字符串 ; //给 Text属性赋值或者,字符串变量 = Object.Text; //获取 Text属性其中 Object表示当前控件的名字。例如:
Label1.Text=”姓名”; //使在控件上显示“姓名”二字或者:
string name=Label1.Text; //将控件的文本赋给一个变量 name
BorderStyle属性,设置控件的边框风格。默认值为
NotSet,无边框。可以设置为 Solid(实线框 )等。
BorderColor属性,设置控件的边框颜色。默认值为
Black,黑色。
BackColor属性,设置控件的背景颜色。默认值为 White,
白色。
ForeColor属性,设置控件的文本颜色。默认值为 Black,
黑色
Font属性,设置控件的字体。属性窗口的属性列表中,
Font属性名前有一个,+”标记,单击它可以展开其子项,包括
Name(字体名称 ),Size(大小),Bold(是否粗体 ),Italic(是否斜体),Overline(是否带上划线 ),Underline(是否带下划线 ),Strikeout(是否带删除线 )等。
Enabled属性,设置控件是否可用。当值为 true时(默认),在浏览器中可用,呈指定的色彩显示;当值为 false时,
呈灰色显示,表示不可用。
Visible属性,设置控件是否可见。当值为 true时(默认),
在浏览器中可见,否则不可见。
ToolTip属性,设置当鼠标放在控件上时显示的工具提示信息。这个属性对于以图像方式显示的控件特别有效,有时用户可能不清楚某个控件的功用,当鼠标移动到其上时,看了工具提示信息自然明白。
上述的属性中,有很多属性是大多数控件都有的。若之后的控件也具有这些属性时就不再重复说明了。
(三 )事件
Label控件也有一些事件,一般很少为 Label控件编写事件处理程序。
四,TextBox控件
TextBox控件称为文本框,主要用来接受用户的输入,
当然也可以用于输出信息。
(一 )HTML标记
<asp:TextBox id="TextBox1" runat="server">
</asp:TextBox>
标记了一个 TextBox控件,ID属性为 TextBox1,为 Web
服务器控件,没有默认的文本。
(二 )常用属性
Text属性,设置或获取文本框的文本内容。当用来接受用户的输入时,需要获取该属性值为程序代码所用;当用于输出信息时,需要将该属性设置到需要显示的内容。
Text属性的 C#语法如下:
Object.Text=字符串 ; //给 Text属性赋值或者:
字符串变量 = Object.Text; //获取 Text属性其中 Object表示当前控件的名字。例如:
TextBox1.Text=”张山”; //使在文本框内显示“张山”二字或者:
string name= TextBox1.Text; //将文本框中的文本赋给一个变量 name
TextMode属性,设置文本框的行为模式。其值可为:
● SingleLine:单行模式(默认)。只能单行显示文本。
● MultiLine:多行模式。可以多行显示文本。
● Password:密码模式。该模式下任何输入或显示的文本都是一串“●”。
MaxLength属性,设置文本框可输入的最大字符数目。
该属性对于输入邮政编码一类的数据可能需要设置。
ReadOnly属性,设置或获取文本框是否只读。当该属性值为 true时,文本框只可显示信息,不允许编辑修改信息。
AutoPostBack属性,设置文本修改后是否自动回传到服务器。当它为 false(默认)时,该控件上发生的任何客户事件都不会回传到服务器,为该控件编写的任何客户事件处理程序代码都不会被执行。
(三 )常用事件
TextChange事件当文本框内的文本改变时发生。 TextBox控件有一个特例,它的 TextChange事件为非回传事件,即使将其
AutoPostBack属性设置为 true,当文本框内的文本发生改变时也不会执行为 TextChange事件编写的程序代码,而是将消息缓存起来,等到下一次提交发生时才会去执行
TextChange事件处理程序代码。
为何要将文本框的 TextChange事件规定为非回传事件呢?
若非如此,每当在文本框中按下一输入键或删除键,就有该事件回传,可能引起网络的拥堵。
(四 )常用方法
DataBind方法,将数据源绑定到控件。若已经将 TextBox控件的某个属性(例如 Text属性)绑定到了数据源,当数据源初始化或更新之后,一定要调用这个方法将数据源绑定到控件。否则,控件就不能显示数据,甚至连控件本身都不会显示。
Web Form网页本身也有这个方法,其作用是相同的。若在网页中调用了它自己的 DataBind方法,
则可以免去网页中每个控件对自身的 DataBind方法的调用。
五,Button控件
Button控件称为命令按钮,用来实现向服务器提交网页。
(一 )HTML标记
<asp:Button id=“Button1” runat=“server” Text=“提交” >
</asp:Button>
标记了一个 Button控件,ID属性为 Button1,为 Web服务器控件,标题文字为“提交”。
(二 )常用属性
Text属性,显示在命令按钮上的文本,一般用来说明按钮的功能,例如“登录”。
(三 )常用事件
Click事件:在命令按钮上单击时激发。一定会为这个事件编写事件处理程序,若一个命令按钮被单击时什么事也不做,这个按钮是不需要的。
(2)Button,LinkButton和 ImageButton按钮控件网页控件中的按钮分为三种,Button、
LinkButton和 ImageButton。它们之间功能相同,
只有外观上有区别。 Button的外观与传统按钮的外观相同; LinkButton的外观与超链接字符串相同; ImageButton按钮用图形方式显示外观,其图像通过 ImageURL属性来 设置。
三种按钮的功能都与 HTML的提交按钮 (Submit
Button)相似,即每当这些按钮被单击 (Click)时,
就将缓冲区中的事件信息一并提交给服务器。
定义按钮的语法如下:
<asp:Button id="Button1" runat="server"Text="按钮
"></asp:Button>
<asp:LINKbutton id="LinkButton1"runat="server">链接按钮 </asp:LinkButton>
<asp:ImageButton
id="ImageButton1"runat="servervImageUrl="?"></asp;I
mageButton>
用鼠标双击 LinkButton按钮,然后在隐藏文件中给按钮的
Click事件写出以下程序,该按钮即可通过服务器转向新的网页,从而起到“超链接”的作用。
private void LinkButton1_Click(object sender,
System.EventArgs e)
{
Response.Redirect("其他窗体的 URL");
}
另外,三种按钮都有一个 PostBackUrl属性,利用这个属性可以将按钮变成“返回”按钮。即先将该属性设置成某个网页的 URL,以后单击该按钮时就会直接转向该网页。
六、登录页面设计登录页面为用户从这里登录到某个页面而设计,其设计内容就是核对用户名和密码。登录页面设计的主要技术是使用 SQL语言的
select命令从数据表查询符合条件的行。
(一 )设计数据库设计一个 SQL
Server数据库 MMIS,
其下设计一个数据表
memberInfo,表的结构如右。向表内输入若干条记录。
列名 数据类型长度 允许空 是否主键账号 char 10 No Yes
姓名 char 10 No No
性别 char 2 No No
家庭住址 char 50 No No
联系电话 char 20 No No
Email char 20 No No
密码 char 20 No No
取回密码问题 char 20 No No
取回密码答案 char 20 No No
(二 )设置数据库的访问权限为了使 ASP.NET应用程序能够匿名访问数据库
MMIS,需要编辑登录用户
ASPNET对它的访问权限。
(三 )设计页面登录页面在浏览器中的效果如右图。
在页面内使用两个 Label标签控件指示用户输入,两个
TextBox文本框控件接收用户输入,一个 Button命令按钮提交登录,还有一个 Label标签控件( id=”LabelMessage”)用于显示登录成功与否的信息。
(四 )数据库连接使用数据连接向导将页面连接到数据库 MMIS,连接步骤见 5.2.3节。此举在页面上创建 3个 ADO.NET对象:数据连接对象 sqlConnection1,数据适配器对象
sqlDataAdapter1和数据集对象 dataSet11。
(五 )编写 C#后台代码在控件 Button1上双击,切换到 C#代码编辑窗口。
为了在程序中使用针对 SQL Server的数据对象,首先在程序头部加入 using System.Data.SqlClient;行,以导入名字空间 SqlClient,否则程序中使用到以 Sql开头的
ADO.NET基类时不能通过编译。
编写命令按钮 Button1_Click事件处理程序,在该段程序中实现对用户登录事务的处理。
“登录”按钮被单击的程序代码
private void Button1_Click(object sender,System.EventArgs e)
{
string number=this.TextBoxNo.Text;
string password=this.TextBoxPass.Text;
SqlCommand
myCommand=this.sqlConnection1.CreateCommand();
myCommand.CommandText="select * from memberInfo
where 账号 ='"+ number+"'and 密码 ='"+password+"'";
this.sqlDataAdapter1.SelectCommand=myCommand;
int n=this.sqlDataAdapter1.Fill(dataSet11,"memberInfo");
if(n==1)
this.LabelMessage.Text="恭喜,您能够成功登录 ";
else
this.LabelMessage.Text="抱歉,您不能够成功登录 ";
}
七、注册页面设计所谓注册,实际上就是将用户输入的个人信息保存到一个数据表,以备后用。注册页面设计的主要技术是使用 SQL语言的
insert命令插入记录到数据表。本小节的示例仍然使用 6.2.4节的数据库 MMIS的
memberInfo数据表。
(一 )设计页面注册页面在浏览器中的效果如右图。
(二 )数据库连接采用程序代码连接数据库并创建 3个 ADO.NET对象:数据连接对象 sqlConnection1,数据适配器对象 sqlDataAdapter1
和数据集对象 dataSet11。
static string connection="workstation id=localhost;initial"
+"catalog=MMIS;persist security info=False";
Private SqlConnection sqlConnection1=new
SqlConnection(connection);
private SqlDataAdapter sqlDataAdapter1=new
SqlDataAdapter();
private DataSet dataSet11=new DataSet();
这一段代码写在,cs文件的 public class WebForm1,
System.Web.UI.Page类中的字段声明之后,将 3个 ADO.NET
对象作为 WebForm1类的字段,以便在该类的任何方法中都能访问得到。
(三 )编写 C#后台代码事件处理程序 Button1_Click的几个要点。
● 在程序中需要检查“账号”的空值和重复,因为它为主键,插入记录时不能违反主键的非空和惟一性约束。
“账号”为空或重复时不允许插入。
● 需要检查“密码”和“重复密码”是否相同,这两个值不相同时不允许插入。
● 使用 SQL语言的 Insert命令插入记录。
● 插入记录的代码需要采用异常处理格式编写,以便插入记录出现异常时得到处理。