实验07 GridView控件的简单应用

实验07 GridView控件的简单应用

一、实验目的

（1）掌握VS2008中管理数据库的方法

（2）熟悉掌握GridView控件的应用

（3）了解页面的详细处理流程

二、实验内容

1.动态新闻的实现

2. 将表中字段绑定到GridView中的两种方法

3. GridView与Excel数据的导入和导出

动态新闻的实现，实现方法有两种，一种是使用GridView控件，一种是使用BulletedList 控件生成，具体实现方法如下：

与数据库连接，从新闻表中查询数据并绑定到相应控件可以由代码实现，也可以通过数据源控件SqlDataSource控件实现。

（1）GridView控件

①通过数据源控件

添加GridView控件。

添加SqlDataSource控件，并配置数据源，智能标记的配置数据源，根据向导一步一步配置即可。配置时要把连接字符串写入Web.config文件，这样当连接字符串发生改变时只需要修改Web.config中的配置即可，不用一个一个修改数据源控件的连接。

GridView控件绑定数据源SqlDataSource控件，通过该控件智能标记的选择数据源选择。

编辑列。智能标记，单击“编辑列”命令，打开编辑列对话框，如下图所示：

在该对话框中删除不需要的列，添加一个ImageField列，并把该列转换为TemplateField （选定该列后单击上图确定按钮上方的超链接按钮即可），添加一个HyperLinkField列，并如上图设置相关属性（所有新闻都在newsshow.aspx页面中显示），修改添加时间字段属性

如下（按指定的格式显示）DataFormatString：{0:yyyy:MM:dd}

编辑模板。GridView控件智能标记，单击“编辑模板”命令，在编辑模板状态设置图片大小并设置ImageUrl属性。单击智能标记，执行“结束模板编辑”命令。

设置GridView控件的Font属性和ShowHeader属性为false。

在浏览器当中查看，效果如下图所示：

去掉上面超链接列中的下划线：

//定义样式，可以在CSS中定义，也可以定义在页面

然后在编辑列中设置HyperLinkField的ControlStyle样式，把其中的cssclass属性写上text 就行了

（2）BulletedList控件

添加BulletedList控件并绑定数据源控件，其中显示数据字段和选择数据字段设置如下图所示。

设置相关属性如下：

改变默认链接，代码如下：

protected void BulletedList1_DataBound(object sender, EventArgs e)

{

for (int i = 0; i < BulletedList1.Items.Count; i++)

{

BulletedList1.Items[i].Value = "newsshow.aspx?id=" + Server.UrlEncode(BulletedList1.Items[i].Value);

}

}

运行后效果如下：

（3）news.aspx页面

该页面根据传入的新闻id号来显示不同新闻内容，如下图所示：

该页面需要根据id号查询News表，可以通过纯代码查询，也可以通过数据源控件，纯代码查询和上面查询类似，数据源控件实现方法如下：

添加两个Label控件并设置相关属性（如字体大小颜色等），添加SqlDataSource数据源控件并配置查询条件，可以配置时单击“where”按钮进行配置，也可以完成后配置该控件的SelectQuery属性进行设置，修改该控件的DataSourceMode属性为DataReader。

新闻显示页码的代码为

protected void Page_Load(object sender, EventArgs e)

{

//DataView dv = (DataView)SqlDataSource1.Select(new DataSourceSelectArguments());

//DataTable dt = dv.Table;

//Label1.Text = dt.Rows[0]["Title"].ToString();

//Label2.Text = dt.Rows[0]["Content1"].ToString();

SqlConnection conn = DataConn.CreateConn();

conn.Open();

string cmdtext = "select * from t_news where Id=@Id";

SqlParameter p=new SqlParameter("@Id", int.Parse ( Request.QueryString ["Id"].ToString ()));

SqlDataReader dr = DataConn.ExecuterRead(cmdtext, conn, p); ;

if (dr.Read())

{

Label1.Text = dr["Title"].ToString();

Label2.Text = dr["Content1"].ToString();

}

conn.Close();

}

}

2.将表中字段绑定到GridView中的两种方法

（表中图片字段的数据类型应该为VarChar(80)，保存的是图片在服务器上的路径），将需要显示的图像复制到网站的某个目录之下，注意图像在网站中的路径需要与表格中的位置相符合。

方法1.右击GridView选择的“编辑列”弹出“字段”对话框如下图，在可用字段中选择ImageField然后单击“添加”，在“选定的字段”中选择刚添加的ImageField字段，然后在“ImageField”中更改HeadText标题为“照片”，并将DataImageUrlField属性与数据表字段

中的Image字段绑定，同时将AlternateText属性设置为暂缺照片。

方法2：

（1）首先将表中的在上图中BindField照片字段转换为TemplateField

（2）选择编辑模板，然后选择编辑照片字段，如下图，并在EditItemTemplate中添加一个FileUpLoad控件FileUpLoad1和一个Button控件上传图片，然后在Button控件上传图片的Click事件代码中书写如下代码：

protected void上传图片_Click(object sender, EventArgs e)

{

FileUpload fu = (sender as Button).NamingContainer.FindControl("FileUpload1") as FileUpload; //找到Fileupload控件

ViewState["path"] = fu.FileName;

fu.SaveAs (Server.MapPath ("~/prod_images/"+ViewState ["path"].ToString () ));

//上传图片到对应的文件夹中

}

并在SqlDataSource控件的Updating事件中添加如下代码

protected void SqlDataSource1_Updating(object sender, SqlDataSourceCommandEventArgs e)

{

if(ViewState ["path"]!=null) //当图片发生改变的时候，修改当前的图片的值

https://www.360docs.net/doc/6d7678586.html,mand.Parameters["@Image"].Value = "~/prod_images/" +

ViewState["path"].ToString();

}

若已设置AlternatingItemTemplate，则GridView中的奇数数据行以ItemTemplate显示，偶数数据行以AlternatingItemTemplate显示。

数据绑定方法

需要包含在<%#......%>中。

Eval(“字段名”)：用于单向（只读）绑定。

Bind(“字段名”)：用于双向（可更新）绑定。

表的主键不能被编辑，GridView的属性DataKeyNames包含了表的主键信息

编写Page_Load事件，实现新闻绑定：

protected void Page_Load(object sender, EventArgs e)

{

DataView dv = (DataView )SqlDataSource1.Select(new DataSourceSelectArguments());

DataTable dt = dv.ToTable();

Labelsubject.Text = dt.Rows [0]["主题"].ToString();

Labelcontent.Text = dt.Rows[0]["内容"].ToString();

}