第34章、数据控件GridView

 

【知识要点】
　　（１）初识GridView
　　（２）为GridView加个样式
　　（３）让GridView自定义表头

【问题提出】
　　如何把客户以下面列表的形式展示出来呢？

【在线指导】

　　GridView数据控件在网站后台或者WEB项目中是应用最高的一个控件，我们一步一步来掌握它。 　　

一、初识GridView

1、设计界面

　　（１）打开Hello项目，单击“启动页>最近使用的项目>Hello”。

　　（２）在“解决方案资源管理器”中添加“SqlGridview.aspx”页面。

　　（３）从工具箱中拖1个GridView到SqlGridview.aspx页面。

　　　　　　　　　　　　
　　　　 　　　　　　

　　　下拉列表框控件的ID属性分别为：gvClient。 　　

２、添加代码

　　（１）双击页面上的“空白”部分。

　　我们在Page_Load()中间输入：

//连接SQL SERVER
string ConnSqlServer = "Server=www.woshicainiao.net;Database=SuperMarket;User ID=sa;Pwd=xxx";
SqlConnection Conn = new SqlConnection(ConnSqlServer);

//打开
Conn.Open();

//通过SqlDataAdapter读取Client表中信息
string ClientSql = "SELECT * FROM Client";
SqlDataAdapter Adapter=new SqlDataAdapter(ClientSql,Conn);
DataSet Ds=new DataSet();
Adapter.Fill(Ds,"Client");

//设置gvClient的数据源与绑定
gvClient.DataSource = Ds.Tables["Client"];
gvClient.DataBind();

//关闭数据库
Conn.Close();

　　讲解：

　　本章例子着重学习了SqlDataAdapter、DataSet和GridView。
　　SqlDataAdapter Adapter=new SqlDataAdapter(ClientSql,Conn)：SqlDataAdapter你可以看作与SqlCommand功能相似，执行SQL语句；
　　DataSet Ds=new DataSet()：DataSet我们可以看作称之为“数据集”，主要存储“内存表”，即可以是SqlDataAdapter填充的，也可以是DataTable。
　　Adapter.Fill(Ds,"Client")：Adapter读取客户表的内容填充到DataSet中，注意Fill(Ds,"Client")这里的Client是内存表的名称，可以和实体客户表Client命名不同。
　　gvClient.DataSource = Ds.Tables["Client"]：表示把gvClient的数据源设为DataSet中的内存表“Client“。
　　gvClient.DataBind()：如果仅设置数据源，这时候GridView并不会显示，需要执行DataBind()才可以显示。

　　

　　（２）从“解决方案资源管理器”中，选择“SqlGridview.aspx”单击右键“在浏览器中查看”。　　

　　太好了，就这么简单几行代码，就可以显示客户表Client中的内容了，只是看着简陋一点，而且标题似乎还是SQL Server中的列名，别着急，我们一步一步来，下面我们首先把样式改得好看一点。　　

二、为GridView加个样式

1、设计界面

　　（１）打开Hello项目，单击“启动页>最近使用的项目>Hello”。

　　（２）在“解决方案资源管理器”中添加“SqlGridViewStyle.aspx”页面。

　　（３）从工具箱中拖1个GridView到SqlGridViewStyle.aspx页面。。

　　　　　　　　
　　　　　（GridView控件ID属性分别为：gvClient） 　　　　
　　　
　　　　　　　　 （单击“>”箭头按钮。）

　　
　　　　　　　　　　 　(单击“自动套用格式”)　　　　
　　
　　　　　　　　　　　　　　　（选择：沙滩和天空样式）

　　　　　

２、添加代码

　　（１）双击页面上的“空白”部分。

　　我们在Page_Load()中间输入：（代码同上）

//连接SQL SERVER
string ConnSqlServer = "Server=www.woshicainiao.net;Database=SuperMarket;User ID=sa;Pwd=xxx";
SqlConnection Conn = new SqlConnection(ConnSqlServer);

//打开
Conn.Open();

//通过SqlDataAdapter读取Client表中信息
string ClientSql = "SELECT * FROM Client";
SqlDataAdapter Adapter=new SqlDataAdapter(ClientSql,Conn);
DataSet Ds=new DataSet();
Adapter.Fill(Ds,"Client");

//设置gvClient的数据源与绑定
gvClient.DataSource = Ds.Tables["Client"];
gvClient.DataBind();

//关闭数据库
Conn.Close();

　　讲解：

　　由于代码和“一、初识GridView”完全相同，不再赘述。

　　（２）从“解决方案资源管理器”中，选择“SqlGridViewStyle.aspx”单击右键“在浏览器中查看”。

　　

　　怎么样，就这么小的改动，让我们的界面是不是生辉不少，感觉更专业一点。我们接着把标题改为中文。

三、让GridView自定义表头

1、设计界面

　　（１）打开Hello项目，单击“启动页>最近使用的项目>Hello”。

　　（２）在“解决方案资源管理器”中添加“SqlGridViewTitle.aspx”页面。

　　（３）从工具箱中拖1个GridView到SqlGridViewTitle.aspx页面。

　　　　　　　　
　　　　　（GridView控件ID属性分别为：gvClient） 　　　　
　　　
　　　　　　　　 （单击“>”箭头按钮。）

　　
　　　　　　　　　　　　　(单击“自动套用格式”)　　　　
　　
　　　　　　　　　　　（选择：沙滩和天空样式）
　　　
　　　　　　　　　　　　（单击“编辑列”）

　　
　　　　　　　　　　　　　　（单击“编辑列”） 　　
　　依次添加多个BoundField列，HeaderText为表头显示文字，DataField为数据库Client表的列名，最后把“自动生成字段”前的复选框去掉。

２、添加代码

　　（１）双击页面上的“空白”部分。

　我们在Page_Load()中间输入：（代码同上）

//连接SQL SERVER
string ConnSqlServer = "Server=www.woshicainiao.net;Database=SuperMarket;User ID=sa;Pwd=xxx";
SqlConnection Conn = new SqlConnection(ConnSqlServer);

//打开
Conn.Open();

//通过SqlDataAdapter读取Client表中信息
string ClientSql = "SELECT * FROM Client";
SqlDataAdapter Adapter=new SqlDataAdapter(ClientSql,Conn);
DataSet Ds=new DataSet();
Adapter.Fill(Ds,"Client");

//设置gvClient的数据源与绑定
gvClient.DataSource = Ds.Tables["Client"];
gvClient.DataBind();

//关闭数据库
Conn.Close();

　　讲解：

　　由于代码和“一、初识GridView”完全相同，不再赘述。　　

　　（２）从“解决方案资源管理器”中，选择“SqlGridViewTitle.aspx”单击右键“在浏览器中查看”。

　

　　　有了这个基础，让我们一步一步走向更实用的编辑与删除。