5.2 容器服务器控件
为了能够大大地方便开发人员进行页面设计,在ASP.NET 4.5中,提供了一些可以容纳其他控件放置的容器类型控件,包括Panel控件、MultiView控件和PlaceHold控件。
5.2.1 Panel控件
Panel控件是一种用来对其他控件进行分组的容器控件,这样可以使得用户界面更加清晰、友好,同时也方便在运行中将多个控件作为一个单元来处理。因此在编程过程中,如果用户打算控制一组控件的集体行为,比如隐藏、显示多个控件或者禁止使用一组控件时,就可以使用Panel控件。把一组控件添加到同一个Panel控件中就能实现这一功能。
Panel控件定义格式代码如下:
或
Panel控件除了基本属性之外,还有以下几个重要的属性和事件。
● BackImageUrl:获取或设置面板控件背景图像的URL。
● DefaultButton:规定Panel中默认按钮的ID。
● Direction:规定Panel的内容显示方向。
● GroupingText:规定Panel中控件组的标题。
● ScrollBars:规定Panel中滚动栏的位置和可见性。
● BackColor:获取或设置Web服务器控件的背景色。
● HorizontalAlign:获取或设置面板内容的水平对齐方式。
● Wrap:获取或设置一个指示面板中的内容是否为换行的值。
● Visible:获取或设置Web服务器控件的宽度。
● Attributes:获取与控件的属性不对应的任意特性(只用于呈现)的集合。
● Controls:获取ControlCollection对象,该对象表示UI层次结构中指定服务器控件的子控件。
● DataBinding事件:当服务器控件绑定到数据源时发生。
【实例5-4】Panel控件的使用
本例利用Panel控件实现简易注册页面,通过建立三个Panel控件对应三个不同的注册步骤来显示不同的内容。具体实现步骤如下:
01 启动Visual Studio 2012,创建一个ASP.NET Web空应用程序,命名为“实例5-4”。
02 在“实例5-4”中创建一个名为Default.aspx的窗体。
03 单击网站的目录下的Default.aspx文件,进入“视图编辑”界面,打开“设计视图”,进入“源视图”,在编辑区中<form></form>标记之间编写如下代码:
上面的代码中第2行~第5行添加了一个服务器面板控件pnlStep1,其中,第3行添加了一个服务器文本框控件txtUser,并设置其显示文本的大小,第4行添加一个服务器按钮控件btnStep1并设置其显示文本、文本大小和触发的单击事件。第7行~第11行添加了一个服务器面板控件pnlStep2,其中,第8行和第9行各添加了一个服务器文本框控件,并设置其显示文本的大小,第10行添加一个服务器按钮控件btnStep2并设置其显示文本、文本大小和触发的单击事件。第12行~第15行添加了一个服务器面板控件pnlStep3,其中第13行添加了一个服务器标签控件lblMsg,第14行添加了一个服务器按钮控件btnStep3,并设置其显示文本、文本大小和触发的单击事件。完成设计后的界面如图5-6所示。
图5-6 设计界面
04 单击网站目录下的Default.aspx.cs文件,编写代码如下:
上面的代码中第1行定义处理Page对象加载事件Load方法。第2行判断当前页面,如果不是回传页面,则第3行将pnlStep1面板设置为可见。第4行和第5行将两个面板控件Panel设置为不可见。第8行定义处理btnStep1按钮控件的单击事件Click的方法。第9行将pnlStep1设置为不可见。第10行将pnlStep2设置为可见。第11行将pnlStep3设置为可见。第13行定义处理btnStep2控件的单击事件Click的方法。第14和15行将pnlStep1、pnlStep2设置为不可见。第16行将pnlStep3设置为可见。第17行在lblMsg标签控件上显示用户的信息。
05 按快捷键Ctrl+F5运行程序,效果如图5-7所示,输入用户名,单击“下一步”按钮,在弹出如图5-8所示的页面中输入姓名和电话,单击“下一步”按钮,弹出如图5-9所示的“确认信息”对话框。
图5-7 运行结果1
图5-8 运行结果2
图5-9 运行结果3
5.2.2 MultiView控件
MultiView控件是一个Web控件的容器,而MultiView控件又是View控件的容器,因此两者一般搭配运作。在MultiView控件中可以拖曳多个View控件,而View控件内包含了任何需要显示在页面中的内容,存放一般ASP.NET服务器控件,如Image、TextBox等。虽然MultiView中可包含多个View控件,但页面一次只能显示一个视图,因此也只有一个View控件区域会被显示。MultiView通过ActiveViewIndex属性值来决定哪个View要被显示,程序也是利用ActiveViewIndex属性设置来切换不同的View。
MultiView控件和View控件定义的格式代码如下所示:
上面的代码中MultiView控件包含了两个View控件,需要显示的视图内容设置在View控件。
MultiView控件除了基本属性之外,还有以下几个重要的属性和方法。
● ActiveViewIndex:获取或设置活动View控件的索引。MultiView控件按View控件页面上出现的顺序进行从0~n-1的编号,n表当前MultiView控件中的View控件数量。如果显示添加到MultiView控件中的第一个View控件,该属性设置为0。
● EnableTheming:获取或设置一个值,该值指示是否向MultiView控件应用主题。
● Views:获取MultiView控件的View控件集合。
● Visble:用于设置MultiView控件在默认状态下是否可见。
● AddParsedSubObject:通知MultiView控件已分析了一个XML或HTML元素,并将该元素添加到MultiView控件的ViewCollection集合中。
● CreatedControlCollection:创建ControlCollection以保存MultiView控件的子控件。
● GetActiveView:返回MultiView控件的当前活动的View控件。
● LoadControlState:加载MultiView控件的当前状态。
● SetActiveView:将指定的View控件设置为MultiView控件的活动视图。
● SaveControlState:保存MultiView控件的当前状态。
● RemovedControl:在将View控件从MultiView控件的Controls集合中移除后调用。
● OnBubbleEvent:确定MultiView控件的事件是否传递给页的用户界面服务器控件层次结构。
● ViewCollection:获得包含在MultiView中的View对象集合。
● OnActiveViewChanged事件:引发MultiView控件的ActiveViewChanged事件。
如果要在Visual Studio 2012中创建MultiView控件,可以在MultiView控件上拖放几个View控件,把需要的元素放在View控件上。
View和MultiView控件继承自System. Web. UI. Control类。MultiView控件有一个类型
为ViewCollection的只读属性View。使用该属性可获得包含在MultiView中的View对象集合。与所有的.NET集合一样,该集合中的元素被编入索引。MultiView控件包含ActiveViewIndex属性,该属性可获取或设置以0开始的,当前活动视图的索引。如果没有视图是活动的,那么ActiveViewIndex为默认值-1。
表5-1列出了MultiView控件的4个CommandName字段。为按钮的CommandName属性赋值,能够实现视图导航。例如,将Button、ImageButton或LinkBuIton控件的CommandName属性设置为NextView,单击这些按钮后将自动导航到下一个视图,而不需要额外的代码。开发者不需要为按钮编写单击事件处理程序。
表5-1 Web MultiView控件的CommandName字段
(续表)
【实例5-5】MultiView控件的使用
本例利用MultiView控件用户编程习惯调查,通过建立三个包含在MultiView控件中的View控件对应三个不同的调查步骤来显示不同的内容。具体实现步骤如下所示:
01 启动Visual Studio 2012,创建一个ASP.NET Web空应用程序,命名为“实例5-5”。
02 在“实例5-5”中创建一个名为Default.aspx的窗体。
03 单击网站的目录下的Default.aspx文件,进入“视图编辑”界面,打开“设计视图”,进入“源视图”,在编辑区中<form></form>标记之间编写如下代码:
上面的代码中第1行添加了一个服务器多视图控件MultiView1,第2行~第10行添加一个服务器视图控件View1,其中第4行~第7行添加一个单选按钮列表控件rdoltView1包括添加了两个选择项,第8行添加一个服务器按钮控件btnView1Next并设置其显示文本和命令名称属性。第11行~第19行添加一个服务器视图控件View2。第20行~第24行添加一个服务器视图控件View3。设计完成后的界面如图5-10所示。
图5-10 设计界面
04 单击网站目录下的Default.aspx.cs文件,编写代码如下:
上面的代码中第1行定义处理Page对象加载事件Load的方法。第2行判断当前页面如果不是回传页面,则第3行通过ActiveViewIndex属性设置默认显示为添加到该控件中的第一个View1视图。第6行定义处理按钮btnView2Next单击事件Click的方法。第7行在将用户选择的文本显示在标签lblDisplay控件上。第9行定义处理按钮btnSave单击事件Click的方法。第10行设置按钮btnSave控件不可用。
05 按快捷键Ctrl+F5运行程序,效果如图5-11所示,选择单选项后,单击“下一个”按钮,进入如图5-12所示的第二个单选页面,选择选项后,单击“下一个”按钮,进入显示用户选择信息内容的页面,如图5-13所示。
图5-11 运行结果1
图5-12 运行结果2
图5-13 运行结果3
5.2.3 PlaceHolder控件
在传统的ASP开发中,通常在开发页面的时候,每个页面有很多相同的元素,例如导航栏、GIF图片等。使用ASP进行应用程序开发时通常使用include语句在各个页面包含其他页面的代码,这样的方法虽然解决了相同元素的很多问题,但是代码不够美观,而且时常会出现问题。
ASP.NET 4.5中可以使用PlaceHolder来解决这个问题,与面板控件Panel控件相同的是,占位控件PlaceHolder也是控件的容器,但是在HTML页面呈现中本身并不产生HTML。PlaceHolder控件一般用于在页面中动态加载其他控件,该控件没有任何基于HTML的输出,并且仅用于在页面执行期间向该控件的Controls集合中添加其他控件。
PlaceHolder控件定义格式代码如下所示:
或
PlaceHolder控件除了基本属性之外,还有以下几个重要的属性和方法。
● Controls:获取ControlCollection对象,该对象表示UI层次结构中指定服务器控件的子控件。
● Visible:获取或设置一个值,该值指示服务器控件是否作为UI呈现在页上。
● ViewState:获取状态信息的字典,这些信息可以保证在同一页的多个请求间保存和还原服务器控件的视图状态。
● Site:获取容器信息,该容器在呈现于设计图面上时承载当前控件。
● DesignMode:获取一个值,该值指示是否正在使用设计图面上的一个控件。
● ClientID:获取由ASP.NET生成的服务器控件标识符。
● AddedControl:在子控件添加到Control对象的Controls集合后调用。
● CreateChildControls:由ASP.NET页面框架调用,以通知使用基于合成的实现的服务器控件创建它们包含的任何子控件,以便为回发或呈现做准备。
● HasControls:确定服务器控件是否包含任何子控件。
【实例5-6】PlaceHolder控件的使用
本例比较简单,在加载页面时实现动态添加控件的功能。具体实现步骤如下所示:
01 启动Visual Studio 2012,创建一个ASP.NET Web空应用程序,命名为“实例5-6”。
02 在“实例5-6”中创建一个名为Default.aspx的窗体
03 单击网站的目录下的Default.aspx文件,进入“视图编辑”界面,打开“设计视图”,进入“源视图”,在编辑区中<form></form>标记之间编写如下代码:
上面的代码添加了一个服务器占位控件PlaceHolder1。
04 单击网站目录下的Default.aspx.cs文件,编写如下代码:
上面的代码中第1行定义处理Page对象加载事件Load的方法。第2行~第4行实例化一个标签控件label1并设置它的编号、显示的文本。第5行通过Control.Add()方法将该标签控件添加到占位控件PlaceHolder1中。第6行~第8行实例化一个按钮控件txtInput并设置它的编号、显示的文本。第9行通过Control.Add()方法将该按钮控件添加到占位控件PlaceHolder1中。
05 按快捷键Ctrl+F5运行程序,效果如图5-14所示。
图5-14 运行结果
共有条评论 网友评论