Lect04_Web页面设计实例.ppt

计算机与IT入门 第四讲：Web页面设计实例 Outline 文件上传示例（FileUpload） 调查页面（SurveyForm） 表单验证（FormValidation） 网格控件示例(GridView) 连接Excel数据源 Login页面示例 文件上传示例 文件上传是网页中常备的功能之一。 时常需要编辑如下界面： 上传单个文件 使用FileUpload控件来作单个文件的上传 控件基本语法如下 为了构建上述简单的界面，需要在页面的body部分写入一个form代码 为了构建上述简单的界面，需要在页面的body部分写入一个form代码 Button1的单击处理函数编写（采取直接嵌在asp页面代码中的方法） Button1的单击相应函数实际内容 现在，需要被操控的是一个FileUpload类的对象，要想使用该对象，必须先了解FileUpload类的成员变量以及方法 请查阅 /en-us/library/system.web.ui.webcontrols.fileupload.aspx 要查阅起所有成员，check out /en-us/library/system.web.ui.webcontrols.fileupload_members.aspx 需要查两个点 如何判断是否已有文件被选择上传？ FileUpload类的成员HasFile 如果其值为true，则表示有文件要上传 如何将上传文件保存到server的某个位置？ FileUpload类的方法SaveAs 使用Label来显示一些被上传文件的信息 因为FileUpload.SaveAs()方法涉及到I/O操作，可能产生异常，因此需要进行处理 使用Label来显示一些被上传文件的信息 上传多个文件 借助JavaScript来控制 先来看一下初始页面 我们期望的效果： 需要添加新的上传文件时，点击“添加附件” 上传多个文件 主要就看怎么动态改变页面，添加新的文件上传控件 Javascript代码的编写 看addAttach()的内部代码 看addAttach()的内部代码 看addAttach()的内部代码 删除文件上传控件 发送时的btnSend的单击相应函数 Outline 文件上传示例（FileUpload） 调查页面（SurveyForm） 表单验证（FormValidation） 网格控件示例(GridView) 连接Excel数据源 Login页面示例 市调页面示例 页面head部分代码 Outline 文件上传示例（FileUpload） 调查页面（SurveyForm） 表单验证（FormValidation） 网格控件示例(GridView) 连接Excel数据源 Login页面示例 从form开始 表单放在一个table控件里面 表单的第二行（第2对 tr /tr） 年龄的验证 Outline 文件上传示例（FileUpload） 调查页面（SurveyForm） 表单验证（FormValidation） 网格控件示例(GridView) 连接Excel数据源 Login页面示例 使用Gridview来作一下Dir功能 从页面开头写起：导入页面代码所需名字空间 Outline 文件上传示例（FileUpload） 调查页面（SurveyForm） 表单验证（FormValidation） 网格控件示例(GridView) 连接Excel数据源 Login页面示例 连接Excel数据示例 一个Web网站背后应该有个数据库支撑 常用的数据库包括 SQL Server Oracle MySQL … 标准的数据库需要首先进行配置，不方便及时演示。为了避免繁冗的数据库配置过程，集中看一下数据连接的基本方法，和通过连接提取数据的方法，选择了Excel表格作为后台数据进行展示。 C#中进行数据库连接的方式 C#中进行数据库连接的方式 C#中进行数据库连接的方式 C#中进行数据库连接的方式 在结束的时候，将数据库连接关闭 使用GridView控件展示读取的数据 Outline 文件上传示例（FileUpload） 调查页面（SurveyForm） 表单验证（FormValidation） 网格控件示例(GridView) 连接Excel数据源 Login页面示例 使用Login控件设计简单的登录界面 定义登录验证的函数 使用Login控件设计简单的登录界面 设计包含Login控件的页面 使用excel表格形式的数据作为验证 使用excel表格形式的数据作为验证 Thank You! tr tdAge/tdtd/td tdasp:textbox runat=server id=age /