5.2 Web服务器控件
ASP.NET Web服务器控件是一种特殊的控件,它是由开发人员控制,由服务器负责解释的一组控件,这些控件在请求网页时运行并自动解释为浏览器可以识别的HTML标记。许多Web服务器控件类似于常见的HTML元素(如按钮和文本框),还有一部分控件具有复杂行为,如日历控件及可用于连接数据源并显示数据的控件等。
ASP.NET还提供支持AJAX的服务器控件,这些控件由服务器和客户端代码组成,这些代码集成在一起可生成丰富的客户端行为。将AJAX控件添加到ASP.NET网页上时,该页会自动将支持的客户端脚本发送到浏览器以获取AJAX功能,也可以提供其他的客户端代码来自定义控件的功能,但这不是必需的。
5.2.1 基本Web服务器控件介绍
在开发工具中提供了一组基础的Web服务器控件。这些控件在以后的编程过程中会起到一个很好的引导作用,虽然后期将抛弃这些沉重的控件,但前期这些控件会为用户提供一个很好的熟悉和掌握编程的过程。具体控件如表5-9所示。
表5-9 基本Web服务器控件
上述控件都是编译器提供的控件,这些控件都是服务器控件,其实就是微软提供的已经开放完成的插件,当然也可以使用第三方的插件,这些会在后面章节讲述。下面是部分控件的具体使用方法,代码如下。
在上面的窗体上放入了一个按钮、一个文本框和一个上传控件,分别放入表格控件的三行中,控件运行效果如图5-4所示。
图5-4 运行效果
这些控件是编译器提供的控件,具有很多的属性、方法和事件。在编程初期有助于快速开发。下面介绍具体的几个通用属性,这些属性方便在设计时对控件进行设置,如表5-10所示。
表5-10 服务器控件的一些通用属性
5.2.2 常用控件的属性介绍
这里演示两个控件的使用:一是文本框控件;二是按钮控件,这两个控件在以后的编程中是使用频率最多的控件。
1.文本框控件
文本框控件在编程中一般用作用户输入、信息录入等。文本框控件有很多属性、方法和事件。其中,用到最多的是演示Text属性,这个属性表示可以在服务器端设置或获取文本框中的值。下面代码演示如何使用文本框控件。
代码运行效果如图5-5所示。
图5-5 文本框属性设置后的效果
这里设置了文本框的高度、宽度和文本框的值,在某些浏览器中高度或许不能被正确解释,这就是浏览器的兼容性,这个问题是所有程序人员和美工人员都会碰到的也是最麻烦的问题。所以以后的编程过程中一定要尽量使用通用的属性来设置控件的属性,从而解决兼容的问题。在文本框的属性中还有很多属性,在说明栏中都可以看到,如果是中文版的编译器,还能以中文的形式给予明确的解释。
2.按钮控件
在程序中,按钮控件一般用作提交、跳转等操作。按钮控件具有宽度、高度等属性。还有一些特殊的属性和事件,比如,在将服务器按钮拖到窗体上时,双击按钮会产生一个按钮的单击事件,这个事件将执行后台代码,这样就能够实现前台和后台的交互。下面通过代码来看下具体的操作。
前台代码如下。
按钮后台代码如下。
代码执行结果如图5-6所示。
图5-6 按钮的执行结果
5.2.3 列表控件介绍
编译器提供的列表控件,如表5-11所示。
表5-11 VS 2010提供的列表控件
上面列举了编译器提供的列表控件,其属性和方法都是继承于WebControl中的ListControl类,由于继承自同一个基类,大多数方法都是相同的,其中,主要几个属性是DataSource用于绑定数据源,可以通过DataMember来指定表,使用DataTextField属性绑定文本列,使用DataValueField属性来绑定关键值的列,主要是设置完属性后就能够自动绑定数据源。实际在HTML中自动绑定的属性和手动绑定的属性没有太大区别,在手动绑定中会将数据赋值给ListItems集合中。下面演示DropDownList控件的使用,代码如下。
绑定控件的显示效果,如图5-7所示。
图5-7 绑定控件后的效果
在DropDownList控件中还有一个重要的属性,就是AutoPostBack,设置这个属性能够使控件自动向服务器发送请求,在设置了这个属性后,选择事件能够自动提交到服务器,并且在服务器端可以获得选中项。具体代码如下。
这里设置了DropDownList的属性AutoPostBack为真,表示自动提交到服务器,然后观察提交的效果。为了便于观察,将提交后获得的值输出到界面上面,后台代码如下。
当选择的项目改变时触发此事件,执行效果如图5-8所示。
图5-8 设置了AutoPostBack属性的DropDownList选择项改变后的效果
5.2.4 可选择的列表控件
在选择列表控件中,分为可选择的和不可选择的列表控件。在可选择的列表控件中最典型的有两个,也是最经常使用到的:一个是CheckBoxList;另一个是RadioButtonList,这两个控件一个是单选列表,另一个是多选列表,但是这两个控件都有公共的属性,如表5-12所示。
表5-12 可选择列表控件的公共属性
列表中的属性都是公共属性,通过代码来演示具体控件的使用方法,代码如下。
两种控件的执行结果如图5-9所示。
图5-9 两种控件的显示效果
上面采用循环的方式绑定了两个选择控件,绑定了二十个选择项,如何获得选中项的值,代码如下。
获得选中项后,输出结果如图5-10所示。
图5-10 获得选中项的结果
上面演示了选择列表的使用,选择列表还有很多属性、事件和方法,在以后的编程中要慢慢研究。
5.2.5 BulletedList列表控件
非选择列表BulletedList,在HTML中会被解释成按钮链接,这些控件最适于使用在新闻中的标题列表显示,可以动态地获取到单击的项目,该控件的一些重要的属性和方法,如表5-13、表5-14所示。
表5-13 属性
表5-14 事件
下面用具体的代码演示属性和方法的使用,代码如下。
这里定义了一个自定义列表显示控件,设置了控件的高度和宽度,为控件添加一个单击事件。
控件的初始化和数据的添加在窗体的加载事件中完成,在控件的单击事件中输出选中的项目,代码如下。
控件放入窗口后要设置几个关键属性,DisplayMode属性设置为LinkButton单击事件才能使用,如果设置为Text,则只显示文本而没有单击事件,控件的执行效果如图5-11所示。
图5-11 BulletedList代码执行效果
5.2.6 表格式控件
表格控件其实就是在Table上面添加了runat=“server”这样的控件,其实很多在HTML控件上添加runat=“server”和ID属性后也可以当做服务器控件使用,当然这些控件就是现在演示的Web服务器控件。下面演示服务器端的表格控件的使用,HTML代码如下。
这里采用设计模式直接在窗体上面拖入控件,然后在设计模式下编辑控件,运行效果如图5-12所示。
图5-12 HTML表格控件的运行效果
这里设置了表格的边框,设计了两行三列的表格,第二行只是添加了两列,这样就形成了这样的一个表格的状态,也可以设置成完整的表格,这些HTML的控件在开始编程时对用户的帮助很大,但在以后用户真正使用当中用的几率是不大的,用得最多的是HTML的控件,尤其JavaScript和UI的插件发展迅速,直接用到服务器控件的地方越来越少,但开始时还是要从服务器控件开始。