ASPNET35开发大全第5章.docx
《ASPNET35开发大全第5章.docx》由会员分享,可在线阅读,更多相关《ASPNET35开发大全第5章.docx(64页珍藏版)》请在冰点文库上搜索。
ASPNET35开发大全第5章
第5章Web窗体的基本控件
与ASP不同的是,ASP.NET提供了大量的控件,这些控件能够轻松的实现一个交互复杂的Web应用功能。
在传统的ASP开发中,让开发人员最为烦恼的是代码的重用性太低,以及事件代码和页面代码不能很好的分开。
而在ASP.NET中,控件不仅解决了代码重用性的问题,对于初学者而言,控件还简单易用并能够轻松上手、投入开发。
5.1控件的属性
每个控件都有一些公共属性,例如字体颜色、边框的颜色、样式等。
在VisualStudio2008中,当开发人员将鼠标选择了相应的控件后,属性栏中会简单的介绍该属性的作用。
如图5-1所示。
图5-1控件的属性
属性栏用来设置控件的属性,当控件在页面被初始化时,这些将被应用到控件。
控件的属性也可以通过编程的方法在页面相应代码区域编写,示例代码如下所示。
protectedvoidPage_Load(objectsender,EventArgse)
{
Label1.Visible=false;//在Page_Load中设置Label1的可见性
}
上述代码编写了一个Page_Load(页面加载事件),当页面初次被加载时,会执行Page_Load中的代码。
这里通过编程的方法对控件的属性进行更改,当页面加载时,控件的属性会被应用并呈现在浏览器。
5.2简单控件
ASP.NET提供了诸多控件,这些控件包括简单控件、数据库控件、登录控件等强大的控件。
在ASP.NET中,简单控件是最基础也是经常被使用的控件,简单控件包括标签控件(Label)、超链接控件(HyperLink)以及图像控件(Image)等。
5.2.1标签控件(Label)
在Web应用中,希望显式的文本不能被用户更改,或者当触发事件时,某一段文本能够在运行时更改,则可以使用标签控件(Label)。
开发人员可以非常方便的将标签控件拖放到页面,拖放到页面后,该页面将自动生成一段标签控件的声明代码,示例代码如下所示。
LabelID="Label1"runat="server"Text="Label">
Label>
上述代码中,声明了一个标签控件,并将这个标签控件的ID属性设置为默认值Label1。
由于该控件是服务器端控件,所以在控件属性中包含runat=“server”属性。
该代码还将标签控件的文本初始化为Label,开发人员能够配置该属性进行不同文本内容的呈现。
注意:
通常情况下,控件的ID也应该遵循良好的命名规范,以便维护。
同样,标签控件的属性能够在相应的.cs代码中初始化,示例代码如下所示。
protectedvoidPage_PreInit(objectsender,EventArgse)
{
Label1.Text="HelloWorld";//标签赋值
}
上述代码在页面初始化时为Label1的文本属性设置为“HelloWorld”。
值得注意的是,对于Label标签,同样也可以显式HTML样式,示例代码如下所示。
protectedvoidPage_PreInit(objectsender,EventArgse)
{
Label1.Text="HelloWorld
red\">AHtmlCode";//输出HTML
Label1.Font.Size=FontUnit.XXLarge;//设置字体大小
}
上述代码中,Label1的文本属性被设置为一串HTML代码,当Label文本被呈现时,会以HTML效果显式,运行结果如图5-2所示。
图5-2Label的Text属性的使用
如果开发人员只是为了显示一般的文本或者HTML效果,不推荐使用Label控件,因为当服务器控件过多,会导致性能问题。
使用静态的HTML文本能够让页面解析速度更快。
5.2.2超链接控件(HyperLink)
超链接控件相当于实现了HTML代码中的“”效果,当然,超链接控件有自己的特点,当拖动一个超链接控件到页面时,系统会自动生成控件声明代码,示例代码如下所示。
HyperLinkID="HyperLink1"runat="server">HyperLink
HyperLink>
上述代码声明了一个超链接控件,相对于HTML代码形式,超链接控件可以通过传递指定的参数来访问不同的页面。
当触发了一个事件后,超链接的属性可以被改变。
超链接控件通常使用的两个属性如下所示:
❑ImageUrl:
要显式图像的URL。
❑NavigateUrl:
要跳转的URL。
1.ImageUrl属性
设置ImageUrl属性可以设置这个超链接是以文本形式显式还是以图片文件显式,示例代码如下所示。
HyperLinkID="HyperLink1"runat="server"
ImageUrl="
HyperLink
HyperLink>
上述代码将文本形式显示的超链接变为了图片形式的超链接,虽然表现形式不同,但是不管是图片形式还是文本形式,全都实现的相同的效果。
2.Navigate属性
Navigate属性可以为无论是文本形式还是图片形式的超链接设置超链接属性,即即将跳转的页面,示例代码如下所示。
HyperLinkID="HyperLink1"runat="server"
ImageUrl="
NavigateUrl="">
HyperLink
HyperLink>
上述代码使用了图片超链接的形式。
其中图片来自“
3.动态跳转
在前面的小结讲解了超链接控件的优点,超链接控件的优点在于能够对控件进行编程,来按照用户的意愿跳转到自己跳转的页面。
以下代码实现了当用户选择QQ时,会跳转到腾讯网站,如果选择SOHU,则会跳转到SOHU页面,示例代码如下所示。
protectedvoidDropDownList1_SelectedIndexChanged(objectsender,EventArgse)
{
if(DropDownList1.Text=="qq")//如果选择qq
{
HyperLink1.Text="qq";//文本为qq
HyperLink1.NavigateUrl="";//URL为
}
else//选择sohu
{
HyperLink1.Text="sohu";//文本为sohu
HyperLink1.NavigateUrl="";//URL为
}
}
上述代码使用了DropDownList控件,当用户选择不同的值时,对HyperLink1控件进行操作。
当用户选择qq,则为HyperLink1控件配置连接为。
注意:
与标签控件相同的是,如果只是为了单纯的实现超链接,同样不推荐使用HyperLink控件,因为过多的使用服务器控件同样有可能造成性能问题。
5.2.3图像控件(Image)
图像控件用来在Web窗体中显示图像,图像控件常用的属性如下:
❑AlternateText:
在图像无法显式时显示的备用文本。
❑ImageAlign:
图像的对齐方式。
❑ImageUrl:
要显示图像的URL。
当图片无法显示的时候,图片将被替换成AlternateText属性中的文字,ImageAlign属性用来控制图片的对齐方式,而ImageUrl属性用来设置图像连接地址。
同样,HTML中也可以使用来替代图像控件,图像控件具有可控性的优点,就是通过编程来控制图像控件,图像控件基本声明代码如下所示。
ImageID="Image1"runat="server"/>
除了显示图形以外,Image控件的其他属性还允许为图像指定各种文本,各属性如下所示。
❑ToolTip:
浏览器显式在工具提示中的文本。
❑GenerateEmptyAlternateText:
如果将此属性设置为true,则呈现的图片的alt属性将设置为空。
开发人员能够为Image控件配置相应的属性以便在浏览时呈现不同的样式,创建一个Image控件也可以直接通过编写HTML代码进行呈现,示例代码如下所示。
ImageID="Image1"runat="server"
AlternateText="图片连接失效"ImageUrl="/>
上述代码设置了一个图片,并当图片失效的时候提示图片连接失效。
注意:
当双击图像控件时,系统并没有生成事件所需要的代码段,这说明Image控件不支持任何事件。
5.3文本框控件(TextBox)
在Web开发中,Web应用程序通常需要和用户进行交互,例如用户注册、登录、发帖等,那么就需要文本框控件(TextBox)来接受用户输入的信息。
开发人员还可以使用文本框控件制作高级的文本编辑器用于HTML,以及文本的输入输出。
5.3.1文本框控件的属性
通常情况下,默认的文本控件(TextBox)是一个单行的文本框,用户只能在文本框中输入一行内容。
通过修改该属性,则可以将文本框设置为多行/或者是以密码形式显示,文本框控件常用的控件属性如下所示。
❑AutoPostBack:
在文本修改以后,是否自动重传
❑Columns:
文本框的宽度。
❑EnableViewState:
控件是否自动保存其状态以用于往返过程。
❑MaxLength:
用户输入的最大字符数。
❑ReadOnly:
是否为只读。
❑Rows:
作为多行文本框时所显式的行数。
❑TextMode:
文本框的模式,设置单行,多行或者密码。
❑Wrap:
文本框是否换行。
1.AutoPostBack(自动回传)属性
在网页的交互中,如果用户提交了表单,或者执行了相应的方法,那么该页面将会发送到服务器上,服务器将执行表单的操作或者执行相应方法后,再呈现给用户,例如按钮控件、下拉菜单控件等。
如果将某个控件的AutoPostBack属性设置为true时,则如果该控件的属性被修改,那么同样会使页面自动发回到服务器。
2.EnableViewState(控件状态)属性
ViewState是ASP.NET中用来保存Web控件回传状态的一种机制,它是由ASP.NET页面框架管理的一个隐藏字段。
在回传发生时,ViewState数据同样将回传到服务器,ASP.NET框架解析ViewState字符串并为页面中的各个控件填充该属性。
而填充后,控件通过使用ViewState将数据重新恢复到以前的状态。
在使用某些特殊的控件时,如数据库控件,来显示数据库。
每次打开页面执行一次数据库往返过程是非常不明智的。
开发人员可以绑定数据,在加载页面时仅对页面设置一次,在后续的回传中,控件将自动从ViewState中重新填充,减少了数据库的往返次数,从而不使用过多的服务器资源。
在默认情况下,EnableViewState的属性值通常为true。
3.其他属性
上面的两个属性是比较重要的属性,其他的属性也经常使用。
❑MaxLength:
在注册时可以限制用户输入的字符串长度。
❑ReadOnly:
如果将此属性设置为true,那么文本框内的值是无法被修改的。
❑TextMode:
此属性可以设置文本框的模式,例如单行、多行和密码形式。
默认情况下,不设置TextMode属性,那么文本框默认为单行。
5.3.2文本框控件的使用
在默认情况下,文本框为单行类型,同时文本框模式也包括多行和密码,示例代码如下所示。
TextBoxID="TextBox1"runat="server">
TextBox>
TextBoxID="TextBox2"runat="server"Height="101px"TextMode="MultiLine"
Width="325px">
TextBox>
TextBoxID="TextBox3"runat="server"TextMode="Password">
TextBox>
上述代码演示了三种文本框的使用方法,上述代码运行后的结果如图5-3所示。
图5-3文本框的三种形式
文本框无论是在Web应用程序开发还是Windows应用程序开发中都是非常重要的。
文本框在用户交互中能够起到非常重要的作用。
在文本框的使用中,通常需要获取用户在文本框中输入的值或者检查文本框属性是否被改写。
当获取用户的值的时候,必须通过一段代码来控制。
文本框控件HTML页面示例代码如下所示。
LabelID="Label1"runat="server"Text="Label">
Label>
TextBoxID="TextBox1"runat="server">
TextBox>
ButtonID="Button1"runat="server"onclick="Button1_Click"Text="Button"/>
上述代码声明了一个文本框控件和一个按钮控件,当用户单击按钮控件时,就需要实现标签控件的文本改变。
为了实现相应的效果,可以通过编写cs文件代码进行逻辑处理,示例代码如下所示:
namespace_5_3//页面命名空间
{
publicpartialclass_Default:
System.Web.UI.Page
{
protectedvoidPage_Load(objectsender,EventArgse)//页面加载时触发
{
}
protectedvoidButton1_Click(objectsender,EventArgse)//双击按钮时触发的事件
{
Label1.Text=TextBox1.Text;//标签控件的值等于文本框中控件的值
}
}
}
上述代码中,当双击按钮时,就会触发一个按钮事件,这个事件就是将文本框内的值赋值到标签内,运行结果如图5-4所示。
图5-4文本框控件的使用
同样,双击文本框控件,会触发TextChange事件。
而当运行时,当文本框控件中的字符变化后,并没有自动回传,是因为默认情况下,文本框的AutoPostBack属性被设置为false。
当AutoPostBack属性被设置为true时,文本框的属性变化,则会发生回传,示例代码如下所示。
protectedvoidTextBox1_TextChanged(objectsender,EventArgse)//文本框事件
{
Label1.Text=TextBox1.Text;//控件相互赋值
}
上述代码中,为TextBox1添加了TextChanged事件。
在TextChanged事件中,并不是每一次文本框的内容发生了变化之后,就会重传到服务器,这一点和WinForm是不同的,因为这样会大大的降低页面的效率。
而当用户将文本框中的焦点移出导致TextBox就会失去焦点时,才会发生重传。
5.4按钮控件(Button,LinkButton,ImageButton)
在Web应用程序和用户交互时,常常需要提交表单、获取表单信息等操作。
在这其间,按钮控件是非常必要的。
按钮控件能够触发事件,或者将网页中的信息回传给服务器。
在ASP.NET中,包含三类按钮控件,分别为Button、LinkButton、ImageButton。
5.4.1按钮控件的通用属性
按钮控件用于事件的提交,按钮控件包含一些通用属性,按钮控件的常用通用属性包括有:
❑CausesValidation:
按钮是否导致激发验证检查。
❑CommandArgument:
与此按钮管理的命令参数。
❑CommandName:
与此按钮关联的命令。
❑ValidationGroup:
使用该属性可以指定单击按钮时调用页面上的哪些验证程序。
如果未建立任何验证组,则会调用页面上的所有验证程序。
下面的语句声明了三种按钮,示例代码如下所示。
ButtonID="Button1"runat="server"Text="Button"/>//普通的按钮
LinkButtonID="LinkButton1"runat="server">LinkButton
LinkButton>//Link类型的按钮
ImageButtonID="ImageButton1"runat="server"/>//图像类型的按钮
对于三种按钮,他们起到的作用基本相同,主要是表现形式不同,如图5-5所示。
图5-5三种按钮类型
5.4.2Click单击事件
这三种按钮控件对应的事件通常是Click单击和Command命令事件。
在Click单击事件中,通常用于编写用户单击按钮时所需要执行的事件,示例代码如下所示。
protectedvoidButton1_Click(objectsender,EventArgse)
{
Label1.Text="普通按钮被触发";//输出信息
}
protectedvoidLinkButton1_Click(objectsender,EventArgse)
{
Label1.Text="连接按钮被触发";//输出信息
}
protectedvoidImageButton1_Click(objectsender,ImageClickEventArgse)
{
Label1.Text="图片按钮被触发";//输出信息
}
上述代码分别为三种按钮生成了事件,其代码都是将Label1的文本设置为相应的文本,运行结果如图5-6所示。
图5-6按钮的Click事件
5.4.3Command命令事件
按钮控件中,Click事件并不能传递参数,所以处理的事件相对简单。
而Command事件可以传递参数,负责传递参数的是按钮控件的CommandArgument和CommandName属性。
如图5-7所示。
图5-7CommandArgument和CommandName属性
将CommandArgument和CommandName属性分别设置为Hello!
和Show,单击
创建一个Command事件并在事件中编写相应代码,示例代码如下所示。
protectedvoidButton1_Command(objectsender,CommandEventArgse)
{
if(e.CommandName=="Show")//如果CommandNmae属性的值为Show,则运行下面代码
{
Label1.Text=e.CommandArgument.ToString();//CommandArgument属性的值赋值给Label1
}
}
注意:
当按钮同时包含Click和Command事件时,通常情况下会执行Command事件。
Command有一些Click不具备的好处,就是传递参数。
可以对按钮的CommandArgument和CommandName属性分别设置,通过判断CommandArgument和CommandName属性来执行相应的方法。
这样一个按钮控件就能够实现不同的方法,使得多个按钮与一个处理代码关联或者一个按钮根据不同的值进行不同的处理和响应。
相比Click单击事件而言,Command命令事件具有更高的可控性。
5.5单选控件和单选组控件(RadioButton和RadioButtonList)
在投票等系统中,通常需要使用单选控件和单选组控件。
顾名思义,在单选控件和单选组控件的项目中,只能在有限种选择中进行一个项目的选择。
在进行投票等应用开发并且只能在选项中选择单项时,单选控件和单选组控件都是最佳的选择。
5.5.1单选控件(RadioButton)
单选控件可以为用户选择某一个选项,单选控件常用属性如下所示。
❑Checked:
控件是否被选中。
❑GroupName:
单选控件所处的组名。
❑TextAlign:
文本标签相对于控件的对齐方式。
单选控件通常需要Checked属性来判断某个选项是否被选中,多个单选控件之间可能存在着某些联系,这些联系通过GroupName进行约束和联系,示例代码如下所示。
RadioButtonID="RadioButton1"runat="server"GroupName="choose"
Text="Choose1"/>
RadioButtonID="RadioButton2"runat="server"GroupName="choose"
Text="Choose2"/>
上述代码声明了两个单选控件,并将GroupName属性都设置为“choose”。
单选控件中最常用的事件是CheckedChanged,当控件的选中状态改变时,则触发该事件,示例代码如下所示。
protectedvoidRadioButton1_CheckedChanged(objectsender,EventArgse)
{
Label1.Text="第一个被选中";
}
protectedvoidRadioButton2_CheckedChanged(objectsender,EventArgse)
{
Label1.Text="第二个被选中";
}
上述代码中,当选中状态被改变时,则触发相应的事件。
运行结果如图5-8所示。
图5-8单选控件的使用
与TextBox文本框控件相同的是,单选控件不会自动进行页面回传,必须将AutoPostBack属性设置为true时