第9章数据绑定与数据绑定控件2

1、第第9章章 数据绑定与数据绑数据绑定与数据绑定定控件控件9.5ASP.NET数据库网站设计教程（数据库网站设计教程（C#版）版）配套教学资源配套教学资源本章内容：数据绑定，GridView控件，Details View控件，FormView控件，使用数据绑定表达式实现数据绑定，调用DataBind()方法实现数据绑定。本章重点：GridView控件，DetailsView控件，FormView控件。n9.5.1 GridView控件的语法控件的语法nGridView控件的基本语法格式如下：nn n n n n n 其他控件其他控件n n n n n9.5 GridView控件控件n2GridV

2、iew控件的常用属性控件的常用属性n3GridView控件的数据绑定列控件的数据绑定列nGridView控件通过设置AutoGenerateColumns属性为true自动创建列，也可以通过模板列创建自定义的列。在GridView、DetailsView等控件中，对于绑定字段的值，有7种类型的显示方式，见表9-6。Field声明在GridView中是被包含在标记区块中的。n表9-7所列的属性代表每个列类型实际提供的属性的一个子集。每个列类型定义了一个定制的属性集，用以定义和配置所绑定的字段。n4GridView控件的事件控件的事件nGridView控件的事件非常丰富，在GridView控件上操

3、作时就会产生相应的事件，要实现的功能代码写在相应的事件中。GridView控件的常用事件见表9-8。n9.5.2 GridView控件的使用示例控件的使用示例n1分页显示记录分页显示记录n【演练9-11】 GridView控件的主要功能是以表的形式显示数据，本例采用自动套用格式，分页显示UserManagement数据库中UserInfo表的所有记录。n新建一个空网站C:ex9_11。添加Default.aspx，在Default.aspx.cs中添加对SQL Server数据库命名空间的引用。在web.config中添加数据库的连接字符串。n 在Default.aspx的设计视图中，从工具箱

4、的“数据”组中，向Web窗体中添加一个GridView控件。n 单击选中GridView控件，在“属性”窗口中设置分页AllowPaging为true，每页显示记录个数PageSize为3。设置GridView属性后，从Web窗体上能看到分页样式。最好在Default.aspx.cs中用代码设置，更易于阅读。n 自动套用格式，在Default.aspx的设计视图中，在GridView控件的右上角单击 按钮，在任务面板中单击“自动套用格式”，如图9-20所示。n 显示“自动套用格式”对话框，在左侧栏中选择一种架构，如“专业型”，如图9-21所示，然后单击“确定”按钮。n GridView分页时触

5、发PageIndexChanging事件，在GridView1控件的“属性”窗口中单击“事件”按钮 切换到事件列表，在事件列表中双击PageIndexChanging，添加GridView1的PageIndexChanging事件程序。代码如下：nprotected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)nn GridView1.PageIndex = e.NewPageIndex; /当前页的索引n showAllUsers(); /重新绑定GridView的过程nn 在Page的Loa

6、d事件中显示初始的记录，代码如下：nprotected void Page_Load(object sender, EventArgs e)nn if (!Page.IsPostBack) /防止重复绑定n n showAllUsers();/显示所有记录n nn 显示所有记录的绑定过程程序，在本过程中把GridView绑定到数据源。代码如下：nprivate void showAllUsers()nn string connString = ConfigurationManager.ConnectionStringsConnStr.ToString();n SqlConnection con

7、n = new SqlConnection(connString); n string selectSql = select * from UserInfo order by UserId;/SQL查询字符串n SqlDataAdapter adapter = new SqlDataAdapter(selectSql, conn);n DataSet ds = new DataSet();n adapter.Fill(ds);n GridView1.DataSource = ds;n GridView1.AllowPaging = true;/启用分页n GridView1.PageSize

8、= 3;/每页显示的记录数n GridView1.DataBind();nn当数据源中没有记录时，GridView默认只显示表头不显示记录。可以修改为当GridView中没有记录时显示提示，在中添加EmptyDataTemplate模板，内容如下：n提示：当前没有任何记录！n为了显示上面提示，把showAllUsers()过程中的selectSql替换成下面内容：nstring selectSql = select * from UserInfo where username=111 order by UserId;n2. 自动排序记录自动排序记录n【演练9-12】 在UserManageme

9、nt数据库中，显示UserInfo表记录时把英文列名改为中文，单击GridView表头实现记录的排序。n新建一个空网站C:ex9_12。添加Default_Sort.aspx，在Default_Sort.aspx.cs中添加对SQL Server数据库命名空间的引用。在web.config中添加数据库的连接字符串。n（1）设置GridView控件的分页、排序等n 在Default_Sort.aspx的设计视图中，从工具箱的“数据”组中，向Web窗体中添加一个GridView控件。n 在GridView1控件的属性窗口中，设置允许分页AllowPaging为true，每页显示的记录数PageSi

10、ze为3。最好在后台代码中用语句来实现设置。n（2）把GridView表头列名改为对应的中文（绑定列操作）n 更改GridView控件中显示的列名，把列名UserName改为“用户名”。在GridView控件的右上角单击 按钮，在任务面板中单击“编辑列”。显示“字段”对话框，取消选中左下角的“自动生成字段”复选框，也可在后台程序中设置“GridView1.AutoGenerateColumns = false;”。n 在“可用字段”框中单击“BoundField”，单击“添加”按钮，将其添加到“选定的字段”框中，如图9-23所示。在“选定的字段”框中选中要操作的字段，在右侧的“BoundFie

11、ld属性”栏中设置属性，在绑定到的字段框DataField后输入表中的列名UserName；在对应表头内的文本HeaderText后输入“用户名”，如图9-24所示。n重复本操作，设置UserGender（性别）、UserEmail（邮箱）、CreatedTime（注册日期，DataFormatString为0:d）等，改为对应的中文名称。n由于IsPass是bit型的，一般显示为复选框，因此从“可选字段”框中选择CheckBoxField，添加到“选定的字段”框中，在“BoundField属性”栏中设置DataField为IsPass，HeaderText为“有效”。最后单击“确定”按钮，关

12、闭对话框。在设计视图中显示绑定列后的视图，如图9-25所示。在源视图中查看Default_Sort.aspx代码，了解生成的绑定代码，如图9-26所示。n 本网站采用演练9-11中的代码，按演练9-11中步骤、在Default_Sort.aspx.cs中添加代码。执行Default_Sort.aspx，运行结果如图9-27所示。n（2）自动排序n 在GridView1控件的属性窗口中，设置允许排序AllowSorting为true。n 在GridView控件的右上角单击 按钮，在任务面板中单击“编辑列”。显示“字段”对话框，先在“选定的字段”框中单击选定要设置的列名（如“用户名”），然后在“B

13、oundField属性”栏中设置属性，在SortExpression后输入排序表达式，排序必须以某个字段作为排序关键字才能完成，这里输入列名（如UserName），如图9-28所示。之后，作为排序关键字的列的列名变为超链接样式。n重复本操作，分别设置UserGender（性别）和CreatedTime（注册日期）。n 编写GridView1控件的GridView的Sorting事件。在GridView1控件的“属性”窗口中，单击“事件”按钮 切换到事件列表，在事件列表中双击Sorting，添加GridView1的Sorting事件程序。单击GridView表头列名时触发事件，把对应字段的Dat

14、aField的值传过来，重新设置ViewStateSortOrder和ViewStateOrderDire属性。代码如下：n【演练9-12】代码n 执行Default_Sort.aspx，显示如图9-29所示。单击超链接表头，可以按该列升序或降序排列记录。从图9-29中可以看到，排序是按表中所有记录进行的，而不是只对当前页中的记录排序。n3. 记录的编辑、更新、删除记录的编辑、更新、删除n【演练9-13】 在UserManagement数据库中，对UserInfo表记录实现编辑、更新、取消编辑和删除操作。网页显示如图9-30所示，单击修改行中的“编辑”链接按钮，显示如图9-31所示，单元格变为

15、文本框，修改内容后，单击“更新”链接按钮或“取消”链接按钮。若单击该行中的“删除”链接按钮，则删除该行。n【演练9-13】代码n9.5.3 自定义列和模板列的使用自定义列和模板列的使用n1. 自定义列自定义列n下面的例子演示如何为GridView控件设置绑定列、调整数据呈现效果。n【演练9-14】 用不同形式显示UserManagement数据库中UserInfo表中的记录。n（1）创建网站文件夹n创建文件夹ex9_14和ex9_14App_Data。在SQL Server Management Studio中分离数据库UserManagement，把两个数据库文件复制到ex9_14App_D

16、ata文件夹中。n创建文件夹ex9_14Images及ex9_14ImagesPhotos，把需要的头像图片文件复制到其中。n【演练9-14】代码n2. 模板列（自定义列包含模板列）模板列（自定义列包含模板列）nGridView控件的TemplateField字段中定义的5种不同类型的模板，见表9-9。n【演练9-15】 在演练9-13的基础上，把“性别”改为用下拉列表选择“男”或“女”；添加“账户状态”列，用单选按钮选择“通过”或“停用”。运行结果如图9-38所示。n（1）创建网站文件夹n复制演练9-13创建的网站文件夹ex9_13，改为ex9_15。在Visual Studio中打开网站e

17、x9_15。注意，先分离ex9_13App_Data文件夹中的数据库UserManagement后，才能复制网站。然后，附加ex9_15App_Data中的数据库UserManagement。n（2）把“性别”列改为用DropDownList选择n 在Default.aspx的设计视图中，在GridView控件的右上角单击 按钮，在任务面板中单击“编辑列”，如图9-39所示。显示“字段”对话框，先把已有的“性别”列转换为模板，在“选定的字段”框中选中“性别”，然后单击“将此字段转换为TemplateField”链接按钮，如图9-40所示。单击“确定”按钮后，在源视图中，可以看到“性别”列转换为

18、TemplateField的代码。n 把“性别”列改为编辑时用DropDownList选择。n GridView1控件的GridView的RowDataBound事件。nprotected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)n / = = | = =n if (e.Row.RowState = = DataControlRowState.Edit | e.Row.RowState = =n (DataControlRowState.Alternate | DataControlRowState.Edit)n n DropDownList ddl = (DropDownList)e.Row.FindControl(ddlUserGender);n ddl.Items.Add(new ListItem(男, 男);n ddl.Items.Add(new ListItem(女, 女);n nn对于“性别”列，因为把编辑状态时的TextBo