第九章ASPnet服务器控件.ppt

第九章服务器控件及数据库绑定 9 1ASP NET服务器控件概述 ASP NET提供了两大类型的控件 HTML控件 以HTML标记呈现的控件 此类控件不仅可以在客户端运行又可将其作为服务器控件运行 Web服务器控件 以 asp 为前缀的控件 此类控件都运行在服务器端 HTML控件 HTML控件存在于 工具箱 的HTML选项卡下 它是基于HTML标记语言的 主要用于在客户端直接与用户交互 当需要在客户端动态地响应用户的鼠标单击 鼠标移动 键盘输入等交互性比较频繁的操作时 可以使用HTML控件 常用的HTML控件有 Input Button 控件 Input Text 控件以及Input Radio 控件等 若在 aspx文件的 设计 视图下将HTML控件拖放到设计页面 则在 源 视图中会自动生成代码 例如 向设计页面中拖放一个Input Button 控件 则在 源 视图中会自动生成如下代码 将HTML控件转换为HTML服务器控件 默认情况下 服务器无法使用ASP NET网页中的HTML元素 但可以通过将HTML元素转换为HTML服务器控件 将其转换为可在服务器上编程的对象 ASP NET页中的大部分HTML元素都可以通过以下方式转换成HTML服务器控件 1 添加属性runat server 在分析过程中 ASP NET页框架将创建包含runat server 属性的所有元素的实例 2 在网页的 设计 视图下 用鼠标右键单击HTML控件 在弹出的快捷菜单中选择 作为服务器控件运行 该HTML控件会自动变为HTML服务器控件 HTML服务器控件与Web服务器控件的区别 HTML服务器控件没有asp标记前缀 从外观上看 设计页面中控件左上方的绿色三角形表示该控件为服务器控件 HTML控件与标准HTML标记的对应关系表 9 2Web服务器控件 基本Web服务器控件 按钮控件 Button控件 LinkButton控件和ImageButton控件 TextBox控件CheckBox控件和CheckBoxList控件RadioButton控件和RadioButtonList控件ListBox控件和DropDownList控件 验证控件 按钮控件 VS2005中有以下3种类型的Web服务器按钮控件 1 Button控件 2 LinkButton控件 3 ImageButton控件3种类型的按钮在鼠标单击时都可以将页面提交给服务器 并触发服务器端对应的Click事件 然后在服务器端执行相应的事件代码 Button控件的语法格式 ImageButton控件允许将一个图形指定为按钮 这个控件具有Image的界面和Button的功能 语法如下 LinkButton控件 它只是使按钮的界面呈现为超级链接状 并非真正的超级链接 语法如下 TextBox控件 TextBox控件 用于让用户输入文本内容 TextBox控件常用属性和事件 ID属性指定控件的名称 它是控件在页面中的唯一标识 AutoPostBack属性决定控件中文本内容修改后 是否自动回发到服务器 默认为false 即修改文本后并不立即回发到服务器 而是等页面被提交后一并处理 若为true 则每次更改文本框的内容并且焦点离开控件时 都会自动回发 使服务器处理控件相应的TextChanged事件 TextMode属性设置文本框接受文本的行为模式 有3种属性值 MultiLine 多行输入模式 Password 密码输入模式 SingleLine 默认值 单行输入模式 Text属性设置控件上所要显示的文本 TextChanged事件文本框中的内容发生更改且页面回传到服务器端处理时 触发的事件 若AutoPostBack属性设置为true 则每次更改文本框中的内容都会使页面回传到服务器端 并同时触发TextChanged事件 语法如下 CheckBox控件与CheckBoxList控件 CheckBox控件用于向用户提供选项 适用于选项不多且比较固定的情况 Checked属性 Text属性CheckBoxList控件用于向用户提供选项列表 适用于选项较多或在运行时动态地决定有哪些选项时 Items属性 Items 0 Select属性 是否选中 Items 0 Text属性 该项的显示文本例 其它 CheckBox aspx protectedvoidButton1 Click objectsender EventArgse Label1 Text if CheckBox1 Checked true Label1 Text CheckBox1 Text if CheckBox2 Checked true Label1 Text Label1 Text CheckBox2 Text Label2 Text if CheckBoxList1 Items 0 Selected Label2 Text CheckBoxList1 Items 0 Text if CheckBoxList1 Items 1 Selected Label2 Text Label2 Text CheckBoxList1 Items 1 Text 例 其它 CheckBox aspx CheckBoxList RadioButton控件与RadioButtonList控件 RadioButton控件 GroupName属性 定义单选按钮组名 具有相同组名的单选按钮可以作为一组互斥的控件来使用 RadioButtonList控件 封装了一组单选按钮控件的列表控件Items属性 若要使SelectedIndexChanged事件起作用 必须将AutoPostBack属性置为True protectedvoidRadioButtonList1 SelectedIndexChanged objectsender EventArgse if RadioButtonList1 Items 0 Selected Label2 Text RadioButtonList1 Items 0 Text if RadioButtonList1 Items 1 Selected Label2 Text RadioButtonList1 Items 1 Text if RadioButtonList1 Items 2 Selected Label2 Text RadioButtonList1 Items 2 Text 例 其它 RadioButton aspx RadioButtonList ListBox控件和DropDownList控件 ListBox控件 列表框控件 用来显示一组条目 用户可从中选择一条或多条 常用的属性Items属性 用于编辑控件中所要显示的列表项 SelectionMode属性 用于指定ListBox控件的模式行为 Single表示每次选择一个条目 Multiple表示每次可以选择多个条目 常用事件SelectedIndexChanged事件 当选定项发生更改时触发该事件 DropDownList控件为用户提供一些选项的控件 只能选择一项 常用属性AutoPostBack属性和Items属性常用事件SelectedIndexChanged事件 通过属性窗口静态绑定数据 演示通过程序动态绑定数据动态绑定数据主要有两种方法 如果想动态改变控件的所有选项 可以直接重新绑定数据 如果只是增加或者删除某个选项 则可以利用ListItem属性 利用DataBind 方法实现数据绑定 DropDownList的数据绑定 1 在页面上加两个DropDownList控件2 右键 资源管理器 中的App Data文件夹 选择 添加现有项 选择数据库 3 单击DropDownList1右上角的三角 选择数据源 设置数据库 4 下一步 选择 列 测试 5 在page Load方法中 输入如下代码 if Page IsPostBack ArrayListvalues newArrayList values Add 好 values Add 一般 values Add 不好 DropDownList2 DataSource values DropDownList2 DataBind 9 3验证控件 1 必须字段验证控件 RequiredFieldValidator验证控件是否有值 常用属性 ControlToValidate 要验证的控件名ErrorMessage 出错时在Summary中显示的错误信息Text 出错时显示的信息 若为空 出错时显示ErrorMessageDisplay 错误信息的显示方式 Static 如果没出现也占位置Dynatic 出错时才占页面位置None 出错时不显示 案例名称 验证控件程序名称 3 19 aspx 在文本框中不输入信息 按回车键会提示信息 验证控件目录 2 比较验证控件 CompareValidator控件 比较两个控件的值是否符合程序设定 常用属性 ControlToValidate 要验证的控件 ControlToCompare 要比较的控件 Type 要比较的数据类型 两个控件会自动转换为该类型String 字符串Integer 32位有符号整数Double 双精度Date 日期Currency 可以包含符号的十进制数据类型 Operter 比较的具体方式 被验证控件与其他控件的关系 Equal 相等比较NotEqual 不等比较GreaterThan 大于比较GreaterThanEqual 大于等于比较LessThan 小于比较LessThanEqual 小于等于比较DataTypeCheck 验证控件的数据类型与BaseCompareValidator Type属性相比较 ErrorMessage 验证失败时显示的提示信息 案例名称 比较验证控件程序名称 3 20 aspx密码1 密码2 两者不一致 3 范围验证控件 RangeValidator 用于验证输入的值是否在一个范围之内 常用属性 ControlToValidate 要验证的控件Type Integer数据类型MinimumValue 最小值MaximumValue 最大值errorMessage 错误信息 范围验证控件 案例名称 范围验证控件程序名称 3 21 aspx请输入1 6选项中的一项 4 正则表达式匹配验证 RegularExpressionValidator控件采用正则表达式进行验证 常用属性 ControlToValidate 要验证的控件errorMessage 错误信息ValidationExpression 正则表达式 正则表达式中常用字符的含义 表示任意字符 A Z 表示任意大写字母 d 表示任意一个数字 正则表达式匹配验证 案例名称 正则表达式匹配验证程序名称 3 22 aspx验证 数字接大写字母 d A Z 请数字开头后接一个大写字母 输入错误 5 验证总结控件 ValidationSummary控件用于收集本页所有验证错误 并将他们组织起来显示 常用属性 HeadText 显示在摘要上方的标题文本DisplayMode 错误信息显示方式 可设置为BulletList 每个消息都显示为单独的项 默认 List 每个消息显示在单独的行中SingleParagraph 每个消息显示为段落中的一个句子 ShowSummary 是否显示本控件ShowMessageBox 是否显示一个对话框 验证总结控件 案例名称 验证总结控件程序名称 3 23 aspx请填写您的个人信息 姓名 性别 男女 6 自定义控件 CustomValidator自定义验证控件 该控件有一个事件ServerValidate objectsource ServerValidateEventArgsargs 在其中可以编写用户自定义的验证方法 如果最终args IsValid true则验证通过 否则显示错误信息 下面例子验证输入是否为奇数 3 24 aspx 设置验证控件属性如下 选中CustomValidator1控件 打开 事件 窗口 双击 ServerValidate 事件 编写代码 protectedvoidCustomValidator1 ServerValidate objectsource ServerValidateEventArgsargs try inti int Parse TextBox1 Text args IsValid i 2 1 catch args IsValid false 9 4ASP NET中的数据库访问技术9 4 1数据访问组件Connection command DataReader DataAdapter和DataSet9 4 2数据绑定组件Repeater DataList和DataGrid 项目 网站 访问数据库 9 4 1数据访问组件 1 Connection控件负责与数据的连接 案例名称 使用Connection对象程序名称 6 01 aspx注意1 在App Data文件夹中添加数据库文件注意2 Server MapPath App Data db1 mdb 注意3 命名空间的引入 conntion的State属性和DataSource属性protectedvoidButton1 Click objectsender EventArgse stringstrConn Provider Microsoft Jet OLEDB 4 0 DataSource Server MapPath App Data db1 mdb OleDbConnectionmyConn newOleDbConnection myConn ConnectionString strConn myConn Open Label1 Text myConn State ToString myConn DataSource myConn Close Web config中保存连接字符串 1 配置数据库连接字符串2 读取字符串stringstrConn ConfigurationManager ConnectionStrings strConn ConnectionString 自动配置Web Config 主菜单上 网站 ASP NET配置 案例名称 使用Connection对象程序名称 6 02 aspx注意1 在Web Confige中创建字符串变量protectedvoidButton1 Click objectsender EventArgse stringstrConn ConfigurationManager ConnectionStrings strConn ConnectionString Label1 Text strConn OleDbConnectionmyConn newOleDbConnection strConn myConn Open Label1 Text myConn State ToString 2 Command对象 常用方法 ExecuteReader ExecuteScalar 和ExecuteNonQuery 例 6 04 aspxDataGrid DataReader DataCommand 案例名称 使用ExecuteRader方法程序名称 6 04 aspxprotectedvoidButton1 Click objectsender EventArgse myConn Open OleDbCommandmyComm newOleDbCommand select fromgrade myConn OleDbDataReadermyReader myComm ExecuteReader DataGrid1 DataSource myReader DataGrid1 DataBind myConn Close 使用like实现模糊查询 例6 05 aspxprotectedvoidButton1 Click objectsender EventArgse stringstrSql select fromgrade if TextBox1 Text strSql select fromgradewhere姓名like TextBox1 Text Label1 Text strSql OleDbCommandmyComm newOleDbCommand strSql myConn OleDbDataReadermyReader myComm ExecuteReader DataGrid1 DataSource myReader DataGrid1 DataBind myConn Close ExecuteScalar方法 案例名称 使用ExecuteScalar方法程序名称 6 06 aspxprotectedvoidButton1 Click objectsender EventArgse stringstrSql selectavg 数学 fromgrade OleDbCommandmyComm newOleDbCommand strSql myConn doubled double myComm ExecuteScalar Label1 Text d ToString myConn Close 查询所有人的数学平均成绩 3 DataReader对象 取DataReader对象的数据 有两种方法 1 通过和DataGrid等数据控件绑定 直接输出 使用方法如程序6 4 aspx 2 另一种方法是利用循环将其数据取出 下面的例子 通过Html标记输出查询信息6 09 aspx protectedvoidPage Load objectsender EventArgse stringstrSql select fromgrade OleDbCommandmyComm newOleDbCommand strSql myConn OleDbDataReaderdr myComm ExecuteReader stringhtml html html 学号 html 姓名 html 数学 html try 读出每一条记录while dr Read html html dr 学号 ToString html dr 姓名 ToString html dr 数学 ToString html html finally 关闭链接dr Close myConn Close Response Write html myConn Close DataAdapter和DataSet对象 例6 14 aspx按钮 显示 的功能是读取所有信息protectedvoidButton1 Click objectsender EventArgse stringstrConn Provider Microsoft Jet OLEDB 4 0 DataSource Server MapPath App Data db1 mdb OleDbConnectionmyConn newOleDbConnection myConn ConnectionString strConn myConn Open stringstrSql select fromgrade da newOleDbDataAdapter strSql myConn ds newDataSet da Fill ds grade DataGrid1 DataSource ds Tables 0 DataGrid1 DataBind 按钮 添加数据 的功能是添加一条记录 并且通过OleDbCommandBuilder对象写回数据库 protectedvoidButton2 Click objectsender EventArgse stringstrSql select fromgrade da newOleDbDataAdapter strSql myConn ds newDataSet da Fill ds grade DataTabledt ds Tables 0 DataRowrow dt NewRow row 学号 911 row 姓名 小布什 row 数学 59 dt Rows Add row OleDbCommandBuildercb newOleDbCommandBuilder da da Update ds grade DataGrid1 DataSource ds Tables grade DataGrid1 DataBind 9 4 2数据控件 数据控件属于Web服务器端控件 数据控件包括三个控件 Repeater控件 DataList控件和DataGrid控件 其中最常用的数据控件是DataGrid控件 也是功能最强大的数据控件 1 Repeater数据控件 Repeater控件的主要功能是以更自由的方式来控制数据 用非表格的形式来展现数据 Repeater控件最关键的部分是摸板 允许用户定义5种摸板 HeaderTemplate 抬头模板 可选参数ItemTemplate 数据摸板 这是Repeater控件必须的AlternatingItemTemplate 隔行数据模板 可选参数SeparatorTemplate 分割线模板 可选参数FooterTemplate 结尾模板 可选参数 绑定的方法 Repeater1 DataSource ds Tables grade Repeater1 DataBind 下面是全班同学的成绩 这里是页尾 该控件模版的设置必须通过脚本编写 下面的控件具有三个模板区域 6 17 aspx 字段的绑定 代表单行语句 例6 17 aspx 使用Reapter控件输出学生的姓名 语文和数学成绩 protectedvoidPage Load objectsender EventArgse myConn Open stringstrSql select fromgrade OleDbDataAdapterda newOleDbDataAdapter strSql myConn DataSetds newDataSet da Fill ds grade Repeater1 DataSource ds Tables grade Repeater1 DataBind 奇数行为红色 替换行为蓝色 分隔符的样式 6 18 aspx不同行显示不同的颜色 加上分隔符 2 DataGrid数据控件 DataGrid数据控件是数据控件中最强大的一个 利用DataReader对象或者DataSet对象和DataGrid控件进行绑定 就可以进行数据输出 1 利用DataGrid实现换页设置属性 AllowPaging True 具有分页功能PageSize 3 设置一页显示几行记录PagerStyle Mode NumericPages NextPrev 显示数字还是文字PagerStyle NextPageText 下页 向下翻页链接的文字是 下页 PagerStyle PrevPageText 上页 向上翻页链接的文字是 上页 编写换页事件处理函数 DataGrid1 PageIndexChanged objectsource DataGridPageChangedEventArgse DataGrid1 CurrentPageIndex e NewPageIndex BindGrid 例6 21 aspxDataGrid换页 属性PagerStyle Mode NextPrev 属性PagerStyle Mode NumericPages 例6 23 aspx6 24 aspx 将学号列置为超级链接 在下一页中显示记录DataGrid的属性AutoGenerateColums False 不显示自动生成的列选择控件右上角的 属性生成器 选择 列 6 24 aspx页面接收上一页传来的学号 然后查询输出 protectedvoidPage Load objectsender EventArgse myConn Open stringstrSql select fromgradewhere学号 Request id ToString OleDbCommandmyComm newOleDbCommand strSql myConn OleDbDataReaderdr myComm ExecuteReader dr Read Label1 Text dr 姓名 ToString Label2 Text dr 学号 ToString Label3 Text dr 语文 ToString Label4 Text dr 数学 ToString 接收上一页传来的学号 点击上一页的学号后 观察地址栏 URL的后边跟着学号 2 利用DataGrid动态添加数据 6 25 aspx Page Load事件 设置数据库连接BindGrid 函数 重新绑定控件 刷新Button1 Click事件 添加记录使用Command ExecuteNonQuery protectedvoidButton1 Click objectsender EventArgse stringstrSQL insertintograde 学号 姓名 语文 values TextBox1 Text TextBox2 Text Convert ToInt32 TextBox3 Text OleDbCommandmyComm newOleDbCommand strSQL myConn try myComm ExecuteNonQuery Label1 Text 添加成功 Label1