实验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中定义，也可以定义在页面<style>中
<style type="text/css">
.text
{
text-decoration:none;
}
</style>
然后在编辑列中设置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) //当图片发生改变的时候，修改当前的图片的值
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();
}。