《第9章数据绑定与数据绑定控件2》由会员分享，可在线阅读，更多相关《第9章数据绑定与数据绑定控件2（33页珍藏版）》请在金锄头文库上搜索。
1、第第9章章 数据绑定与数据绑数据绑定与数据绑定控件定控件9.5ASP.NET数据库网站设计教程（数据库网站设计教程（C#版）版）配套教学资源配套教学资源本章内容：数据绑定，GridView控件，Details View控件，FormView控件，使用数据绑定表达式实现数据绑定，调用DataBind()方法实现数据绑定。本章重点：GridView控件，DetailsView控件，FormView控件。2021/8/141n n9.5.1 GridView9.5.1 GridView控件的语法控件的语法控件的语法控件的语法n nGridViewGridView控件的基本语法格式如下：控件的基本语法
2、格式如下：n nasp:GridView ID=GridView1 runat=server AutoGenerateColumns=false n n n n asp:BoundField DataField= 1 /n n asp:BoundField DataField= 2 /n n n n n n 其他控件其他控件其他控件其他控件n n %# %n n n n n n n n9.5 GridView控件控件n n2 2GridViewGridView控件的常用属性控件的常用属性控件的常用属性控件的常用属性n n3 3GridViewGridView控件的数据绑定列控件的数据绑定列控件
3、的数据绑定列控件的数据绑定列n nGridViewGridView控件通过设置控件通过设置AutoGenerateColumnsAutoGenerateColumns属性为属性为truetrue自自动创建列，也可以通过模板列创建自定义的列。在动创建列，也可以通过模板列创建自定义的列。在GridViewGridView、DetailsViewDetailsView等控件中，对于绑定字段的值，有等控件中，对于绑定字段的值，有7 7种类型的显示方式，见表种类型的显示方式，见表9-69-6。FieldField声明在声明在GridViewGridView中是中是被包含在被包含在标记区块中的。标记区块中
4、的。n n表表9-79-7所列的属性代表每个列类型实际提供的属性的一个所列的属性代表每个列类型实际提供的属性的一个子集。每个列类型定义了一个定制的属性集，用以定义和子集。每个列类型定义了一个定制的属性集，用以定义和配置所绑定的字段。配置所绑定的字段。n n4 4GridViewGridView控件的事件控件的事件控件的事件控件的事件n nGridViewGridView控件的事件非常丰富，在控件的事件非常丰富，在GridViewGridView控件上操作时控件上操作时就会产生相应的事件，要实现的功能代码写在相应的事件就会产生相应的事件，要实现的功能代码写在相应的事件中。中。GridViewGr
5、idView控件的常用事件见表控件的常用事件见表9-89-8。n n9.5.2 GridView9.5.2 GridView控件的使用示例控件的使用示例控件的使用示例控件的使用示例n n1 1分页显示记录分页显示记录分页显示记录分页显示记录n n【演练【演练9-119-11】 GridView GridView控件的主要功能是以表的形式显示控件的主要功能是以表的形式显示数据，本例采用自动套用格式，分页显示数据，本例采用自动套用格式，分页显示UserManagementUserManagement数据库中数据库中UserInfoUserInfo表的所有记录。表的所有记录。n n新建一个空网站新建
6、一个空网站C:ex9_11C:ex9_11。添加。添加Default.aspxDefault.aspx，在，在Default.aspx.csDefault.aspx.cs中添加对中添加对SQL ServerSQL Server数据库命名空间的引用。数据库命名空间的引用。在在web.configweb.config中添加数据库的连接字符串。中添加数据库的连接字符串。n n 在在Default.aspxDefault.aspx的设计视图中，从工具箱的的设计视图中，从工具箱的“ “数据数据” ”组组中，向中，向WebWeb窗体中添加一个窗体中添加一个GridViewGridView控件。控件。n n
7、 单击选中单击选中GridViewGridView控件，在控件，在“ “属性属性” ”窗口中设置分页窗口中设置分页AllowPagingAllowPaging为为truetrue，每页显示记录个数，每页显示记录个数PageSizePageSize为为3 3。设置。设置GridViewGridView属性后，从属性后，从WebWeb窗体上能看到分页样式。最好在窗体上能看到分页样式。最好在Default.aspx.csDefault.aspx.cs中用代码设置，更易于阅读。中用代码设置，更易于阅读。n n 自动套用格式，在自动套用格式，在Default.aspxDefault.aspx的设计视图中
8、，在的设计视图中，在GridViewGridView控件的右上角单击控件的右上角单击 按钮，在任务面板中单击按钮，在任务面板中单击“ “自自动套用格式动套用格式” ”，如图，如图9-209-20所示。所示。n n 显示显示“ “自动套用格式自动套用格式” ”对话框，在左侧栏中选择一种架对话框，在左侧栏中选择一种架构，如构，如“ “专业型专业型” ”，如图，如图9-219-21所示，然后单击所示，然后单击“ “确定确定” ”按按钮。钮。n n GridViewGridView分页时触发分页时触发PageIndexChangingPageIndexChanging事件，在事件，在GridView1
9、GridView1控件的控件的“ “属性属性” ”窗口中单击窗口中单击“ “事件事件” ”按钮按钮 切换切换到事件列表，在事件列表中双击到事件列表，在事件列表中双击PageIndexChangingPageIndexChanging，添加，添加GridView1GridView1的的PageIndexChangingPageIndexChanging事件程序。代码如下：事件程序。代码如下：n nprotected void GridView1_PageIndexChanging(object sender, protected void GridView1_PageIndexChanging(
10、object sender, GridViewPageEventArgs e)GridViewPageEventArgs e)n n n n GridView1.PageIndex = e.NewPageIndex; / GridView1.PageIndex = e.NewPageIndex; /当前页的索引当前页的索引n n showAllUsers(); / showAllUsers(); /重新绑定重新绑定GridViewGridView的过程的过程n n n n 在在PagePage的的LoadLoad事件中显示初始的记录，代码如下：事件中显示初始的记录，代码如下：n nprotec
11、ted void Page_Load(object sender, EventArgs e)protected void Page_Load(object sender, EventArgs e)n n n n if (!Page.IsPostBack) / if (!Page.IsPostBack) /防止重复绑定防止重复绑定n n n n showAllUsers();/ showAllUsers();/显示所有记录显示所有记录n n n n n n 显示所有记录的绑定过程程序，在本过程中把显示所有记录的绑定过程程序，在本过程中把GridViewGridView绑定到数据绑定到数据源。代码
12、如下：源。代码如下：n nprivate void showAllUsers()private void showAllUsers()n n n n string connString = string connString = ConfigurationManager.ConnectionStringsConnStr.ToString();ConfigurationManager.ConnectionStringsConnStr.ToString();n n SqlConnection conn = new SqlConnection(connString); SqlConnection c
13、onn = new SqlConnection(connString); n n string selectSql = select * from UserInfo order by UserId;/SQL string selectSql = select * from UserInfo order by UserId;/SQL查询字查询字符串符串n n SqlDataAdapter adapter = new SqlDataAdapter(selectSql, conn); SqlDataAdapter adapter = new SqlDataAdapter(selectSql, con
14、n);n n DataSet ds = new DataSet(); DataSet ds = new DataSet();n n adapter.Fill(ds); adapter.Fill(ds);n n GridView1.DataSource = ds; GridView1.DataSource = ds;n n GridView1.AllowPaging = true;/ GridView1.AllowPaging = true;/启用分页启用分页n n GridView1.PageSize = 3;/ GridView1.PageSize = 3;/每页显示的记录数每页显示的记录数
15、n n GridView1.DataBind(); GridView1.DataBind();n n n n当数据源中没有记录时，当数据源中没有记录时，GridViewGridView默认只显示表头不显示默认只显示表头不显示记录。可以修改为当记录。可以修改为当GridViewGridView中没有记录时显示提示，在中没有记录时显示提示，在中添加中添加EmptyDataTemplateEmptyDataTemplate模板，内容如下：模板，内容如下：n n提示：当前没有任何记录！提示：当前没有任何记录！n n为了显示上面提示，把为了显示上面提示，把showAllUsers()showAllUse
16、rs()过程中的过程中的selectSqlselectSql替替换成下面内容：换成下面内容：n nstring selectSql = select * from UserInfo where string selectSql = select * from UserInfo where username=111 order by UserId;username=111 order by UserId;n n2. 2. 自动排序记录自动排序记录自动排序记录自动排序记录n n【演练【演练9-129-12】 在在UserManagementUserManagement数据库中，显示数据库中，显示U
17、serInfoUserInfo表记录时把英文列名改为中文，单击表记录时把英文列名改为中文，单击GridViewGridView表头实现记表头实现记录的排序。录的排序。n n新建一个空网站新建一个空网站C:ex9_12C:ex9_12。添加。添加Default_Sort.aspxDefault_Sort.aspx，在，在Default_Sort.aspx.csDefault_Sort.aspx.cs中添加对中添加对SQL ServerSQL Server数据库命名空间的数据库命名空间的引用。在引用。在web.configweb.config中添加数据库的连接字符串。中添加数据库的连接字符串。n
18、n（1 1）设置）设置GridViewGridView控件的分页、排序等控件的分页、排序等n n 在在Default_Sort.aspxDefault_Sort.aspx的设计视图中，从工具箱的的设计视图中，从工具箱的“ “数据数据” ”组中，向组中，向WebWeb窗体中添加一个窗体中添加一个GridViewGridView控件。控件。n n 在在GridView1GridView1控件的属性窗口中，设置允许分页控件的属性窗口中，设置允许分页AllowPagingAllowPaging为为truetrue，每页显示的记录数，每页显示的记录数PageSizePageSize为为3 3。最好。最好
19、在后台代码中用语句来实现设置。在后台代码中用语句来实现设置。n n（2 2）把）把GridViewGridView表头列名改为对应的中文（绑定列操作）表头列名改为对应的中文（绑定列操作）n n 更改更改GridViewGridView控件中显示的列名，把列名控件中显示的列名，把列名UserNameUserName改改为为“ “用户名用户名” ”。在。在GridViewGridView控件的右上角单击控件的右上角单击 按钮，在任按钮，在任务面板中单击务面板中单击“ “编辑列编辑列” ”。显示。显示“ “字段字段” ”对话框，取消选对话框，取消选中左下角的中左下角的“ “自动生成字段自动生成字段”
20、 ”复选框，也可在后台程序中复选框，也可在后台程序中设置设置“ “GridView1.AutoGenerateColumns = false;GridView1.AutoGenerateColumns = false;” ”。n n 在在“ “可用字段可用字段” ”框中单击框中单击“ “BoundFieldBoundField” ”，单击，单击“ “添加添加” ”按钮，将其添加到按钮，将其添加到“ “选定的字段选定的字段” ”框中，如图框中，如图9-239-23所示。所示。在在“ “选定的字段选定的字段” ”框中选中要操作的字段，在右侧的框中选中要操作的字段，在右侧的“ “BoundField
21、BoundField属性属性” ”栏中设置属性，在绑定到的字段框栏中设置属性，在绑定到的字段框DataFieldDataField后输入表中的列名后输入表中的列名UserNameUserName；在对应表头内的文；在对应表头内的文本本HeaderTextHeaderText后输入后输入“ “用户名用户名” ”，如图，如图9-249-24所示。所示。n n重复本操作，设置重复本操作，设置UserGenderUserGender（性别）、（性别）、UserEmailUserEmail（邮箱）（邮箱）、CreatedTimeCreatedTime（注册日期，（注册日期，DataFormatStrin
22、gDataFormatString为为0:d0:d）等，）等，改为对应的中文名称。改为对应的中文名称。n n由于由于IsPassIsPass是是bitbit型的，一般显示为复选框，因此从型的，一般显示为复选框，因此从“ “可选可选字段字段” ”框中选择框中选择CheckBoxFieldCheckBoxField，添加到，添加到“ “选定的字段选定的字段” ”框框中，在中，在“ “BoundFieldBoundField属性属性” ”栏中设置栏中设置DataFieldDataField为为IsPassIsPass，HeaderTextHeaderText为为“ “有效有效” ”。最后单击。最后单
23、击“ “确定确定” ”按钮，关闭对按钮，关闭对话框。在设计视图中显示绑定列后的视图，如图话框。在设计视图中显示绑定列后的视图，如图9-259-25所示。所示。在源视图中查看在源视图中查看Default_Sort.aspxDefault_Sort.aspx代码，了解生成的绑定代代码，了解生成的绑定代码，如图码，如图9-269-26所示。所示。n n 本网站采用演练本网站采用演练9-119-11中的代码，按演练中的代码，按演练9-119-11中步骤中步骤、在在Default_Sort.aspx.csDefault_Sort.aspx.cs中添加代码。执行中添加代码。执行Default_Sort.a
24、spxDefault_Sort.aspx，运行结果如图，运行结果如图9-279-27所示。所示。n n（2 2）自动排序）自动排序n n 在在GridView1GridView1控件的属性窗口中，设置允许排序控件的属性窗口中，设置允许排序AllowSortingAllowSorting为为truetrue。n n 在在GridViewGridView控件的右上角单击控件的右上角单击 按钮，在任务面板中单击按钮，在任务面板中单击“ “编辑列编辑列” ”。显示。显示“ “字段字段” ”对话框，先在对话框，先在“ “选定的字段选定的字段” ”框框中单击选定要设置的列名（如中单击选定要设置的列名（如“
25、 “用户名用户名” ”），然后在），然后在“ “BoundFieldBoundField属性属性” ”栏中设置属性，在栏中设置属性，在SortExpressionSortExpression后输入后输入排序表达式，排序必须以某个字段作为排序关键字才能完成，排序表达式，排序必须以某个字段作为排序关键字才能完成，这里输入列名（如这里输入列名（如UserNameUserName），如图），如图9-289-28所示。之后，作为所示。之后，作为排序关键字的列的列名变为超链接样式。排序关键字的列的列名变为超链接样式。n n重复本操作，分别设置重复本操作，分别设置UserGenderUserGender（性
26、别）和（性别）和CreatedTimeCreatedTime（注册日期）。（注册日期）。n n 编写编写GridView1GridView1控件的控件的GridViewGridView的的SortingSorting事件。在事件。在GridView1GridView1控件的控件的“ “属性属性” ”窗口中，单击窗口中，单击“ “事件事件” ”按钮按钮 切切换到事件列表，在事件列表中双击换到事件列表，在事件列表中双击SortingSorting，添加，添加GridView1GridView1的的SortingSorting事件程序。单击事件程序。单击GridViewGridView表头列名时表头
27、列名时触发事件，把对应字段的触发事件，把对应字段的DataFieldDataField的值传过来，重新设置的值传过来，重新设置ViewStateSortOrderViewStateSortOrder和和ViewStateOrderDireViewStateOrderDire属性。代码属性。代码如下：如下：n n【演练【演练9-129-12】代码代码n n 执行执行Default_Sort.aspxDefault_Sort.aspx，显示如图，显示如图9-299-29所示。单击超链所示。单击超链接表头，可以按该列升序或降序排列记录。从图接表头，可以按该列升序或降序排列记录。从图9-299-29中
28、可中可以看到，排序是按表中所有记录进行的，而不是只对当前以看到，排序是按表中所有记录进行的，而不是只对当前页中的记录排序。页中的记录排序。n n3. 3. 记录的编辑、更新、删除记录的编辑、更新、删除记录的编辑、更新、删除记录的编辑、更新、删除n n【演练【演练9-139-13】 在在UserManagementUserManagement数据库中，对数据库中，对UserInfoUserInfo表表记录实现编辑、更新、取消编辑和删除操作。网页显示如记录实现编辑、更新、取消编辑和删除操作。网页显示如图图9-309-30所示，单击修改行中的所示，单击修改行中的“ “编辑编辑” ”链接按钮，显示如链
29、接按钮，显示如图图9-319-31所示，单元格变为文本框，修改内容后，单击所示，单元格变为文本框，修改内容后，单击“ “更更新新” ”链接按钮或链接按钮或“ “取消取消” ”链接按钮。若单击该行中的链接按钮。若单击该行中的“ “删删除除” ”链接按钮，则删除该行。链接按钮，则删除该行。n n【演练【演练9-139-13】代码代码n n9.5.3 9.5.3 自定义列和模板列的使用自定义列和模板列的使用自定义列和模板列的使用自定义列和模板列的使用n n1. 1. 自定义列自定义列自定义列自定义列n n下面的例子演示如何为下面的例子演示如何为GridViewGridView控件设置绑定列、调整数控
30、件设置绑定列、调整数据呈现效果。据呈现效果。n n【演练【演练9-149-14】 用不同形式显示用不同形式显示UserManagementUserManagement数据库中数据库中UserInfoUserInfo表中的记录。表中的记录。n n（1 1）创建网站文件夹）创建网站文件夹n n创建文件夹创建文件夹ex9_14ex9_14和和ex9_14App_Dataex9_14App_Data。在。在SQL Server SQL Server Management StudioManagement Studio中分离数据库中分离数据库UserManagementUserManagement，把两
31、个，把两个数据库文件复制到数据库文件复制到ex9_14App_Dataex9_14App_Data文件夹中。文件夹中。n n创建文件夹创建文件夹ex9_14Imagesex9_14Images及及ex9_14ImagesPhotosex9_14ImagesPhotos，把需，把需要的头像图片文件复制到其中。要的头像图片文件复制到其中。n n【演练【演练9-149-14】代码代码n n2. 2. 模板列（自定义列包含模板列）模板列（自定义列包含模板列）模板列（自定义列包含模板列）模板列（自定义列包含模板列）n nGridViewGridView控件的控件的TemplateFieldTemplat
32、eField字段中定义的字段中定义的5 5种不同类型的种不同类型的模板，见表模板，见表9-99-9。n n【演练【演练9-159-15】 在演练在演练9-139-13的基础上，把的基础上，把“ “性别性别” ”改为用下改为用下拉列表选择拉列表选择“ “男男” ”或或“ “女女” ”；添加；添加“ “账户状态账户状态” ”列，用单列，用单选按钮选择选按钮选择“ “通过通过” ”或或“ “停用停用” ”。运行结果如图。运行结果如图9-389-38所示。所示。n n（1 1）创建网站文件夹）创建网站文件夹n n复制演练复制演练9-139-13创建的网站文件夹创建的网站文件夹ex9_13ex9_13，
33、改为，改为ex9_15ex9_15。在。在Visual StudioVisual Studio中打开网站中打开网站ex9_15ex9_15。注意，先分离。注意，先分离ex9_13App_Dataex9_13App_Data文件夹中的数据库文件夹中的数据库UserManagementUserManagement后，才后，才能复制网站。然后，附加能复制网站。然后，附加ex9_15App_Dataex9_15App_Data中的数据库中的数据库UserManagementUserManagement。n n（2 2）把）把“ “性别性别” ”列改为用列改为用DropDownListDropDownL
34、ist选择选择n n 在在Default.aspxDefault.aspx的设计视图中，在的设计视图中，在GridViewGridView控件的右上角控件的右上角单击单击 按钮，在任务面板中单击按钮，在任务面板中单击“ “编辑列编辑列” ”，如图，如图9-399-39所示。所示。显示显示“ “字段字段” ”对话框，先把已有的对话框，先把已有的“ “性别性别” ”列转换为模板，列转换为模板，在在“ “选定的字段选定的字段” ”框中选中框中选中“ “性别性别” ”，然后单击，然后单击“ “将此字将此字段转换为段转换为TemplateFieldTemplateField” ”链接按钮，如图链接按钮，
35、如图9-409-40所示。单击所示。单击“ “确定确定” ”按钮后，在源视图中，可以看到按钮后，在源视图中，可以看到“ “性别性别” ”列转换为列转换为TemplateFieldTemplateField的代码。的代码。n n 把把“ “性别性别” ”列改为编辑时用列改为编辑时用DropDownListDropDownList选择。选择。n n GridView1GridView1控件的控件的GridViewGridView的的RowDataBoundRowDataBound事件。事件。n nprotected void GridView1_RowDataBound(object sender
36、, protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)GridViewRowEventArgs e)n n / = = | = = / = = | = =n n if (e.Row.RowState = = DataControlRowState.Edit | e.Row.RowState = if (e.Row.RowState = = DataControlRowState.Edit | e.Row.RowState = = =n n (DataControlRowState.Altern
37、ate | DataControlRowState.Edit) (DataControlRowState.Alternate | DataControlRowState.Edit)n n n n DropDownList ddl = DropDownList ddl = (DropDownList)e.Row.FindControl(DropDownList)e.Row.FindControl(ddlUserGenderddlUserGender););n n ddl.Items.Add(new ListItem( ddl.Items.Add(new ListItem(男男, , 男男););
38、n n ddl.Items.Add(new ListItem( ddl.Items.Add(new ListItem(女女, , 女女););n n n n n n对于对于“ “性别性别” ”列，因为把编辑状态时的列，因为把编辑状态时的TextBoxTextBox更改为更改为DropDownListDropDownList，所以要更改，所以要更改GridView1GridView1的的RowUpdatingRowUpdating事件事件程序中的程序中的userGenderuserGender一行，替换为如下代码，把选定值保一行，替换为如下代码，把选定值保存到存到userGenderuserGe
39、nder中：中：n nstring userGender = string userGender = (DropDownList)GridView1.Rowse.RowIndex.FindControl(DropDownList)GridView1.Rowse.RowIndex.FindControl(ddlUserGender).ddlUserGender).n nSelectedValue.ToString();SelectedValue.ToString();n n（3 3）把）把“ “账户状态账户状态” ”改为用单选实现改为用单选实现n n“ “账户状态账户状态” ”列为列为BoolB
40、ool型，把显示的型，把显示的truetrue或或falsefalse，改为显，改为显示示“ “通过通过” ”或或“ “停用停用” ”。在。在GridViewGridView控件的右上角单击控件的右上角单击 按按钮，在任务面板中单击钮，在任务面板中单击“ “编辑列编辑列” ”。在。在“ “字段字段” ”对话框中，对话框中，在在“ “选定的字段选定的字段” ”框中单击框中单击“ “账户状态账户状态” ”，然后单击，然后单击“ “将将此字段转换为此字段转换为TemplateFieldTemplateField” ”。n n 把把“ “账户状态账户状态” ”列改为编辑时用列改为编辑时用RadioBu
41、ttonListRadioButtonList选择。选择。n n 更改更改GridView1GridView1的的RowUpdatingRowUpdating事件程序中的事件程序中的isPassisPass一行，一行，替换为如下代码，把选定值保存到替换为如下代码，把选定值保存到IsPassIsPass中：中：n nstring IsPass = string IsPass = (RadioButtonList)GridView1.Rowse.RowIndex.(RadioButtonList)GridView1.Rowse.RowIndex.n n图图9-50 9-50 设置完成的单选组设置完
42、成的单选组n nFindControl(rdoIsPass).SelectedValue.ToString();FindControl(rdoIsPass).SelectedValue.ToString(); n n请读者把请读者把“ “删除删除” ”列转换为模板，更换为如下代码，实现列转换为模板，更换为如下代码，实现删除记录前的提示：删除记录前的提示：n nasp:TemplateField HeaderText=ShowHeader=falsen n n n asp:LinkButton ID=LinkButton1 runat=server );n n n n再见部分资料从网络收集整理而来，供大家参考，感谢您的关注！
