第15章 Web应用程序设计.ppt

C 程序设计教程 第15章Web应用程序设计 2 本章重点 ASP NET概述开发Web应用程序的准备工作创建一个简单的Web应用程序常用的ASP NET服务器控件 3 ASP NET网页的运行方式 ASP NET页面作为代码在服务器上运行 其运行方式如下使用者请求页面页面第一次运行 执行初步处理页面将网页标记动态呈现到浏览器中使用者输入信息或从可用选项中进行选择 然后回车或单击按钮确定 将页面输入内容发送到Web服务器在Web服务器上 该页面再次被运行 或者运行其他页面 并且可使用使用者输入或选择的信息运行完毕 结果页面被发送给使用者的浏览器显示 4 开发Web应用程序的准备工作3 1 安装Web服务器安装Web服务器实际上就是安装IIS服务器IIS是InternetInformationServer的缩写 是Windows服务器操作系统中最重要的组件创建IIS的虚拟目录 存放程序文件 首先打开 控制面板 中的 管理工具 页面 可以看到 Internet信息服务 图标双击该图标 将打开 Internet信息服务 对话框 5 开发Web应用程序的准备工作3 2 用鼠标右击 默认网站 从弹出的快捷菜单中选择 新建 虚拟目录 命令打开创建虚拟目录向导 单击 下一步 按钮在窗口中的 别名 文本框中输入要建立虚拟目录的名称 这里输入MyWeb 单击 下一步 按钮在打开的窗口中单击 浏览 按钮 选择要建立虚拟目录的实际文件夹 这里选择H MyWeb文件夹 单击 下一步 按钮 6 开发Web应用程序的准备工作3 3 设置虚拟目录的访问权限 保持默认值 单击 下一步 按钮在 默认网站 节点下有了一个MyWeb项 鼠标右击该项 在弹出的快捷菜单中选择 属性 在打开的窗口中选择 目录安全性 选项卡 单击 编辑 按钮打开 身份验证方法 对话框 勾选 集成Windows身份验证 单击 确定 按钮即可 7 ASP NET的页面结构 ASP NET的页面由两部分组成可视元素HTML标记 服务器控件和静态文本逻辑代码 在服务器端执行 代码编写方式 2种 单文件页模式 可视元素与代码在一个文件中代码隐藏页模式 可视元素与代码在不同的文件中 8 创建一个简单的Web应用程序5 1 例15 1 创建一个Web应用程序 根据用户输入Access数据库名称 在网站虚拟目录的App Data文件夹中查找该数据库文件 连接到该数据库操作步骤如下选择 文件 新建网站 命令 打开 新建网站 对话框 在 VisualStudio己安装的模板 列表框中选择 ASP NET网站 在 位置 下拉列表中选择HTTP 在 语言 下拉列表中选择VisualC 9 创建一个简单的Web应用程序5 2 单击 浏览 按钮 打开 选择位置 对话框 从中选择MyWeb作为其保存的位置 单击 打开 按钮 再单击 确定 按钮打开Web窗体设计对话框 在解决方案管理器中可以看到自动生成一个名称为Default aspx的Web窗体文件 另外 还自动生成了一个App Data文件夹 用于存放各种本地数据 为了能够打开school mdb数据库 将该文件复制到网站虚拟目录的App Data文件夹中 10 创建一个简单的Web应用程序5 3 单击解决方案管理器工具栏上的 刷新 按钮 可以看到school mdb文件出现在解决方案管理器中单击Default aspx编辑器下方的 设计 按钮 切换到Web窗体设计模式 进行可视化网页设计双击button1控件 出现代码编辑窗口 设计其事件过程整个Web窗体的代码如下 11 创建一个简单的Web应用程序5 4 usingSystem usingSystem Data usingSystem Data OleDb 增加usingSystem Configuration usingSystem Web usingSystem Web Security usingSystem Web UI usingSystem Web UI WebControls usingSystem Web UI WebControls WebParts usingSystem Web UI HtmlControls 12 创建一个简单的Web应用程序5 5 publicpartialclass Default System Web UI Page protectedvoidButton1 Click objectsender EventArgse OleDbConnectionmyconn newOleDbConnection myconn ConnectionString Provider Microsoft Jet OLEDB 4 0 DataSource Server MapPath App Data TextBox1 Text myconn Open if myconn State ConnectionState Open Label2 Text Access数据库连接成功 elseLabel2 Text 不能连接到Access数据库 myconn Close 运行项目 则出现右图的浏览器界面 或者启动IE浏览器 输入地址为http localhost myweb 按回车键后也可以启动本网站 13 什么是服务器控件 服务器控件是指在服务器上执行程序逻辑的组件服务器控件都包含在ASP NET页面中 当服务器运行页面时 NET执行引擎将根据控件对象和程序逻辑完成一定的功能通过服务器控件可以简化Web应用程序的开发 提高开发效率 14 服务器控件分类 根据服务器控件定义方式 可分为HTML服务器控件由普通的HTML控件转换而来 输出效果与普通HTML控件相同Web标准服务器控件这些服务器控件内置于ASP NET框架中 功能比HTML服务器控件更丰富自定义服务器控件用户自行开发的服务器控件 15 服务器控件的属性 方法和事件2 1 所有的服务器控件 都继承自Control类该类位于System Web UI命名空间中该类代表了服务器控件应有的最小功能集合 16 服务器控件的属性 方法和事件2 2 17 向页面中添加服务器控件 可以通过以下3种方法添加服务器控件双击实现添加控件在Web页面上 把光标停留在要添加控件的位置上在工具箱中找到想要添加的服务器控件然后双击 服务器控件就会呈现在Web页面上光标停留的位置拖曳实现添加控件在工具箱中找到想要添加的控件 然后拖曳到Web页想要添加控件的位置上使用代码添加控件还可以通过添加代码来实现添加控件 用户可以在HTML视图下 在想要添加控件的位置输入相应控件的代码例如 添加一个文本输入框的代码如下 18 删除页面中服务器控件 删除页面中的控件有两种方法一种方法是选中该控件 按键盘上的Delete键另一种方法是选择该控件并单击鼠标右键 在弹出的快捷菜单中选择 删除 命令 19 Label控件 Label服务器控件提供了一种以编程方式设置Web窗体页中文本的方法这些文本在页面上是静态的 用户无法编辑还可以将Label控件的Text属性绑定到数据源 以在页面上显示数据库信息 20 Button控件 Button服务器控件通过用户操作完成特定工作和事务逻辑其常用的事件有Click 在单击Button控件时触发 21 TextBox控件 TextBox服务器控件为用户提供了一种向Web窗体输入信息 包括文本 数字和日期 的方法通过对TextBox的TextMode属性 取值如下 进行设置可以得到不同的TextBoxSingleLine 单行文本框MultiLine 允许多行的文本框Password 单行文本框 输入字符以星号显示当用户更改TextBox的文本时触发TextChanged事件 22 DropDownList控件2 1 DropDownList 下拉列表框 服务器控件允许用户从预定义列表中选择某一项 Items集合的用法与前面的一些集合的用法相同 不再赘述 23 DropDownList控件2 2 Item项对象的属性如下 24 DropDownList控件示例2 1 例15 2 设计一个Web窗体 当用户从下拉列表中选择学生姓名和班号时 程序将用户选择的学生姓名和班号显示出来 设置页面WebForm2如上图所示 编辑事件响应过程如下 protectedvoidPage Init objectsender EventArgse OleDbConnectionmyconn newOleDbConnection myconn ConnectionString Provider Microsoft Jet OLEDB 4 0 DataSource Server MapPath App Data school mdb OleDbCommandmycmd newOleDbCommand SELECT姓名FROMstudent myconn myconn Open OleDbDataReadermyreader mycmd ExecuteReader 25 DropDownList控件示例2 2 DropDownList1 DataSource myreader DropDownList1 DataTextField 姓名 DropDownList1 DataBind 上面的绑定在调用该方法时才执行OleDbCommandmycmd1 newOleDbCommand SELECTdistinct班号FROMstudent myconn OleDbDataReadermyreader1 mycmd1 ExecuteReader DropDownList2 DataSource myreader1 DropDownList2 DataTextField 班号 DropDownList2 DataBind myreader Close myreader1 Close myconn Close Label3 Text protectedvoidButton1 Click objectsender EventArgse Label3 Text 学生 DropDownList1 Text 属于 DropDownList2 SelectedValue 班 26 CheckBox和CheckBoxList控件2 1 CheckBox 复选框 和CheckBoxList 复选框组 服务器控件为用户提供了一种在真 假 是 否或开 关选项之间切换的方法前者包含一个复选框后者是由一组复选框组成CheckBox控件常用属性如下 27 CheckBox和CheckBoxList控件2 2 CheckBoxList控件常用属性如下 Items集合的用法与前面的一些集合的用法相同 不再赘述 28 RadioButton和RadioButtonList控件 单选按钮RadioButton和单选按钮组RadioButtonList服务器控件允许用户从一个或多个预定义的选项中选择一项它们的关系及用法与CheckBox和CheckBoxList类似 不再赘述 29 CheckBox CheckBoxList RadioButton和RadioButtonList控件示例 例15 3 设计一个Web窗体 用户可以选择学生相关信息并提交 设置页面WebForm3如上图所示 编辑事件响应过程如下 protectedvoidButton1 Click objectsender EventArgse stringresult if RadioButtonList1 SelectedItem null 判断性别result 性别 RadioButtonList1 SelectedItem Text 为屏幕换行if RadioButtonList2 SelectedItem null 判断年龄result 年龄 RadioButtonList2 SelectedItem Text if CheckBoxList1 SelectedIndex 1 读取爱好信息 result 爱好 for inti 0 i if CheckBox1 Checked 是否是三好生信息result 该生是三好生 Label1 Text result 30 数据验证控件3 1 在ASP NET中 提供了以下6种数据验证控件 它们位于 工具箱 的 验证 部分 RequiredFieldValidator又称非空验证控件 确保用户在Web窗体页上输入数据时不会跳过必填字段 也就是说 检查被验证控件的输入是否为空 如果为空 则在网页中显示提示信息CompareValidator又称比较验证控件 将用户的输入与常数值 由ValueToCompare属性指定 另一个控件 由ControlToCompare属性指定 的属性值进行比较 若不相同 则在网页中显示提示信息 31 数据验证控件3 2 RangeValidator又称范围验证控件 确保用户输入的值在指定的上下限范围内 当输入不在验证的范围内时 则在网页中显示提示信息RegularExpressionValidator又称正则表达式验证控件 确保用户输入信息匹配正则表达式指定的模式 由ValidationExpression属性指定 若不符合 则在网页中显示提示信息CustomValidator又称自定义验证控件 确保用户输入的内容符合自己创建的验证逻辑ValidationSummary又称错误总结控件 提供一个集中显示验证错误信息的地方 将本网页中所有验证控件错误信息组织好并一起显示出来 32 数据验证控件3 3 对于前五种控件 它们具备一些相同而重要的属性 如下所示 33 数据验证控件示例3 1 例15 4 设计一个Web窗体 说明数据验证控件的使用方法 页面中包含的控件有 34 数据验证控件示例3 2 另外还要设置CompareValidator1控件的ControlToCompare属性为TextBox2 设置RegularExpressionValidator1控件的ValidationExpression属性值为 Internet电子邮件地址 35 数据验证控件示例3 3 编辑事件响应过程如下 protectedvoidPage Init objectsender EventArgse Label1 Text protectedvoidButton1 Click objectsender EventArgse if Page IsValid 用户输入均有效 Label1 Text TextBox1 Text Label1 Text 的密码为 TextBox2 Text Label1 Text 邮箱为 TextBox4 Text 36 链接控件3 1 链接控件主要有LinkButton提供超链接能力 以超链接形式显示 其他功能与Button控件类似ImageButton提供超链接能力 显示图片 其他功能与Button控件类似HyperLink提供超链接能力 功能与HTML的A标记类似 37 链接控件3 2 38 链接控件3 3 39 链接控件示例2 1 例15 5 设计一个Web窗体 放置LinkButton1 ImageButton1和HyperLink1三个控件 单击分别转向WebForm2 WebForm3和WebForm4网页步骤如下添加一个WebForm5的Web窗体在WebForm5中添加LinkButton1控件 设置其PostBackUrl属性值为 WebForm2 aspx Text属性值为 转向WebForm2 40 链接控件示例2 2 在WebForm5中添加ImageButton1控件 设置其PostBackUrl属性值为 WebForm3 aspx ImageUrl属性值为 Image pic jpg 在WebForm5中添加HyperLink1控件 设置其NavigateUrl属性值为 WebForm4 aspx Text属性值为 转向WebForm4 调整三个控件位置和Font属性运行演示效果 41 AccessDataSource控件5 1 AccessDataSource控件 从SqlDataSource继承 是使用Access数据库的数据源控件它可以连接到Access数据库 从中检索数据 并使得其他数据显示控件 如GridView等控件 可以绑定到该数据源使用AccessDataSource控件访问数据库 只需要使用DataFile属性设置Access数据库文件的位置 一般使用相对路径 并定义访问数据的SQL语句或存储过程即可 无需设置连接字符串运行时 AccessDataSource控件会自动打开与数据库的连接 执行相应的SQL语句或存储过程 完成数据访问后会自动关闭连接 42 AccessDataSource控件5 2 但AccessDataSource控件无法连接到受用户名或密码保护的Access数据库如果需要连接到连接到受用户名或密码保护的Access数据库 则需要使用SqlDataSource控件设置连接字符串来连接数据库配置AccessDataSource控件将一个AccessDataSource控件拖放到窗体中之后 单击右上角的向右箭头 选择 配置数据源 可以打开 配置数据源 向导进行配置 43 AccessDataSource控件5 3 AccessDataSource控件常用的属性和方法如下所示 44 AccessDataSource控件5 4 45 AccessDataSource控件5 5 46 GridView控件10 1 GridView控件可以将多种不同数据源中的数据以表格的形式显示在页面中这些数据源可以是数据库 也可以是XML文件 还可以是公开数据的业务对象并且可以对这些数据进行编辑 删除 还可以很方便地对数据进行分页 排序 选择操作VisualStudio2005还为该控件提供名种套用格式 只需要简单的选择 就可以完成一个漂亮的数据显示页面 47 GridView控件10 2 GridView控件常用的属性 方法和事件如下所示 48 GridView控件10 3 49 GridView控件10 4 50 GridView控件10 5 单击GridView控件中的按钮时 会触发RowCommand事件 在编辑该事件的事件处理方法之前 先要设置按钮的CommandName属性值该属性取值如下 51 GridView控件10 6 52 GridView控件10 7 为GridView控件配置数据源设置DataSource或DataSourceID属性值单击GridView控件右上角向右箭头 可以选择或配置数据源设置GridView控件外观可以通过BackColor BackImageUrl BorderStyle GridLines等属性来设置单击GridView控件右上角向右箭头 选择 自动套用格式 可以选择已有的表格模板 53 GridView控件10 8 设置GridView控件的分页显示设置AllowPaging PageSize PageIndex和PageSettings等属性设置GridView控件按列排序设置AllowSorting SortDirection和SortExpression属性当允许排序时 单击列标头可以按列的递增或递减顺序排序 54 GridView控件10 9 在GridView控件中进行数据编辑在配置数据源的Select语句时 要单击 高级 按钮 打开 高级SQL生成选项 对话框 选择 生成INSERT UPDATE和DELETE语句 单击GridView控件右上角向右箭头 选择 启动编辑 和 启动删除 则GridView控件的左侧每一行都显示 编辑 和 删除 按钮 运行程序时可以分别对每一条记录进行编辑和删除 55 GridView控件10 10 设置GridView控件的按钮样式默认是以超链接形式显示的如果需要修改 单击GridView控件右上角向右箭头 选择 编辑列 打开 字段 对话框 在 选定的字段 中 选中 CommandField 在右侧的 CommandField属性 中 修改ButtonType属性即可 56 DetailsView控件5 1 DetailsView控件可以在表格中显示数据源的单个记录表格的每一行对应记录中的一个字段使用该控件可以编辑 删除和插入记录DetailsView控件常用属性和方法如下 57 DetailsView控件5 2 58 DetailsView控件5 3 为DetailsView控件配置数据源设置DataSource或DataSourceID属性值单击DetailsView控件右上角向右箭头 可以选择或配置数据源设置DetailsView控件外观可以通过BackColor BackImageUrl BorderStyle GridLines等属性来设置单击DetailsView控件右上角向右箭头 选择 自动套用格式 可以选择已有的表格模板 59 DetailsView控件5 4 设置GridView控件的按钮默认是不显示按钮的如果需要按钮 单击GridView控件右上角向右箭头 根据需要选择 启用分页 启用插入 启用删除 和 启用编辑 启用分页才能实现记录的逐条浏览 60 DetailsView控件5 5 设置GridView控件的按钮样式单击GridView控件右上角向右箭头 选择 编辑字段 打开 字段 对话框 在 选定的字段 中 选中 CommandField 在右侧的 CommandField属性 中 修改ButtonType属性可以设置 编辑 删除 新建 等按钮的样式对于分页按钮 通过DetailsView控件的PageSettings属性来设置按钮样式 61 AccessDataSource GridView和DetailsView控件示例2 1 例15 6 设计一个Web窗体 放置AccessDataSource1 GridView1和DetailsView1三个控件 显示school mdb数据库中student表的信息显示效果如下 62 AccessDataSource GridView和DetailsView控件示例2 2 编写事件处理方法如下 protectedvoidGridView1 SelectedIndexChanged objectsender EventArgse DetailsView1 PageIndex GridView1 PageIndex GridView1 PageSize GridView1 SelectedIndex 在上方数据没有进行排序的情况下 此时能够正确显示 否则记录不匹配 当点击上方的 选择 按钮时 在下方显示选中的记录信息 63 网上软件商城 1 一个完整的在线营销系统包括两部分电子商务网站 本示例的演示内容 提供商品资讯和销售服务内部管理系统包括维护和更新商品信息 订单配货和发送 业务人员信息管理等该系统可以使用Windows应用程序 也可以使用内部Web程序如果在线营销系统规模不大 也可以将两部分合并在一个Web程序中 64 网上软件商城 2 系统功能模块图如下 65 网上软件商城 3 用户管理实现新用户注册 注册用户登录及验证 密码修改和恢复等功能商品查询可按商品的类别和关键字等条件来查找商品 并查询商品的详细信息购物车管理注册用户可在网站中挑选商品加入购物车 也可以从购物车中移除已选择的商品 66 网上软件商城 4 订单管理根据购物车生成订单 对订单进行结算 以及处理和查询订单销售统计对商品销售情况进行统计分析 并提供热销商品信息 67 网上软件商城 5 系统采用三层结构数据存放在SQLServer数据库服务器中网站页面由Web服务器提供终端用户界面由客户端浏览器提供 68 网上软件商城 6 提高网站运行效率的策略将绝大多数的数据访问功能定义为存储过程存储过程运行在数据库服务器中 能够对数据访问操作进行有效的优化ADO NET代码中尽可能调用存储过程代码中封装的SQL语句较短 在访问用户较多的情况下 能够有效地减少网络流量利用服务器控件和会话状态 Session 等方式缓存数据 减少数据访问的次数 69 网上软件商城 7 开发要点使用ASP NET提供的成员资格和登录控件功能来实现用户身份验证使用母版页和Web用户控件来定制页面使用GridView控件来定制数据显示 并将GridView控件绑定到SqlDataSource数据源使用Session来管理应用程序状态 70 网上软件商城 8 数据库设计系统使用了两个SQLServer数据库用户数据库aspnetdb存放网站注册用户的信息业务数据库SoftMarket存放网站的商品和销售订单等信息aspnetdb数据库SQLServer默认使用aspnetdb数据库 如果不存在则创建 来管理成员资格 71 网上软件商城 9 SoftMarket数据库数据表设计 6个 Category 存放商品的类别信息Product 存放商品信息Order 存放订单基本信息包括下订单的用户和时间 收货人地址 电话和邮编 订单的结算时间和发货时间 订单状态ID 处理订单的雇员ID等信息OrderItem 存放订单明细信息订单订购的商品信息OrderStatus 存放订单状态信息包含提交 结算和发货三种订单状态信息Salesman