第 5 章数据处理控件 GridView 在 ASP.NET 中,GridView 控件是数据信息列表显示处理控件功能最为强大的控件, 当然也是学习的重点内容 本章将详细讲解 GridView 控件的使用方法 本章示例代码参考 :/Code/ch05

Transcription

1 第 5 章数据处理控件 GridView 在 ASP.NET 中,GridView 控件是数据信息列表显示处理控件功能最为强大的控件, 当然也是学习的重点内容 本章将详细讲解 GridView 控件的使用方法 本章示例代码参考 :/Code/ch05

2 第 章 5 数据处理控件GridView 5.1 GridView控件功能概述 学习目标 了解GridView功能 显示表格数据是软件开发中的一个周期性任务 ASP.NET 提供了许多工具来在 网格中显示表格数据 而 GridView 控件是应用最为广泛且功能最强大的控件 通过使用 GridView 控件 可以显示 编辑和删除多种不同的数据源 例如数 据库 XML 文件和公开数据的业务对象 中的数据 可以通过数据源控件自动绑 定和显示数据 可以通过数据源控件对数据进行选择 排序 分页 编辑和删除 另外 还可以通过样式自定义 GridView 控件的外观 通过处理GridView的事件自定 义 GridView 控件的行为 而所有这些操作基本上都是通过鼠标单击完成的 也就是 说 初学者也能够很快学会使用GridView控件 5.2 创建数据库 205 学习目标 了解数据库操作 由于GridView是一个功能强大的数 据处理控件 所以在使用前 首先要准 备一个数据库 这里给数据库命名为 mydb 在其中创建一张数据表test 表 结构如图5-1所示 表中的数据可以参照 ch05/test.sql脚本 5.3 图5-1 数据表test的表结构 使用GridView列表显示数据 学习目标 掌握GridView使用方法 1 启动Visual Studio 2012 依次选择 文件 新建 网站 命令 创 建一个ASP.NET空网站项目 C# 命名为Study_GridView_Control 2 然后选择 文件 新建 文件 命令 弹出如图5-2所示的对话 框 在 名称 文本框中输入gv01.aspx 并启用 将代码放在单独的文件中 复选 框 单击 添加 按钮 完成以后显示如图5-3所示

3 ASP.NET 基础教程 ( 第 2 版 ) 图 5-2 添加新项 -gv01.aspx 对话框 (3) 在图 5-3 中, 选择下方的 设计 按钮, 切换到 gv01.aspx 的设计窗口, 然后从工具箱的 数据 选项卡中拖动 GridView 控件到 gv01.aspx 的设计窗口中, 如图 5-4 所示 图 5-3 页面 gv01.aspx 脚本显示窗口 206 图 5-4 页面 gv01.aspx 设计窗口 (4) 在图 5-4 中, 选择 GridView 任务 面板中 选择数据源 下拉列表的 新建数据源 项目, 弹出 数据源配置向导 对话框, 如图 5-5 所示 图 5-5 数据源配置向导 - 选择数据源类型对话框

4 数据处理控件 GridView Source1, 也可以修改成其他名称, 然后单击 确定 按钮, 显示如图 5-6 所示 (6) 在图 5-6 中, 单击 新建连接 按钮, 弹出 选择数据源 对话框, 如图 5-7 所示 图 5-6 配置数据源 - 选择您的数据连接对话框 (1) 图 5-7 选择数据源 对话框 (7) 在图 5-7 中, 选择 Microsoft SQL Server 项目, 然后单击 继续 按钮, 弹出如图 5-8 所示的对话框 (8) 在图 5-8 中, 在 服务器名 文本框中输入 SQL Server 数据库服务器名称或 IP, 一般本地数据库就输入本机器名称, 如 HST04_PC, 选择 使用 SQL Server 身份验证 单选按钮, 账号输入 sa, 口令输入自己设置的口令, 在 选择或输入数据库名称 下面的文本框中输入操作的数据库名称, 如 mydb, 如图 5-9 所示 207 第5 章(5) 在图 5-5 中选择 数据库 选项, 系统自动生成一个 ID 并命名为 SqlData 图 5-8 添加连接 对话框 (1) 图 5-9 添加连接 对话框 (2)

5 ASP.NET 基础教程 ( 第 2 版 ) (9) 在图 5-9 中, 单 击 测试连接, 弹出如图 5-10 所示提示框 图 5-10 测试连接提示对话框 (10) 然后在图 5-9 中, 单击 确定 按钮, 显示如图 5-11 所示 208 图 5-11 配置数据源 - 选择您的数据连接对话框 (2) (11) 在图 5-11 中, 单击 下一步 按钮, 显示如图 5-12 所示 图 5-12 配置数据源 - 保存连接到配置文件对话框

6 209 第5 章图 5-13 配置数据源 - 配置 Select 语句对话框 数据处理控件 GridView (12) 在图 5-12 中, 单击 下一步 按钮, 显示如图 5-13 所示, 在 名称 下拉列表中可以选择操作的表名称, 这里选择 test 表, 列选项默认为 *, 选择具体所需的字段, 当然也可以选择右侧的 WHERE 条件设置 ORDER BY 排序规则, 其中 高级 选项是 GridView 控件具备编辑 删除功能才有用的, 后续会讲到 (13) 在图 5-13 中, 单击 下一步 按钮, 在显示的对话框中单击 测试查询 按钮, 显示如图 5-14 所示 图 5-14 配置数据源 - 测试查询对话框 (14) 在图 5-14 中, 单击 完成 按钮,gv01. aspx 设计窗口显示如图 5-15 所示 图 5-15 GridView 加载数据源后的设计窗口

7 ASP.NET 基础教程 ( 第 2 版 ) (15) 在图 5-15 中右击, 在弹出的快捷菜单中选择 在浏览器查看 命令, 即可看到运行结果如图 5-16 所示 到此为止, 一个简单的使用 GridView 控件列表显示数据的例子就完成了 图 5-16 页面 gv01.aspx 运行结果展示 (1) 5.4 修改列标题 210 学习目标了解 GridView 列操作 (1) 在图 5-15 中, 单击页面的 GridView 控件, 然后单击 GridView 控件右上角的图标, 显示如图 5-17 所示 图 5-17 GridView 任务 面板 (2) 在图 5-17 中, 选择 编辑列 项目, 在弹出的对话框中, 在 选定的字段 中选择 id 字段, 在右侧 外观 的 HeaderText 中输入 编号, 如图 5-18 所示, 其他字段依此类推, 全部修改完成后, 显示如图 5-19 所示 图 5-18 GridView 编辑列对话框 (1) 图 5-19 GridView 编辑列对话框 (2)

8 数据处理控件 GridView (4) 在图 5-20 中右击, 在弹出的快捷菜单中选择 在浏览器查看 命令, 即可看到运行结果如图 5-21 所示 图 5-20 页面 gv01.aspx 设计窗口 图 5-21 页面 gv01.aspx 运行 ( 修改字段标题后 ) 结果展示 (2) 5.5 启用分页和排序功能 211 第5 章(3) 在图 5-19 中, 单击 确定 按钮,gv01.aspx 设计窗口显示如图 5-20 所示 学习目标了解 GridView 分页和排序功能 (1) 再次打开图 5-17 所示 GridView 任务 面板, 在图中选择 启用分页 启用排序 启用选定内容 复选框, 如图 5-22 所示 ( 2 ) 在图 5-22 中右图 5-22 GridView 启用分页等功能设计窗口击, 在弹出的快捷菜单中选择 在浏览器查看 命令, 即可看到运行结果如图 5-23 所示, 其中的分页功能 排序功能已经实现了, 而选择功能其实也已经实现了, 看不到效果是由于没有设置选择项模板的样式定义, 后续会讲到此内容 图 5-23 页面 gv01.aspx 运行结果展示 (3)

9 ASP.NET基础教程 第2版 5.6 使用自动套用格式 学习目标 212 了解GridView自动套 用格式功能 1 在图5-17中 选择 自动套用格式 项 目 弹出如图5-24所示对 话框 2 在图5-24中 选择 沙滩和天空 架 构 然后单击 确定 按钮 在gv01.aspx的设 计窗口中选择页面上的 GridView控件 然后在右 侧的 属性 窗口中设置 GridView控件的字体大小 为12px 如图5-25所示 3 在图5-25中右 击 在弹出的快捷菜单中 选择 在浏览器查看 命 令 即可看到运行结果如 图5-26所示 图5-24 自动套用格式 对话框 图5-25 页面gv01.aspx设计窗口 设置自动套用格式 图5-26 页面gv01.aspx运行结果展示 使用GirdView编辑 删除数据操作 学习目标 了解使用GridView维护数据操作

10 213 第5 章图 5-27 页面 gv02.aspx 设计窗口 数据处理控件 GridView 要使用 GirdView 控件实现编辑 删除功能, 首先必须保证操作的表已经设置了主键 Primary key 接下来给出操作步骤 ( 1 ) 在网站项目 Study _GridView_Control 中添加新页面 gv02.aspx, 切换到页面的设计窗口, 从工具箱中拖动一个 GridView 控件到页面上, 如图 5-27 所示 (2) 在图 5-27 中, 在 GridView 任务 面板中的 选择数据源 下拉列表中选择 新建数据源, 弹出如图 5-28 所示对话框 图 5-28 数据源配置向导 - 选择数据源类型对话框 (3) 在图 5-28 中, 选择 数据库 选项, 然后单击 确定 按钮, 弹出如图 5-29 所示的对话框 图 5-29 配置数据源 - 选择您的数据连接对话框

11 ASP.NET 基础教程 ( 第 2 版 ) ( 4 ) 由于之前已经保存了连接字符串, 所以本次就直接选择 mydbconnectionstring 即可, 不用再新建连接字符串了 单击 下一步 按钮, 显示如图 5-30 所示 图 5-30 配置数据源 - 配置 Select 语句对话框 214 (5) 在图 5-30 中, 单击 ORDER BY 按钮, 弹出如图 5-31 所示对话框 图 5-31 添加 ORDER BY 子句 对话框 (6) 在图 5-31 中, 选择排序方式为 id 字段且为 升序 模式, 然后单击 确定 按钮, 就回到了图 5-30, 然后再单击图 5-30 中的 高级 按钮, 弹出如图 5-32 所示对话框 图 5-32 高级 SQL 生成选项 对话框

12 215 第5 章图 5-33 页面 gv02.aspx 设计窗口 ( 完成了高级 SQL 配置 ) 数据处理控件 GridView (7) 在图 5-32 中, 启用所有的复选框, 然后单击 确定 按钮, 回到图 5-30, 然后单击图 5-30 中的 下一步 按钮, 弹出 测试查询 对话框, 直接单击 完成 按钮, 就回到了 gv02.aspx 的设计窗口, 如图 5-33 所示 (8) 在图 5-33 中, 选择 启用分页 启用排序 启用编辑 启用删除, 又回到 gv02.aspx 设计窗口, 如图 5-34 所示 (9) 在图 5-34 中右击, 在弹出的快捷菜单中选择 在浏览器查看 命令, 即可看到运行结果如图 5-35 所示 图 5-34 页面 gv02.aspx 设计窗口 ( 启用编辑等功能 ) 图 5-35 页面 gv02.aspx 运行结果展示 (1) (10) 在图 5-35 中, 编辑功能 删除功能已经实现了, 但是不够完美, 删除操作直接进行删除, 没有提示功能, 编辑功能显示的表单样子实在不好, 比如性别应该使用单选按钮方式来选择修改 后面章节就来讲述这些问题的处理方法

13 ASP.NET 基础教程 ( 第 2 版 ) 5.8 完善 GridView 删除功能 216 学习目标了解 GridView 编辑列操作 这里主要说明的是如何给 删除 链接增加一个提示对话框, 以便用户在删除信息的时候可以取消删除操作, 而不是一单击 删除 链接就直接删除了 由于 GridView 控件是微软提供的集成服务器控件, 所以不能直接给 GridView 控件中的 删除 链接增加代码控制, 于是 GridView 提供了模板编辑功能来解决这个问题, 而前提是首先要把对应的字段 ( 列 ) 变成模板列 (1) 在把 编辑 删除 字段 ( 列 ) 变成模板列之前图 5-36 页面 gv02.aspx 设计窗口 ( 修改标题后 ) 先用前面的方法修改一下所有列的标题, 修改后的 gv02.aspx 页面设计窗口如图 5-36 所示 (2) 在图 5-36 中, 单击选中页面的 GridView 控件, 然后单击右上角的小按钮, 显示出 GridView 任务 面板, 在其中, 继续选择 编辑列 项目, 弹出如图 5-37 所示的对话框 (3) 选中左侧 选定的字段 中的 维护 字段, 然后单击右下方的 将此字段转换为图 5-37 GridView 编辑列对话框 TemplateField, 即可完成模板列的转换, 然后单击 确定 按钮, 再次回到 gv02.aspx 页面的设计窗口中 单击选中 gv02. aspx 页面的 GridView 控件, 然后单击右上角的小按钮, 显示出 GridView 任务 面板, 在其中, 继续选择 编辑模板 项目, 显示如图 5-38 所示 图 5-38 编辑模板列窗口

14 第 章 5 数据处理控件GridView 4 在图5-38中 右击 删除 按钮 在弹出的快捷菜单中选择 属性 命 令 进入右侧的控件属性编辑窗口 如图5-39所示 给 OnClientClick 属性增加 图中所示代码即可 再运行gv02.aspx页面 单击 删除 按钮就会出现提示对话 框 如图5-40所示 选择确定就是确认删除了 选择取消就是不删除了 图5-39 GridView中删除按钮属性编辑窗口 5.9 图5-40 页面gv02.aspx删除提示对话框 完善GridView编辑功能 学习目标 进一步熟悉GridView使用 转换模板列 编辑功能主要是完 善编辑模板显示的表单效 果 而要自定义编辑模板 表单的显示效果 也必须 把这些字段列先转换成模 板列 转换方法和 维 护 列转换为模板列的方 法一样 这里就直接给出 结果了 如图5-41所示 图5-41 修改gv02.aspx所有列都为模板列 217

15 ASP.NET 基础教程 ( 第 2 版 ) 其中的编号字段由于是数据表 test 的主键 (Primary Key) 字段, 故不能修改, 也就不用转换模板列, 可以看出, 转换模板列后, 图 5-41 中的列标题图标下面多了个小图标 由此可以直观看出哪些列是模板列, 哪些不是模板列 完善系统生成的 SqlDataSource 代码 (1) 全部字段 ( 列 ) 都转换成模板列之后, 再回到 gv02.aspx 的 HTML 脚本页面, 接下来给出 gv02.aspx 页面的完整 HTML 脚本代码 218 <body> <form id="form1" runat="server"> <div> <asp:gridview ID="GridView1" runat="server" AllowPaging= "True"AllowSorting="True"AutoGenerateColumns="False" DataKeyNames="id"DataSourceID="SqlDataSource1"> <Columns> <asp:templatefield HeaderText=" 维护 " ShowHeader= "False"> <EditItemTemplate> <asp:linkbutton ID="LinkButton1" runat="server" CausesValidation="True" CommandName="Update" Text=" 更新 "></ asp:linkbutton> <asp:linkbutton ID="LinkButton2"runat ="server" CausesValidation="False"Command Name="Cancel" Text=" 取消 "></asp:linkbutton> </EditItemTemplate> <ItemTemplate> <asp:linkbutton ID="LinkButton1" runat= "server"causesvalidation="false" Command Name="Edit" Text=" 编辑 "></asp:linkbutton> <asp:linkbutton ID="LinkButton2" runat="server" CausesValidation="False" CommandName="Delete" OnClientClick= "return confirm(' 确认删除吗?');" Text=" 删除 "></asp:linkbutton> </ItemTemplate> </asp:templatefield> <asp:boundfield DataField="id" HeaderText=" 编号 " InsertVisible="False" ReadOnly= "True"SortExpression="id" /> <asp:templatefield HeaderText=" 姓名 "SortExpression ="name"> <EditItemTemplate> <asp:textbox ID="TextBox1" runat="server" Text='<%# Bind("name") %>'></asp:textbox> </EditItemTemplate> <ItemTemplate> <asp:label ID="Label1" runat="server" Text='<%# Bind("name") %>'></asp:label>

16 219 第5 章数据处理控件 GridView </ItemTemplate> </asp:templatefield> <asp:templatefield HeaderText=" 性别 " SortExpression ="sex"> <EditItemTemplate> <asp:textbox ID="TextBox2" runat="server" Text='<%# Bind("sex") %>'></asp:textbox> </EditItemTemplate> <ItemTemplate> <asp:label ID="Label2" runat="server"text= '<%# Bind("sex") %>'></asp:label> </ItemTemplate> </asp:templatefield> <asp:templatefield HeaderText=" 城市 "SortExpression ="city"> <EditItemTemplate> <asp:textbox ID="TextBox3" runat="server" Text='<%# Bind("city") %>'></asp:textbox> </EditItemTemplate> <ItemTemplate> <asp:label ID="Label3" runat="server" Text= '<%# Bind("city") %>'></asp:label> </ItemTemplate> </asp:templatefield> <asp:templatefield HeaderText=" 生日 " SortExpression ="birthday"> <EditItemTemplate> <asp:textbox ID="TextBox4" runat="server" Text='<%# Bind("birthday") %>'></asp:textbox> </EditItemTemplate> <ItemTemplate> <asp:label ID="Label4" runat="server" Text ='<%# Bind("birthday") %>'></asp:label> </ItemTemplate> </asp:templatefield> <asp:templatefield HeaderText=" 备注 "SortExpression ="note"> <EditItemTemplate> <asp:textbox ID="TextBox5" runat="server" Text='<%# Bind("note") %>'></asp:textbox> </EditItemTemplate> <ItemTemplate> <asp:label ID="Label5" runat="server"text ='<%# Bind("note") %>'></asp:label> </ItemTemplate> </asp:templatefield> </Columns> </asp:gridview> <asp:sqldatasource ID="SqlDataSource1" runat="server" ConflictDetection="CompareAllValues" ConnectionString="<%$ Connectio nstrings:mydbconnectionstring %>" DeleteCommand="DELETE FROM [test]

17 ASP.NET 基础教程 ( 第 2 版 ) 220 WHERE [id] AND (([name] OR ([name] IS NULL IS NULL)) AND (([sex] OR ([sex] IS NULL IS NULL)) AND (([city] original_city) OR ([city] IS NULL IS NULL)) AND (([birthday] OR ([birthday] IS NULL original_birthday IS NULL)) AND (([note] OR ([note] IS NULL IS NULL))" InsertCommand="INSERT INTO [test] ([name], [sex], [city], [birthday], [note]) VALUES OldValuesParameterFormatStrin g="original_{0}" SelectCommand="SELECT [id], [name], [sex], [city], [birthday], [note] FROM [test] ORDER BY [id]" UpdateCommand="UPDATE [test] SET [name] [sex] [city] [birthday] [note] WHERE [id] AND (([name] OR ([name] IS NULL IS NULL)) AND (([sex] OR ([sex] IS NULL IS NULL)) AND (([city] OR ([city] IS NULL original_city IS NULL)) AND (([birthday] OR ([birthday] IS NULL IS NULL)) AND (([note] OR ([note] IS NULL IS NULL))"> <DeleteParameters> <asp:parameter Name="original_id" Type="Int32" /> <asp:parameter Name="original_name" Type="String" /> <asp:parameter Name="original_sex" Type="String" /> <asp:parameter Name="original_city" Type="String" /> <asp:parameter Name="original_birthday" Type="Date Time" /> <asp:parameter Name="original_note" Type="String" /> </DeleteParameters> <InsertParameters> <asp:parameter Name="name" Type="String" /> <asp:parameter Name="sex" Type="String" /> <asp:parameter Name="city" Type="String" /> <asp:parameter Name="birthday" Type="DateTime" /> <asp:parameter Name="note" Type="String" /> </InsertParameters> <UpdateParameters> <asp:parameter Name="name" Type="String" /> <asp:parameter Name="sex" Type="String" /> <asp:parameter Name="city" Type="String" /> <asp:parameter Name="birthday" Type="DateTime" /> <asp:parameter Name="note" Type="String" /> <asp:parameter Name="original_id" Type="Int32" /> <asp:parameter Name="original_name" Type="String" /> <asp:parameter Name="original_sex" Type="String" /> <asp:parameter Name="original_city" Type="String" /> <asp:parameter Name="original_birthday" Type="Date Time" /> <asp:parameter Name="original_note" Type="String" /> </UpdateParameters> </asp:sqldatasource> </div>

18 221 第5 章</form> </body> 数据处理控件 GridView (2) 首先关注加粗部分代码, 也就是 SqlDataSource 部分代码, 这里是系统生成的代码, 最后能修改一下, 例如删除指令 : DeleteCommand="DELETE FROM [test] WHERE [id] AND (([name] OR ([name] IS NULL name IS NULL)) AND (([sex] OR ([sex] IS NULL IS NULL)) AND (([city] OR ([city] IS NULL IS NULL)) AND (([birthday] birthday) OR ([birthday] IS NULL IS NULL)) AND (([note] OR ([note] IS NULL note IS NULL))" 只需要和主键 id 关联即可, 不用和其他字段关联, 故上述删除指令代码可以修改为 : DeleteCommand="DELETE FROM [test] WHERE [id] 再比如修改指令 : UpdateCommand="UPDATE [test] SET [name] [sex] [city] [birthday] [note] WHERE [id] AND (([name] OR ([name] IS NULL IS NULL)) AND (([sex] OR ([sex] IS NULL IS NULL)) AND (([city] OR ([city] IS NULL IS NULL)) AND (([birthday] original_birthday) OR ([birthday] IS NULL IS NULL)) AND (([note] OR ([note] IS NULL original_note IS NULL))" 修改指令要修改的项目可能是多个字段, 但是关联条件通常也是和主键 id 关联即可, 不用和其他字段关联, 故上述修改指令代码可以修改为 : UpdateCommand="UPDATE [test] SET [name] [sex] [city] city, [birthday] [note] WHERE [id] " 由于很少使用 GirdView 完成数据添加功能, 故可以把其中的添加指令 INSERT 直接删除 后面的代码给出的是删除指令 添加指令 修改指令的参数设置部分代码, 由于指令的变化, 参数设置部分当然要跟着变了 已经没有添加指令了, 故添加指令参数部分就可以完全删除了, 而删除部分只和主键 id 有关, 故其他参数可以删除了 而更新操作只和 original_id 这个原始值有关, 故其他 original 参数就可以删除了 接下来给出修改后的 SqlDataSource 部分代码, 这样看来代码页不是很复杂了 <asp:sqldatasource ID="SqlDataSource1" runat="server" ConflictDetection="CompareAllValues" ConnectionString="<%$ ConnectionStrings:mydbConnectionString %>" DeleteCommand="DELETE FROM [test] WHERE [id] OldValuesParameterFormatString="original_{0}" SelectCommand="SELECT [id], [name], [sex], [city], [birthday], [note] FROM [test] ORDER BY [id]"

19 ASP.NET 基础教程 ( 第 2 版 ) UpdateCommand="UPDATE [test] SET [name] [sex] [city] [birthday] [note] WHERE [id] <DeleteParameters> <asp:parameter Name="original_id" Type="Int32" /> </DeleteParameters> <UpdateParameters> <asp:parameter Name="name" Type="String" /> <asp:parameter Name="sex" Type="String" /> <asp:parameter Name="city" Type="String" /> <asp:parameter Name="birthday" Type="DateTime" /> <asp:parameter Name="note" Type="String" /> <asp:parameter Name="original_id" Type="Int32" /> </UpdateParameters> </asp:sqldatasource> (3) 到此为止, 系统生成的 SqlDataSource 代码完善完毕 修改 GridView 行高 列宽 222 为了完善 GridView 编辑功能的显示效果和运行效果, 需要调整 GridView 的行高和列宽设置, 通常最好不要直接拖曳 GridView 控件改变控件的宽度 高度, 这样一来就不好控制了 1. 设置字体 字体大小在页面 gv02.aspx 设计窗口, 右击页面上的 GridView 控件, 在弹出的快捷菜单中选择 属性 命令, 然后打开 GridView 控件属性编辑窗口, 设置整个 GridView 控件中的字体 字体大小, 如图 5-42 所示 图 5-42 GridView 属性编辑窗口 2. 调整行高这里的行高, 通常分为页眉行高 数据项行高 交错项行高 页脚行高 分页项行高 对应 GridView 属性窗口中的如下属性 (1) 页眉行高 :HeaderStyle 中的 Height 设置为 30px (2) 数据项行高 :RowStyle 中的 Height 的 Height 设置为 30px (3) 交错项行高 :AlternatingRowStyle 中的 Height 的 Height 设置为 30px (4) 页脚行高 :FooterStyle 中的 Height 的 Height 设置为 30px (5) 分页项行高 :PageStyle 中的 Heigt 的 Height 设置为 30px

20 223 第5 章图 5-43 编辑列调整列宽对话框 数据处理控件 GridView 3. 调整列宽 调整列宽, 首先要进入编辑列窗口, 然后选择某个列, 如编号, 如图 5-43 所示 在图 5-43 中, 在 样式 的 Item- Style 中, 设置 Width 为 100px, 其他列的设置方法依此类推, 依次设置如下 维护 :Width 设置为 100px 编号 :Width 设置为 60px 姓名 :Width 设置为 120px 性别 :Width 设置为 80px 城市 :Width 设置为 120px 生日 :Width 设置为 150px 备注 :Width 设置为 150px 全部设置完成后, 页面 gv02.aspx 运行显示效果如图 5-44 所示 图 5-44 页面 gv02.aspx 运行显示效果 ( 设置行高列宽后 ) 处理姓名文本框编辑 页面 gv02.aspx 运行后, 单击某行的 编辑 按钮, 显示出来的编辑项姓名文本框显然太长了, 影响了页面的显示效果, 这就需要编辑姓名的编辑项模板, 因此, 本书上文才详细说明了设置模板列 行高 列宽的方法 (1) 在 gv02.aspx 页面的设计窗口, 单击页面 GridView 控件, 然后单击右上角的小图标, 进入 GridView 任务 面板, 如图 5-45 所示 图 5-45 GridView 任务 面板

21 ASP.NET 基础教程 ( 第 2 版 ) (2) 在图 5-45 中, 选择 GridView 任务 面板最下面的 编辑模板 项目, 显示窗口如图 5-46 所示 (3) 在图 5-46 中, 选择 Column[2] - 姓名, 显示如图 5-47 所示, 其中 Item- Template 就是数据项 ( 奇数项 ) 模板的定义,AlternatingItemTemplate 就是交错项 ( 偶数项 ) 模板的定义,EditItemTemplate 就是编辑项模板的定义,HeaderTemplate 就是页眉模板的定义,FooterTemplate 就是页脚模板的定义, 根据以上描述可以看出, 这里需要处理的就是 EditItemTemplate 224 图 5-46 模板编辑模式窗口 图 5-47 姓名 字段编辑模板窗口 可以看出,EditItemTemplate 这里的文本框就是用户在 gv02.aspx 页面上单击 编辑 按钮后显示的编辑项模板样子, 选择 EditItemTemplate 中的文本框, 然后在属性窗口中设置该文本框的显示样子 (4) 设置图 5-47 中的 EditItemTemplate 中的文本框的样式属性 : Width 为 80px,Height 为 20px,BorderColor 为 #CC0000,BorderStyle 为 Solid,BorderWidth 为 2px 设置完成后, 显示如图 5-48 所示 图 5-48 修改 姓名 字段 EditItemTemplate 后的显示效果

22 数据处理控件 GridView (5) 接下来就是给姓名的编辑项模板文本框增加数据验证控件, 验证 EditItem- Template 中的姓名文本框不能为空, 用户必须填写 在图 5-48 中, 从工具箱的验 第5 证控件中拖动一个必填验证控件 (RequiredFieldValidator) 到页面上, 然后设置该验证控件的属性 : ControlToValidate 为 Text- Box1 ErrorMessage 为 * (6) 在 gv02.aspx 页面设计窗口中右击, 在弹出的快捷菜单中选择 在浏览器查看 命令, 即可看到运行结果, 然后单击某行的 编辑 按钮, 出现的错误窗口如图 5-49 所示 5-49 页面 gv02.aspx 单击 编辑 按钮出现的错误窗口章图 (7) 出现上述错误, 是因为 Web Form 使用 UnobtrusiveValidationMode 来验证的, 所以可以设定不要使用 UnobtrusiveValidationMode, 在 gv02.aspx 的程序页面中的 Page_Load 事件中增加如下代码即可 using System; using System.Collections.Generic; using System.Linq; 225 using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class gv02 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { UnobtrusiveValidationMode = UnobtrusiveValidationMode.None; } } (8) 再次运行 gv02. aspx 页面, 单击某行的 编辑 按钮, 显示如图 5-50 所示 (9) 在图 5-50 中, 如果清空姓名 王晓慧, 单击 更新 按钮, 就不能提交了, 后面就有个 * 提示不能更新, 正确输入修改后的姓名, 就可以更新了 图 5-50 页面 gv02.aspx 编辑模板窗口

23 ASP.NET 基础教程 ( 第 2 版 ) 处理性别单选按钮编辑 (1) 处理性别编辑模板, 需要替换 RadioButtonList 控件, 当然同样进入 性别 字段的编辑模板 EditItemTemplate, 如图 5-51 所示 (2) 在图 5-51 中, 删除 EditItemTemplate 中的文本框, 然后从工具箱中拖动一个 RadioButtonList 控件到 EditItemTemplate 中, 如图 5-52 所示 图 5-51 性别 字段编辑模板窗口图 5-52 修改 性别 字段的 EditItemTemplate 窗口 (1) (3) 在图 5-52 中, 选择 RadioButtonList 任务 面板中的 编辑项 项目, 弹出如图 5-53 所示对话框 (4) 在图 5-53 中, 添加两个成员, 其 Text/Value 依次为 : 男 / 男 女 / 女, 然后单击 确定 按钮 gv02.aspx 显示窗口如图 5-54 所示 226 图 5-53 ListItem 集合编辑器 对话框图 5-54 修改 性别 字段的 EditItemTemplate 窗口 (2) (5) 在图 5-54 中, 选择 RadioButtonList 任务 面板中的 编辑 DataBindings 项目, 弹出如图 5-55 所示对话框 图 5-55 RadioButtonList1DataBindings 对话框

24 227 第5 章图 5-56 页面 gv02.aspx 编辑模板运行显示效果 ( 处理性别 数据处理控件 GridView (6) 在图 5-55 中, 左侧的 可绑定属性 选择 SelectedValue, 右侧选择 自定义绑定 并在 代码表达式 中输入绑定函数表达式 Bind("sex"), 然后单击 确定 按钮 运行 gv02.aspx 页面, 然后单击某行的 编辑 按钮, 显示如图 5-56 所示 (7) 在图 5-56 中, 很明显就可以通过选择的方式来修改性别了, 不过, 性别只有两个选择, 横向显示好像更好些, 修改 RadioButtonList 控件中的 RepeatDirection 属性为 Horizontal ( 水平方式 ) 即可 ( 默认该属性取值为 Vertical 垂直方式 ), 修改后的页面运行显示效果如图 5-57 所示 编辑模板后 )(1) 图 5-57 页面 gv02.aspx 编辑模板运行显示效果 ( 处理性别编辑模板后 )(2) 处理城市下拉列表编辑 (1) 城市字段的 Edit -ItemTemplate 是要把文本框替换成下拉列表 Drop- DownList 控件, 同样首先进入 城市 字段的编辑模板窗口, 如图 5-58 所示 图 5-58 页面 gv02.aspx 城市 字段编辑模板窗口 (2) 在图 5-58 中, 删除 EditItemTemplate 中的文本框, 从工具箱中拖动一个 DropDownList 控件到页面上, 如图 5-59 所示 图 5-59 页面 gv02.aspx 城市 字段编辑模板修改控件窗口

25 ASP.NET 基础教程 ( 第 2 版 ) (3) 在 mydb 数据库中创建一个 city_table 表, 完整脚本代码如下 ( 也可以参见 ch05/city_table.sql) use mydb go create table city_table ( cityid int identity primary key, cityname varchar(50) ) go insert into city_table(cityname) select distinct city from test; go select * from city_table; go (4) 在图 5-59 中, 选择 DropDownList 任务 面板中的 选择数据源 项目, 弹出如图 5-60 所示对话框 228 图 5-60 数据源配置向导 - 选择数据源对话框 (5) 在图 5-60 中, 选择 选择数据源 下拉列表中的 新建数据源, 显示窗口又到了 选择数据源类型, 依然选择 数据库 项目, 然后单击 下一步 按钮, 显示如图 5-61 所示 图 5-61 配置数据源 - 选择您的数据连接对话框

26 229 第5 章(6) 在图 5-61 中, 依然选择之前保存的 mydb ConnectionString, 然后单击 下一步 按钮, 显示如图 5-62 所示 (7) 在图 5-62 中, 单击 下一步 按钮进入 测试查询 对话框, 在 测试查询 对话框中直接单击 完成 按钮, 显示如图 5-63 所示 数据处理控件 GridView 图 5-62 配置数据源 - 配置 Select 语句对话框 图 5-63 数据源配置向导 - 选择数据源对话框 (8) 在图 5-63 中, 在 DropDownList 的显示的数据字段和值字段都选择 cityname( 这里的练习比较特殊, 都选择 cityname, 通常的操作是 : 显示的数据字段取 cityname, 而值字段选择 cityid), 然后单击 确定 按钮, 显示如图 5-64 所示 图 5-64 页面 gv02.aspx 编辑城市模板窗口

27 ASP.NET 基础教程 ( 第 2 版 ) (9) 在图 5-64 中, 选择 DropDownList 任务 面板中的 编辑 DataBindings 项目, 弹出如图 5-65 所示对话框 (10) 在图 5-65 中, 按照图中的选择, 在代码表达式中输入 Bind ("city"), 然后单击 确定 按钮, 再次运行 gv02. aspx 页面, 然后单击某行的 编辑 按钮, 显示效果如图 5-66 所示, 可以看出已经可以通过下拉列表来修改 城市 字段了 图 5-65 DropDownList1 DataBindings 对话框 本章小结 图 5-66 页面 gv02.aspx 编辑模板运行效果 本章以鼠标操作的方式详细讲解了 ASP.NET 核心服务器绑定控件 GridView 的各种使用方法, 不是很难, 要熟练 精通的话需要多加练习 本章要点 (1) GridView 控件功能概述 (2) 使用 GridView 控件列表显示数据 (3) 使用 GridView 控件实现排序 分页功能 (4) 修改 GridView 控件的样式效果 (5) 转换模板列操作 (6) 使用 GirdView 编辑 删除数据操作 5.11 思考练习题 熟练操作 练习本章讲解的所有例子, 并且能认真思考把这些操作方法用到实际项目开发中