[音乐] 大家在前面的
Windows 可视化程序设计课程中呢我们学习了控件
但前面所讲的控件呢均是 Windows 窗体运用程序控件
它们虽然呢大部分能够运用在我们的 Web 开发中
但是呢缺少了与服务器有关的信息 所以呢我们在编写
Web 程序的时候,需要有一些 Web 服务器特有的控件
以利于我们更好地编写 Web 程序 本讲中呢我们就要给大家介绍
.Net 下 服务器控件的分类,并简单介绍几种
Web 服务器控件的使用 在研究常用的 Web
服务器控件之前呢,我们有必要把服务器控件呢 给大家做一个简要的介绍。
所谓的服务器 控件呢,是指可被服务器理解的标签 一般来讲,在我们 ASP.
NET 中呢有三种类型的服务器控件 一类呢属于
HTML 服务器控件,这个就是我们通常所 说的传统的 HTML 标签。
还有一类是 Web 服务器控件 这个指的是我们在 ASP.
NET 中的一些新的标签 我们认为它是 Web 服务器控件。
还有一类 叫 Validation 服务器控件,也就是我们的验证服务器控件
主要是用于一些验证操作,比如像一些输入的验证 还有一些范围的验证等等。
作为 HTML 服务器控件来说的话 实际上它指的是被服务器可以理解的 HTML 标签 .
NET 中呢 HTML 元素呢实际上是作为文本来进行处理的
所以呢要想使这些元素呢具有可编程性 那么这时候呢就需要向这些
HTML 元素添加 runat = " server "
这样的属性,表明 它实际上是在服务器上运行,是一个服务器控件
所有的 HTML 服务器控件必须带有 刚才提到的 runat = "
server " 这样的 属性,并且这个属性呢一般出现在 < form >
标签内 而且呢这个属性呢表示该表单应该在服务器进行处理
我们的意思本身就是啥?这个相关的元素表单是必须在服务器进行处理的
并且它同时指示出其包含 在内的控件能够被服务器脚本访问
这就是我们提到的 HTML 服务器控件
第二类是 Web 服务器控件,Web 服务器控件呢实际上是服务器可理解的特殊的 ASP.
NET 的标签,和 HTML 服务器控件类似
Web 服务器控件呢也在服务器上创建,使用的时候呢同样也需要我们刚才提到的
runat = " server " 这样的属性呢使它生效。
不过,对于 Web 服务器控件呢 没有必要映射任何的
HTML 元素 也就是从逻辑上呢,它比
HTML 元素要复杂的多 还有一类是 Validation
验证服务器控件 这个主要用于验证用户的输入,也给大家刚才也说过
实际上对于验证控件呢它执行一种特定的验证类型 比如说,验证某个具体的值或者某个范围的值
同样的,创建验证服务器 控件的语法呢和我们刚才
Web 服务器控件创建的语法呢 是一样的。
只不过这块所用到的控件呢一定是 验证服务器控件。
这是我们对三类服务器控件做了一个简要介绍 实际上对于我们本次课来讲的话,主要是给大家介绍
Web 服务器控件 至于验证服务器控件呢我们后面呢还会给大家做一个详细的介绍
我们常用的 Web 服务器控件呢一个是 Calendar 再一个是
DropDownList,下拉列表,还有一个是 FileUpload
文件上传控件,HyperLink,超链接控件 再有一个是 LinkButton。
好,我们通过示例呢把这几个控件呢看一看 首先呢我们启动 VS
2013 在这里面我们新建一个项目
项目的类型我们选择 Web ASP.
NET Web 应用程序,然后呢我们把这个就放到 我们这个当前这个课程的目录。
比如说我们 起一个名字,这个叫
Web_control01,这是我们的示例1,好,我们确定
好我们要一个空的表单就可以了 好,下面创建成功
我们现在呢先新建一个 Web 窗体 新建、
添加新项,添加一个 Web
窗体 [空白_录音]
然后呢我们把这个整个视图方式呢变成拆分 这样的话我们既能看到代码,又能看到视图
好,然后呢我们到工具箱里面 找我们的所需要的控件,先看一个
Calendar 控件,我们把这个工具箱的 Calendar 拖动到我们的
视图页面,大家可以看到 一个日期马上出现在这里。
好,这块呢需要给大家说明的是什么呢? 就是我们对于一些控件呢常用的属性,我们统一给大家说一下
我们在这个日历上呢我们点右键 点属性,那么这里面就可以看到整个
Calendar 控件的属性 那么对于一般常用的控件呢我们把属性呢给大家再说一遍
可能前面课程中呢相关的老师呢把这个控件的一般属性呢已经给大家说了。
首先呢控件要有一个 ID 也就是它的这个名字、 一个身份,我们这块先不变 它了,就 Calendar1。
再一个呢一般来讲 这个控件呢都会有一个高度和宽度
宽度和高度这个是所有的控件都必须有
好,这是一个,还有一般控件呢都会有两个比较重要的属性 一个是
Visible,这个控件表示该控件是否是可见的 还有一个
Enable Enable 表示该控件是否是启用状态
当然呢还有其他的一些属性,比如说 背景颜色啊,有的会有
Caption 标题,还有什么线型 等等。
但是呢对于我们所有控件来说 这几个属性呢都是必备的,因此呢我们对每一个控件打开其属性对话框 先要设定它的
ID,也就是它的名称,我们通过名称来访问控件的 Enable 和 Visible 一般它缺省的都是
True,也就都是真值,是可见的并且是有效的 其他的宽度高度呢如果没有必要的话,我们不用刻意去设置
好,那么我们来看一下这个控件 日历控件它到底有什么用呢?实际上在这个日历控件里面呢
如果说大家现在呢直接测试运行的话,你们会看到这个结果实际上现在已经可以运行了 单纯的一个控件就可以运行。
好,大家看到了实际上我们现在这个控件呢已经运行了
但是这个对我们来说实际上没有任何意义,因为实际上光单纯一个日历 控件来说,它做不成什么事情。
但是对日历控件来说我们可以把它修饰得更漂亮、 更好看一些 怎么去修饰呢?大家还是要看这个属性,我们现在
可以让它选中的某一天它颜色发生变化 这里面有个
Select,有个 SelectedDayStyle
我们使它颜色发生变化,比如背景色我们换成 红色,好,凡是选中的某一天它的背景色是红色
实际上除此之外呢我们还可以做一些其他的工作,比如说
只要我们选中的我们颜色可以让它为另外一种颜色,比如说黄色
同样的道理,我们可以设置月份相关的前进和后退的一些特殊符号
还有当天的样式,比如说我们就先都设置成背景啊 这样的话我们好区分。
好,实际上呢还有很多可以选择的 这是我们周它的样式。
我们随便换一个,实际上我们把颜色都做成不一样的 这个是设置周末颜色,当然呢我们还可以通过这一块呢
套用日期的格式,这个也可以选择一个 就是你们比较喜欢的一种格式啊。
好,我们这块呢就先不给大家设置这个格式,我们再来运行看一下
好,现在我们看到的实际上呢,当天的日期呢我们用
蓝色,然后周末我们可以用绿色,我们选中的某一天可以用红色
并且呢可以通过左上角和右上角的这个切换标志来切换月份 这就是我们提到的这个 Calendar 控件。
好,有关 Calendar 控件呢我们先给大家说到这块
再一个是下拉列表控件, DropDownList,这个和我们前面
提到的这个 ListBox 这个控件呢类似,它也可以选择一项或多项的内容
这个控件呢可以直接设置选项,也可以通过一些绑定数据来设置选项 我们再来看一下
DropDownList 同样的道理,我们在这块再添加一个
DropDownList 控件 工具箱我们添一个
DropDownList 好,DropDownList
然后呢这里面我们可简单编辑几个项目,比如说
Item1 好,我们编辑五个项,编辑五个项大家先看一下
下拉列表里面呢大家可以看到这个我们可以去选择它 可以去选择它,但是这个现在实际上没有什么任何意义
那么我们想要让这个有意义的话呢 我们做这么一个操作:我们选择下拉列表我们再加一个按钮
点击这个按钮以后呢我们把它选择的项目呢显示出来 好,那么为了达到这个效果呢,我们给它加一个标签
用这个标签呢来输出我们的显示 Label,我们放一个 Label
在这 同时呢再放一个 Button,一个按钮
好了,现在呢注意,我们先不管这个它 具体按钮上显示的文本了,我们要触发事件了,我们前面不是给大家讲事件
现在就要触发它,点击按钮这个事件,所以呢我要添加代码直接双击它 就会弹出
Button1,Button1 指的是刚才我们所说的控件的
id 动作是 Click,做什么动作呢?好,如果这个 Button1
被点击了,那么我们要做这样的事情 什么事情呢?刚才呢我们有个 Label1
专门显示数库的内容,还有一个 我们是下拉列表框,它的名称是 DropDown 它的名称是
DropDownList1,所以我们现在要做的工作是让 Label1
点 Text ,让它的 Text 等于你就给它赋值,赋什么值呢?
赋 DropDownList1 点
Select 选择的 Item,选择的项目 点
Text,具体的文本,然后呢,并且呢我们再加一个 处理方法
ToString,因为是方法所以带上 括号然后分号。
OK,好了,我们现在要做的事情是呢 点击这个按钮以后呢,让 Label1
它显示的内容呢就是我们 下拉列表框所选择的文本内容。
好我们试一下,我们现在选一个 Item4
好,点 Button,大家可以看到,现在我们这个 Label
它的内容已经显示成我们刚才选择的下拉列表的内容了 所以这个我们也实现了。
好,再看一下,文件上传控件 这个控件呢主要是用于将这个文件上传到
Web 服务器 服务器收到上传文件以后呢,实际上我们可以通过程序对它进行处理
一般来讲出于安全的考虑呢,不能将文件名预加载到控件中 我们再来看看 FileUpload
控件 同样的道理,我们在界面上呢我们加一个 FileUpload,FileUpload
大家可以看到这里面呢自动就加载了一个浏览按钮 要运行的话我们也能看出这个结果,它实际上就是可以让我们上传了
好,大家可以看到,这个选择文件,然后我们可以随便选择一个 它这个文件就显示在这一块。
这个呢如果说我们用其他浏览器的话 稍微有一些、 显示上稍微有一些差异。
如果用 IE 或者其他浏览器它会出现一个 文本框,然后呢旁边有一个选择文件按钮
选择完以后呢,被选择的文件呢会显示在文本框中,这个是 没有文本框啊在这个谷歌浏览器中。
好,但是实际上呢,大家会觉得这个实际上呢 并没有上传任何的东西,只是把文件显示到这块了
所以呢我们要做操作,做什么操作呢?我们要处理
实际上真正地要把这个文件传到我们的服务器上,那怎么办呢?比如说,我们给它加一个按钮
这个按钮呢名字呢我们就给它起上传吧,这个为了看清晰起见,我们给它 Text
变一下这个属性 那么现在呢我们同样的道理,我们是要触发这个上传按钮的这个事件
双击它,那么要做什么事情呢?实际上呢我们就是目的就是要 就是点击上传按钮以后,将选中的文件上传到服务器上。
为了实现这个 操作呢,我们要定义两个变量。
我们定义两个变量是字符型的,一个是 savepath,这个指的是保存文件 的路径。
还有一个文件名称,好了 那么实际上呢我们这一块呢可以定义一个
path,我们先指定 一个 path,我们这个给它放哪块呢?比如说我们
放到我们刚才所说的这个目录里面,或者说我们简单一点,我们就 放到
C 盘的根目录,然后呢文件名怎么得来的呢? 文件名呢我们可以通过
FileUpload 这个控件 它的相关属性来获得,FileUpload1.
FileName。
好 这样一来呢我们把这个文件名称呢,所上传的文件名称呢就送到这个变量 FileName
里面了 然后呢我们现在还要做一个动作,什么动作呢?
做一个 saveas 就是把文件保存的这样的动作 当然呢这个动作呢它是一个方法,所以要加参数
参数是什么呢?参数我们可以直接加 savepath
加上我们的 filename,这是一种方式
当然呢也可以,就是有的同学说我可以先把这个 做这么一个动作,savepath
加等 filename,这个也可以啊 这个也可以,这个就是先把这个
savepath 做一个赋值操作 实际上是把这个路径和具体的文件名称合并成完整的路径
然后呢这一块呢我们就不加 filename 直接是一个 savepath 就可以实现了。
好,那么这样一来呢 我们这个整个上传呢就有了具体的动作,也有了实际的意义 好了我们来测试一下。
选择文件,我们选择一个文件 然后呢我点上传按钮,屏幕闪了一下,也没有啥提示是吧?
并且刚才选择那个文件的这块又变成未选择任何文件,我们怎么看呢? 我们到我们的
C 盘上看看它是否有这个文件存在了,好,大家可以看到
这个现在呢确实呢有这个文件出现了,说明呢我们的上传成功了
那么如果说你要有更好的这个用户界面的话,实际上还可以再加一些提示
这样的话呢上传成功以后呢就会有提示 就看起来更友好一些。
当然呢,这也不是必要的啊,大家如果以后再完善的话可以这么去做 好,我们还是回到我们的课件里面。
还有一个 HyperLink,这个很简单,是用于创建超链接的,就相当于
HTML,这个是用于创建超级链接的,相当于我们 HTML 元素中的 <A> 那样的标注。
好,我们再来看一下超链接 工具箱里面我们找一个 HyperLink。
HyperLink 呢这个超链接怎么创建呢,实际上呢大家可以看到 在这个属性对话框里面它就有一个
NavigateUrl,这个指的就是我们的 要转到的这个超链接的这个位置。
比如说我们写一个西安交通大学 好,那么我们再运行一下
大家看一看,大家看到了现在这个点的时候呢 它实际上呢出现了一点问题,是吧?
它把这个直接作为 Url 的一部分地址出现了,加到我们的主机
后面,所以呢怎么改呢? 就是我们在写程序的时候呢肯定会有一些问题、
碰到一些问题 遇到问题怎么处理呢?我们这样,我们就把这个给它
代一个绝对链接的路径 好,现在呢我们再试一下
好大家看现在切换过来了 没有问题。
好,还有一个控件 LinkButton
这个控件呢实际上呢 是一个超级链接按钮控件
它是一种特殊的按钮,功能呢和普通按钮类似,但是呢 该控件呢以超级链接的形式显示,所以呢外观呢
和 Hyperlink 呢相似,功能呢又和 Button
相同 它其实是把这个链接和按钮给我们做到一块了
本讲中呢我们给大家提到了服务器控件 有三类服务器控件,一个是
HTML 服务器控件 一个是 Web 服务器控件,还有一个是验证服务器控件
尤其呢我们给大家详细介绍了五种 Web 服务器控件
当然呢实际上除了这我们介绍的这几种控件之外呢 当然呢除了我们所介绍的这五种控件之外呢,还有一些
Web 服务器控件 一些控件呢跟我们以前学的控件这个功能是类似的,所以我们也没有
多介绍,只是把 Web 里面特有的一些控件拿出来几个跟大家分享
好,那么我们本节课呢先给大家讲到这里,谢谢大家