【ASP.NET】第七课——数据绑定和 GridView 控件的使用

知识点：理解ASP.NET 中数据绑定的概念、掌握数据绑定表达式语法 、掌握 GridView 的用法

 

1、 数据绑定概述

1.1   什么是数据绑定：

        数据绑定是把数据源和控件相关联，并由控件负责自动显示数据的一种特性。

 

1.2    为什么要使用数据绑定：

        数据绑定是ASP.NET提供的另一种访问数据库的方法。与ADO.NET数据库访问技术不同的是：数据绑定技术可以让程序员不关注数据库连接、数据库命令以及如何格式化这些数据以显示在页面上等环节，而是直接把数据绑定到HTML元素和Web控件。数据控件则是用来显示从数据库中获取的数据。

        数据绑定的关键特征是它是声明性的而不是编程性的，这样做的好处是清晰的分离网页中的控件和代码，是制作网页时经常需要处理的问题之一。

 

1.3    数据绑定的类型：

1）单值绑定： 可以通过单值绑定的方式把数据添加到ASP.NET页面的任何地方。可以把数据放在一个控件的属性定义标记里，也可以直接以纯文本的形式放置在HTML标记里。

2）多值绑定： 多值绑定可以显示一个表中的所有内容。同单值绑定不一样，这种类型的数据绑定需要支持它的特殊控件。

 

1.4    数据绑定的工作方式：

        单值数据绑定和多值数据绑定的工作方式不太一样。使用单值数据绑定时，需要把数据绑定表达式插入到.aspx文件的标记中。使用多值数据绑定时，必须设置一个数据控件的单个或多个属性。

        一旦指定了数据绑定，就需要激活它，可以通过调用控件或页面对象的DataBind方法来激活数据绑定。在页面的Load事件中调用DataBind方法。如果没有在Load事件中调用DataBind方法的话，ASP.NET将忽略数据绑定表达式，在页面上将以空值的形式呈现。

 

1.5    常用数据绑定控件：

• 所有直接或间接继承自System.Web.UI.Control的控件（可绑定呈现数据）
• 继承自ListControl或BaseDateList的所有控件（可作为数据容器绑定呈现数据）

        在第二课中，我们已经学会了使用 ASP.NET 提供的控件将数据简单的呈现在页面上。如用 Label、TextBox 呈现单个数据，列表控件如 DropDrownList 可以呈现数据源中某一项数据等。用表格来显示数据是网站开发中一个常见需求，但是用前面所学的控件是无法实现的，一般使用 GridView、DataList、Repeater 等数据绑 定控件。数据绑定控件用于将指定的数据源按一定的格式呈现在 Web 页面上。

 

 

2、单值绑定

        支持单值绑定的控件，允许使用数据绑定表达式，绑定它们的部分属性。数据绑定表达式在页面的 .aspx 标记部分输入，包含在 <%# 和 %> 之间。如：<%# 表达式 %> 。在绑定表达式中，可以使用变量、方法等，在页面处理过程中会执行表达式，将最终的结果呈现在绑定表达式中。

示例练习1：利用单值绑定输出系统时间

要求：用Label控件显示系统当前时间。

第一步，新建项目：在VS中新建asp.net web项目，这里命名为【WebApplication7】，右键单击项目名称【WebApplication7】， 依次点击【添加】→【添加Web窗体】，在弹出的【指定项名称】窗口中，使用默认的命名WebForm1，然后单击【确定】

第二步，使用控件：在默认打开的WebForm1.aspx文件中，使用Label控件。方法：在工具箱中找到Label控件，将其拖拽到适当的位置，并修改ID属性值为lblShowTime。

第三步，修改Text属性值：用Label控件显示文本时可将文本写入Label的Text属性。这里我们想显示系统时间，因此要修改Text属性值为：<%#DateTime.Now.ToLongTimeString() %>

第四步，运行测试：当前页面下，单击鼠标右键，然后单击【在浏览器中预览】，查看效果。

• 出现问题：发现并没有显示时间。
• 原因分析：Label 的 Text 属性并没有绑定到数据
• 解决办法：调用 DataBind()方 法计算表达式的值

第五步，调用DataBind()方法：在WebForm1.aspx文件中，右键单击鼠标，然后单击【查看代码】，打开WebForm1.aspx.cs文件，在页面的Load事件中，调用DataBind()方法。lblShowTime.DataBind();

再次运行测试：

 

2.1  单值绑定的四种数据绑定表达式

        单值绑定其实就是实现动态文本的一种的方式，为了实现单值数据绑定，可以向ASP.NET页面文件中添加特殊的数据绑定表达式。 单值绑定主要有四种数据绑定表达式：

• <%=XXX %> ：它是内联引用方式，可以引用C#代码。
• <%# XXX %> ：它可以引用.cs文件中的代码的字段，但这个字段必须初始化后，在页面的Load事件中使用Page.DataBind方法来实现。
• <%$ XXX %> ：它可以引用Web.config文件中预定义的字段或者已注册的类。
• <%# Eval(XXX) %> ：它类似于JavaScript，数据源也需要绑定。

示例练习2：数据绑定表达式练习

要求：用不同的数据绑定表达式

第一步，新建Web窗体：在示例1的基础上，在解决方案资源管理器窗口中，右键单击网站项目【WebApplication7】， 依次点击【添加】→【Web窗体】，弹出【指定项名称】的窗口，这里采用默认命名“WebForm2”，然后单击【确定】。

第二步，编写源代码：在默认打开的WebForm1.aspx文件中，编写源代码，先测试使用<%=XXX %>进行数据输出

        

            
使用=号
            不绑定控件输出：

            直接输出表达式：<%=1+2 %>

            输出变量：<%=name %>

            输出方法：<%=SayHello() %>


            绑定控件输出：

            输出表达式：

            输出变量：

            输出方法：
        

第三步，编写后置代码文件：在WebForm2.aspx文件中，右键单击鼠标，然后单击【查看代码】，打开WebForm2.aspx.cs文件，编写第二步中使用到的变量 name 和方法 SayHello()

        public string name = "张三";
        public string SayHello()
        {
            return "hello," + name;
        }

第四步，运行测试：当前页面下，单击鼠标右键，然后单击【在浏览器中预览】，查看效果。

总结：使用<%=XXX %>时，不能绑定到控件上。

 

第五步，调用DataBind()方法：通过示例1 ，我们已经知道使用<%# 表达式 %>时，需要调用DataBind()方法，在WebForm2.aspx.cs文件的Page_Load事件中，调用DataBind()方法。this.DataBind();

注意：当调用this.DataBind()时页上所有控件都会重新从数据库里取一下。

第六步，修改源代码：打开WebForm2.aspx文件中，将第二步的源代码进行修改：

运行测试：

 

2.2  单值数据绑定操作步骤

（1）在后台代码中，声明保护级别以上的数据信息（访问修饰符设置protected、public）。如，protected 数据类型 标识符;

（2）调用控件或页面的DataBind()方法。如，this.控件名.DataBind();  或this.DataBind();

（3）在前台页面，给控件的某个属性，以绑定表达式的方式，进行赋值。如，

 

 

3、多值绑定

         多值绑定使程序员不用编写循环语句就能把Array或DataTable中的数据添加到控件中。简化了支持复杂格式和模板选择的数据显示，使得数据能够自动被配置为控件中要显示的格式。

         创建多值绑定，需要使用支持数据绑定的控件，ASP.NET提供一系列这类控件：

（1）列表控件，诸如 ListBox、DropDownList、CheckBoxList 和 RadioButtonList 等。

（2）HtmlSelect，它是一个 HTML 控件，类似于 ListBox 控件。

（3）GirdView、DetailsView、FormView 和 ListView 等复杂的数据控件。

 

3.1   常用的数据绑定控件有：

• GridView控件：以表格的形式显示数据，它是所有数据绑定控件中封装功能最多，最完善的一个控件，在不编写任务代码的情况下可以实现对数据进行技术检索、更新、删除、排序和分页等功能。也能运行代码绑定。
• DataList控件：使用不同的布局来显示数据记录，如将数据记录排成列或行。该控件提供了实现基本数据操作功能的常用命令，同时也提供了丰富的模板供用户使用。
• DetailsView控件：以表格形式显示数据，只是一次只能呈现一条记录，并提供翻阅多条记录以及插入、更新和删除记录功能。该控件通常和其他控件配合使用，如用GridView控件显示基本信息，用DetailsView控件显示相关的详细信息。
• FormView控件：与DetailsView控件类似，它一次呈现数据源的一条记录，并提供翻阅多条记录以及插入、更新和删除记录功能。FormView控件使用自定义布局，在布局时会更灵活些 。
• Repeater控件：以只读的方式显示多条记录，Repeater控件使用自定义布局。
• ListView控件：类似Repeater控件，它本身不提供分页功能，借助DataPage控件实现分页。

 

示例练习3：多值绑定练习

第一步，新建Web窗体：在示例1的基础上，在解决方案资源管理器窗口中，右键单击网站项目【WebApplication7】， 依次点击【添加】→【Web窗体】，弹出【指定项名称】的窗口，这里采用默认命名“WebForm3”，然后单击【确定】。

第二步，使用控件：在默认打开的WebForm3.aspx文件中，使用ListBox控件。方法：在工具箱中找到ListBox控件，将其拖拽到适当的位置。

        

            
新上架的水果有：
            
        

第三步，编写后置代码文件：在WebForm3.aspx文件中，右键单击鼠标，然后单击【查看代码】，打开WebForm3.aspx.cs文件，编写代码

        protected void Page_Load(object sender, EventArgs e)
        {
            //声明一个集合，并赋值
            List strList = new List() {
                "苹果","香蕉","梨子","哈密瓜"
            };
            this.ListBox1.DataSource = strList;//将集合strList，赋值为ListBox1控件的数据源
            this.ListBox1.DataBind();//将数据绑定到控件上
        }

第四步，运行测试：在解决方案资源管理器中，在【WebForm3.aspx】上单击鼠标右键，然后单击【在浏览器中预览】，查看效果。

案例延伸：用GridView控件，绑定集合，输出一下。

 

4、GridView 控件

         GridView 控件以表格的形式显示数据，功能很强大，除了可以实现数据的展示外，还可以 实现分页、排序、编辑、删除等功能。

GridView七种类型字段：

Field字段类型	说明
BoundField（数据绑定字段）	将Data Source数据源的字段数据以文本方式显示。这是 GridView控件的默认列类型。
ButtonField（按钮字段）	在数据绑定控件中显示命令按钮。根据控件的不同，它可让您显示具有自定义按钮控件（例如【添加】或【移除】按钮）的数据行或数据列，按下时会引发RowCommand事件
CommandField（命令字段）	显示含有命令的Button按钮，包括了Select、Edit、Update、Delete命令按钮（DetailsView的CommandField才支持Insert命令）
CheckBoxField（CheckBox字段）	显示为CheckBox类型，通常用于布尔值True/False的显示
HyperLinkField（超链接字段）	将Data Source数据源字段数据显示成HyperLink超级链接，并可指定另外的NavigateUrl超链接
ImageField（图像字段）	在数据绑定控件中显示图像字段
TemplateField（模板字段）	显示用户自定义的模板内容

GridView 常用属性如表所示：

属性	说明
AllowPaging	获取或设置一个值，该值指示是否启用分页功能
AllowSorting	获取或设置一个值，该值指示是否启用排序功能
AutoGenerateColumns	获取或设置一个值，该值指示是否为数据源中的每个字段自动创建绑定字段
DataKeyNames	获取或设置一个数组，该数组包含了显示在 GridView 控件中的项的主键字段的名称
DataKeys	获取一个 DataKey 对象集合，这些对象表示 GridView 控件中的每一行的数据键值
DataSource	获取或设置对象，数据绑定控件从该对象中检索其数据项列表
HorizontalAlign	获取或设置 GridView 控件在页面上的水平对齐方式
SortExpression	获取与正在排序的列关联的排序表达式

GridView 常用方法和事件如表所示：

名称	类型	说明
PageIndexChanging	事件	在 GridView 控件处理分页操作时发生
RowDataBound	事件	将数据行绑定到 GridView 控件中发生
RowDeleting	事件	单击某一行的“删除”按钮时，在 GridView 控件删除该行之前发生
DataBind	方法	将数据源绑定到 GridView 控件

 

4.1  使用GridView控件呈现数据

        GridView 控件最简单的用法是，先把它从工具箱的数据栏中拖入到页面中，然后在后台设 置 DataSource 属性和调用 DataBind()方法，将 DataSource 属性指定的数据源绑定到 GridView 控件中。

示例练习4：使用GridView控件绑定数据

第一步，新建Web窗体：在示例3的基础上，在解决方案资源管理器窗口中，右键单击网站项目【WebApplication7】， 依次点击【添加】→【Web窗体】，弹出【指定项名称】的窗口，这里采用默认命名“WebForm4”，然后单击【确定】。

第二步，使用控件：在默认打开的WebForm4.aspx文件中，使用GridView控件。方法：在工具箱中找到GridView控件，将其拖拽到适当的位置。

第三步，编写DBHelper类：我们经常会用到数据库连接，将功能封装到DBHelper类里。（如果自己有DBHelper类，直接复制到项目中，然后修改命名空间名即可使用）

①添加DBHelper类：在解决方案资源管理器窗口中，右键单击网站项目【WebApplication7】， 依次点击【添加】→【类】，弹出【添加新项】的窗口，修改名称为“DBHelper.cs”，然后单击【添加】。

②编写DBHelper类：一个查询方法、一个增删改方法

示例中用到的数据库素材：【ASP.NET】第四课——基于三层架构搭建“车型管理系统”

DBHelper类完整代码：

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;

namespace WebApplication7
{
    public class DBHelper
    {
        //连接字符串
        static string constr = ".; initial catalog=CarSYS; integrated security=true";
        //对数据库执行查询方法，查询方法一般返回数据集（一个表，里面有很多数据），因此引用一下命名空间System.Data
        public static DataSet getDataSet(string sql)
        {
            //①创建连接数据库对象，需要引用命名空间System.Data.SqlClient;
            SqlConnection con = new SqlConnection(constr);
            //②打开数据库
            con.Open();
            //③执行对数据查询操作
            SqlDataAdapter sda = new SqlDataAdapter(sql , con);
            //④创建数据集对象
            DataSet ds = new DataSet();
            //⑤将执行数据库的查询，填充到数据集对象中
            sda.Fill(ds);
            //关闭数据库
            con.Close();            
            //返回数据集
            return ds;
        }

        //对数据库执行增删改方法，一般返回影响行数
        public static int GetExecute(string sql)
        {
            //①创建连接数据库对象，需要引用命名空间System.Data.SqlClient;
            SqlConnection con = new SqlConnection(constr);
            //②打开数据库
            con.Open();
            //③执行对数据库的增删改操作
            SqlCommand com = new SqlCommand(sql, con);
            //④将执行结果，存到变量里
            int i = com.ExecuteNonQuery();
            //关闭数据库
            con.Close();
            //返回整型结果
            return i;
        }
    }
}

第四步，编写后置代码文件：在WebForm4.aspx文件中，右键单击鼠标，然后单击【查看代码】，打开WebForm4.aspx.cs文件，编写代码。

        protected void Page_Load(object sender, EventArgs e)
        {
            //创建查询语句
            string sql = "select * from Scar";
            //使用DBHelper类的getDataSet()方法，获得查询结果，返回的是一个数据集，将其放在DataSet对象里。需要引用命名空间System.Data;
            DataSet ds = DBHelper.getDataSet(sql);
            //将ds的第一张表赋值给DataTable
            DataTable dt = ds.Tables[0];
            //将数据绑定到GridView1里
            this.GridView1.DataSource = dt;
            //调用控件的DataBind方法
            this.GridView1.DataBind();
        }

第五步，运行测试：在解决方案资源管理器中，在【WebForm4.aspx】上单击鼠标右键，然后单击【在浏览器中预览】，查看效果。

 

4.2   BoundField

        分析示例4 ，我们发现每一列的标题，用的是我们绑定的数据源的属性名，也就是数据表的列名，它们都是英文的，看起来不够直观，我们希望用直观的汉字来显示给用户看，那么就需要对GridView控件进行设置。这里使用GridView控件的BoundField字段进行设置。

        BoundField 用于显示普通文本，是默认的数据绑定列的类型，一般自动生成的列就是该类型。BoundField 列的常用属性 DataField、HeaderText 和 DataFormatString。

• DataField 属性：指定列绑定的字段名或者属性名。
• HeaderText 属性：指定列标题。
• DataFormatString 属性：指定数据显示的格式，常见格式有三种：
  • {0:C}：设置列的内容格式是货币类型的 
  • {0:D}：设置列的内容是数字
  • {0:yy-mm-dd}：设置列的内容格式是日期类型的

 

示例练习5：设置GridView控件的BoundField字段

第一步，编辑列：在示例4 的基础上，打开WebForm4.aspx文件，将其切换到【拆分】模式，点击选中控件后，点击控件右上角的按钮，然后再弹出的【GridView任务】框里，点击【编辑列】，会弹出【字段】窗口，默认选中了【BoundField】字段。

第二步，添加BoundField字段：单击【添加】，会在选定的字段里自动添加一个字段，并同时在右侧显示该字段的相关信息。

第三步，设置BoundField属性：我们想将列标题修改为汉字显示，因此新增加BoundField，然后修改它的DataField属性和HeaderText属性。我们这里先测试做编号列的绑定。

• DataField属性：想把数据表里的哪一列进行绑定，就写上那一列的列名。编号对应的数据库表列名是：CarId，因此在DataField属性后面的文本框里写上CarId即可。（可以从示例4 复制列名，也可以直接打开数据库，找到表，然后复制列名。）
• HeaderText属性：列的中文名称，根据列的内容，自己取适合的名称即可。

设置好以后，单击【确定】即可。

第四步，运行测试：此时我们观察发现源文件自动添加了一列。

在浏览器中运行测试：发现新增加的一列，正常显示，但是这时有了新的问题，编号列有两个，一个中文一个英文，怎么取消英文的编号列。

第五步，取消自动生成的列：按照第一步的操作，打开控件的【字段】窗口，点击自动生成字段前面的，使对号取消，变成下图所示，然后点击【确定】。（原因：GridView控件绑定数据后，会根据数据库表的列自动生成字段，由于我们要自己绑定，因此就不需要自动生成了。）

第六步，继续添加BoundField字段：按照第一步的操作，打开控件的【字段】窗口，按照第二步和第三步，继续添加其他字段，全部添加完成后，点击【确定】。

运行测试：

注意：官方报价一列的数据，和之前有所不同，是因为设置了BoundField列的DataFormatString属性为{0:C}，这样内容格式就是货币类型。

案例思考：品牌编号列给的是品牌编号，用户看不懂代表什么品牌，能不能直接显示汽车品牌？

解决思路：BrandId列是外键列，如果想显示品牌名称，则需要两表联合查询。

①将示例4 中，第四步的查询语句修改一下：

 string sql = "select * from Scar ,Brand where Scar.BrandId = Brand.BrandId";

②将品牌编号字段的属性修改： DataField属性修改为：BrandName，HeaderText属性修改为：品牌名称

 

 

4.3   ImageField

        分析示例5 ，我们发现图片列，显示的是图片名称，怎么可以显示直观的图片呢？我们可以使用ImageField来实现。   

• DataImageUrlField属性：设置绑定至ImageField对象ImageUrl属性的数据源字段名称
• DataImageUrlFormatString属性：URL路径
• HeaderText属性：列的名称

示例练习6：设置GridView控件的ImageField字段

第一步，添加素材images文件夹：可以3直接从电脑上其他位置，将图片素材images文件夹，拖拽到VS项目里的项目名称【WebApplication7】，然后松开鼠标。

第二步，添加ImageField字段：在示例5 的基础上，打开GridView控件的【字段】窗口，点击【可用字段】里的ImageField，然后点击【添加】

第三步，设置ImageField字段的属性：

• DataImageUrlField属性：对应的数据库表列，这里设置为：picture
• DataImageUrlFormatString属性：URL路径，因为图片放在images文件夹中，这里要设置为：~/Images/{0}
• HeaderText属性：这里设置为：汽车图片

第四步，运行测试：

出现问题：图片有些太大了

解决办法：设置图片样式。右键查看源代码，发现对应的是img标签

第五步，添加图片样式：打开WebForm4.aspx文件，切换到【源】视图，在head标签里添加style样式，设置图片的width和height属性。

运行测试：

细节处理：原有的“图片”列，是否可以删除？新增加的“汽车图片”列，能不能将顺序调整一下？

解决办法：GridView控件→【编辑列】→【字段】→【选定的字段】，可以删除列、也可以上下调整列的顺序。

 

4.4   CommandField

        CommandField 字段提供了用于执行选择、编辑或删除的预定义命令按钮。

 

示例练习7：增加“删除”列

第一步，添加CommandField字段：在示例6 的基础上，打开GridView控件的【字段】窗口，点击【可用字段】里的CommandField，然后点击前面的按钮，然后点击【删除】→再点击【添加】，会自动增加一个【删除】字段。

第二步，设置字段的属性：其他属性都已默认设置好，我们这里只需要设置HeaderText属性为：删除数据，即可。然后点击【确定】

第三步，运行测试：

出现问题：点击每一行数据后面的“删除”时，报错。提示：GridView“GridView1”激发了未处理的事件“RowDeleting”。

解决办法：给GridView控件添加RowDeleting事件。

第四步，添加RowDeleting事件：选中GridView控件后，在属性面板切换到【事件】，找到RowDeleting，然后双击，进入该事件的代码编写

第五步，编写事件代码：当用户点击“删除”时，调用DBHelper类里的方法删除数据。

        protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)
        {
            //获取用户选中的行所对应的编号，并存在变量里
            int checkId = int.Parse(this.GridView1.Rows[e.RowIndex].Cells[0].Text);
            //创建删除语句，用+将字符串和变量连接
            string sql = "delete from Scar where CarId=" + checkId ;
            //将DBHelper类的执行结果，存到整型变量里
            int i = DBHelper.GetExecute(sql);
            if (i > 0)
            {
                Response.Write("");
                //ClientScript.RegisterStartupScript(this.GetType(), "DelSuccess", "");
            }
        }

第六步，运行测试：

• 发现问题：提示“删除成功”，但是页面上仍然有该行数据。
• 原因分析：绑定的数据库没有及时更新。
• 解决办法：将数据源重新绑定一次。

修改后的WebForm4.aspx.cs代码：

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication7
{
    public partial class WebForm4 : System.Web.UI.Page
    {
        public void BindScar()//声明一个绑定方法
        {
            //创建查询语句
            string sql = "select * from Scar ,Brand where Scar.BrandId = Brand.BrandId";
            //使用DBHelper类的getDataSet()方法，获得查询结果，返回的是一个数据集，将其放在DataSet对象里。需要引用命名空间System.Data;
            DataSet ds = DBHelper.getDataSet(sql);
            //将ds的第一张表赋值给DataTable
            DataTable dt = ds.Tables[0];
            //将数据绑定到GridView1里
            this.GridView1.DataSource = dt;
            //调用控件的DataBind方法
            this.GridView1.DataBind();
        }
        protected void Page_Load(object sender, EventArgs e)
        {
            BindScar();
        }

        protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)
        {
            //获取用户选中的行所对应的编号，并存在变量里
            int checkId = int.Parse(this.GridView1.Rows[e.RowIndex].Cells[0].Text);
            //创建删除语句，用+将字符串和变量连接
            string sql = "delete from Scar where CarId=" + checkId ;
            //将DBHelper类的执行结果，存到整型变量里
            int i = DBHelper.GetExecute(sql);
            if (i > 0)
            {
                ClientScript.RegisterStartupScript(this.GetType(), "DelSuccess", "");
                //重新绑定一次数据
                BindScar();
            }
        }
    }
}

 

4.5   HyperLinkField

        HyperLinkField 列允许显示一个超链接，用来连接到其他页面。常用属性：

• HeaderText属性：表示列的标题
• Text属性：表示链接呈现的文本
• DataNavigateUrlFields属性：表示跳转的地址绑定的字段 
• DataNavigateUrlFormatString属性： 表示跳转的详细页面的地址并传递参数，其值是当前行绑定的字段。

 

示例练习8：增加“详细”列

要求：在 GridView 中增加一列，可以通过超链接打开车型的详情页。

第一步，添加Web窗体：在示例7 的基础上，右键单击项目名称【WebApplication6】， 依次点击【添加】→【添加Web窗体】，在弹出的【指定项名称】窗口中，命名detailCar，然后单击【确定】

第二步，编写detailCar后台代码：在默认打开的detailCar.aspx文件中，单击鼠标右键后，点击【查看代码】，编写代码。这里只做演示用，因此我们只显示对应的汽车编号即可。

第三步，添加HyperLinkField字段：打开WebForm4.aspx文件，切换到【拆分】视图，打开GridView控件的【字段】窗口，点击【可用字段】里的HyperLinkField，然后点击【添加】，会自动增加一个【HyperLinkField】字段。

第四步，设置HyperLinkField属性：

• HeaderText属性：设置为“详细”
• Text”属性：设置为“ “详细”
• DataNavigateUrlFields属性：设置为“CarId”，将数据库表中的CarId字段进行绑定
• DataNavigateUrlFormatString ” 属 性： 设置为 “~/detailCar.aspx?CarId={0}”，表示跳转的detailCar.aspx页面，并传递 CarId 参数其值是当前行绑定的车型的编号。

第五步，运行测试：

 

5、GridView的分页

         GridView 自带分页功能，通过设置相关属性并实现分页事件的处理程序就能完成分页功能。 启动它的分页功能需要设置 AllowPaging 属性为“True”；更改“PageSize”属性，该属性表示 每页显示的记录数，默认值为 10；更改“PageIndex”属性，该属性表示页码，默认值为 0。

示例练习9：实现分页功能

第一步，设置GridView控件属性：在示例8 的基础上，选择GridView控件，在属性面板设置属性：AllowPaging属性设置为True，PageSize属性设置为3（这个数字可以根据实际数据量进行设定）。

第二步，运行测试：实现了分页，但是当我们点击其他页面时，提示错误：GridView“GridView1”激发了未处理的事件“PageIndexChanging”。

第三步，添加PageIndexChanging事件：选中GridView控件后，在属性面板切换到【事件】，找到PageIndexChanging，然后双击，进入该事件的代码编写

第四步，编写事件代码：

运行测试：

 

6、设置GridView的样式

         GridView 使用表格显示数据，默认的显示样式，有时不符合我们的需求，可以更改表格的 显示样式来美化界面。 GridView 中具有自带的样式。

示例练习10：修改GridView样式

修改方法：在示例9 的基础上，点击选中ridView控件后，点击控件右上角的按钮，然后再弹出的【GridView任务】框里，点击【自动套用格式】，会弹出【自动套用格式】窗口，选择适合的样式。

运行测试：

 

 

本课总结

• ASP.NET 框架提供了数据绑定机制，使我们能快速地将数据源展示在页面上。
• ASP.NET 提供了数据绑定语法，可以将控件属性值绑定到数据，数据绑定表达式包含在“<%#” 和“%>”之间。
• 在绑定表达式中，可以使用变量、方法等，在页面处理过程中会执行表达式，将最终的结果 呈现在绑定表达式中。
• 通过调用 DataBind()方法计算绑定表达式的值，控件才会显示数据。
• GridView 控件以表格的形式显示数据，功能很强大，除了可以实现数据的展示外，还可以 实现分页、排序、编辑、删除等功能。
• 默认情况下，GridView 会自动为数据源中的每个字段或者对象中的每个属性创建一个 GridView 列。
• 手动添加 GridView 列时，可以选择列的类型有：BoundField、CheckBoxField、CommandField、 HyperLinkField、ImageField、TemplateField 等。
• GridView 自带分页功能，通过设置相关属性并实现分页事件的处理程序就能完成分页功能。
• 实现 GridView 的 RowDeleting 事件的处理程序，完成单行删除的功能。

 

 

 

============这里是结束分割线====================