资源描述
Gridview控件的使用.docx
《Gridview控件的使用.docx》由会员分享，可在线阅读，更多相关《Gridview控件的使用.docx（36页珍藏版）》请在冰豆网上搜索。
Gridview控件的使用
在Gridview中添加超链接列
进入Gridview的【编辑列…】窗口进行编辑，如图：
在【可用字段】里选择HyperLinkField，单击【添加】按钮。
然后选择在【选定的字段】中，选择刚添加的这个HyperLinkField。
在右边按照图示进行设置：
外观-Text：
设置链接的文字。
外观-HeaderText：
设置链接列的标题。
数据-DataNavigateUrlFields：
设置超链接要传递的参数，这里写的“id,name”表示要传递id和name这两个字段的值，注意用逗号分隔，可以设置多个字段。
数据-DataNavigateUrlFormatString：
设置要链接到的页面和传递的参数。
Default2.aspx?
id={0}&name={1}表示要链接到Default2.aspx页面。
这里的{0}表示在形成链接时{0}将会被DataNavigateUrlFields中设置的第一个参数实际的值替代，在我们这里是id，{1}将会被name的实际值替代。
最终形成的页面代码如下：
GridViewID="cityList"runat="server"AutoGenerateColumns="False">
BoundFieldDataField="id"HeaderText="编码"/>
BoundFieldDataField="name"HeaderText="名称"/>
HyperLinkFieldDataNavigateUrlFields="id,name"DataNavigateUrlFormatString="Default2.aspx?
id={0}&name={1}"HeaderText="操作"Text="修改"/>
GridView>
后置代码如下：
usingSystem;
usingSystem.Data;
usingSystem.Configuration;
usingSystem.Collections;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Web.UI.HtmlControls;
usingSystem.Data.SqlClient;
publicpartialclass_Default:
System.Web.UI.Page
{
protectedvoidPage_Load（objectsender,EventArgse）
{
SqlConnectionconn=newSqlConnection（"DataSource=.;InitialCatalog=demo;UserID=sa;Password=sa1"）;
DataSetcitySet=null;
try
{
SqlDataAdapteradapter=newSqlDataAdapter（"select*fromcity",conn）;
citySet=newDataSet（）;
adapter.Fill（citySet,"city"）;
}
catch（SqlExceptionex）
{
Console.WriteLine（ex.Message）;
}
finally
{
conn.Close（）;
}
cityList.DataSource=citySet;
DataBind（）;
}
}
这时，浏览页面看效果，如图：
如果把鼠标移动到超链接上，观察形成的链接，效果如图：
给Gridview添加复选框
点击Gridview右上角的三角按钮，选择【编辑列…】，添加一个TemplateField：
然后单击向上的按钮，将这个TemplateField移动到最上面：
这样，我们就为Gridview添加了一个TemplateField，并且将这个TemplateField排到第一列。
下面对这个TemplateField添加标题和内容。
在【Gridview任务】中，选择【编辑模板】：
进入模板编辑模式，选择Column[0]下的HeaderTemplate：
拖一个Checkbox标签到HeaderTemplate里：
这样就设置了列标题中的复选框。
选择Column[0]下的ItemTemplate，然后拖一个CheckBox控件到ItemTemplate里，设置这个控件的id=”element”：
形成的代码：
CheckBoxID="element"runat="server"/>
打开源代码视图，修改里的复选框的id=”all”，添加单击事件onclick="selectAll（this）"。
里复选框的代码是这样的：
全选
完整的Gridview代码：
GridViewID="cityList"runat="server"AutoGenerateColumns="False">
TemplateField>
全选
CheckBoxID="element"runat="server"/>
TemplateField>
BoundFieldDataField="id"HeaderText="编码"/>
BoundFieldDataField="name"HeaderText="名称"/>
HyperLinkFieldDataNavigateUrlFields="id,name"DataNavigateUrlFormatString="Default2.aspx?
id={0}&name={1}"
HeaderText="操作"Text="修改"/>
GridView>
添加selectAll脚本函数：
functionselectAll（cb）
{
varg1=document.getElementById（"cityList"）;
for（i=1;i{
g1.rows[i].cells[0].getElementsByTagName（"INPUT"）[0].checked=cb.checked;
}
}
运行页面后的效果：
当点击标题列中的复选框时，这一列的复选框都会被选择或者取消。
下面开始讲解：
如何把在Gridview中选择的一行信息传递到后置代码中。
在Gridview下添加一个Button和Label控件：
给Button添加click事件，页面代码：
ButtonID="Button1"runat="server"Text="提交"OnClick="Button1_Click"/>
LabelID="Label1"runat="server"Text="Label">
Label>
Button1_Click方法：
protectedvoidButton1_Click（objectsender,EventArgse）
{
Label1.Text="";
//按行遍历cityList
foreach（GridViewRowgvrincityList.Rows）
{
//在每行中查找id为element的控件，强制转换成ChecBox类型
CheckBoxch=（CheckBox）gvr.FindControl（"element"）;
//检查ch，如果处于选择状态
if（ch.Checked）
{
//累加Label的文本。
gvr.Cells[1].Text表示得到第二个元素的文本内容
Label1.Text+="选择的城市id为：
"+gvr.Cells[1].Text+"
";
}
}
}
还要在Page_Load方法中添加一个if判断：
当页面第一次加载时才执行对Gridview的数据绑定，如果没有这个判断的话，每次都重新绑定数据，原来的选择就失效了。
Page_Load的代码：
protectedvoidPage_Load（objectsender,EventArgse）
{
//第一次加载页面时
if（!
IsPostBack）
{
SqlConnectionconn=newSqlConnection（"DataSource=.;InitialCatalog=demo;UserID=sa;Password=sa1"）;
DataSetcitySet=null;
try
{
SqlDataAdapteradapter=newSqlDataAdapter（"select*fromcity",conn）;
citySet=newDataSet（）;
adapter.Fill（citySet,"city"）;
}
catch（SqlExceptionex）
{
Console.WriteLine（ex.Message）;
}
finally
{
conn.Close（）;
}
cityList.DataSource=citySet;
DataBind（）;
}
}
执行代码的效果：
在Gridview中显示图片
给t1表添加三条记录，img字段里存放的是图片的路径：
INSERTINTOt1（img）VALUES（'./images/1.jpg'）
INSERTINTOt1（img）VALUES（'./images/2.jpg'）
INSERTINTOt1（img）VALUES（'./images/3.jpg'）
在项目的images目录下应该已经有对应的图片存在了。
拖一个Gridview到页面，给这个Gridview添加两列：
第一列显示id字段的值，第二列显示图片：
图片列是通过TemplateField实现的。
页面代码：
GridViewID="cityList"runat="server"AutoGenerateColumns="False">
BoundFieldDataField="id"HeaderText="ID"/>
TemplateField>
图片
ImageID="img"runat="server"ImageUrl='<%#Eval（"img"）%>'/>
TemplateField>
GridView>
<%#Eval（"img"）%>表示输出当前行的img字段的值。
这个值赋给ImageUrl的属性，因为赋的值是图片的路径，图片控件就能显示对应的图片了。
后置C#代码：
usingSystem;
usingSystem.Data;
usingSystem.Configuration;
usingSystem.Collections;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Web.UI.HtmlControls;
usingSystem.Data.SqlClient;
publicpartialclassDefault02:
System.Web.UI.Page
{
protectedvoidPage_Load（objectsender,EventArgse）
{
if（!
IsPostBack）
{
SqlConnectionconn=newSqlConnection（"DataSource=.;InitialCatalog=demo;UserID=sa;Password=sa"）;
DataSetcitySet=null;
try
{
SqlDataAdapteradapter=newSqlDataAdapter（"select*fromt1",conn）;
citySet=newDataSet（）;
adapter.Fill（citySet,"city"）;
}
catch（SqlExceptionex）
{
Console.WriteLine（ex.Message）;
}
finally
{
conn.Close（）;
}
cityList.DataSource=citySet;
DataBind（）;
}
}
}
运行后的效果：
在Gridview中添加删除按钮
在Gridview中添加【删除CommandField】：
添加完后打开源代码试图，看到在节点下多了
CommandFieldShowDeleteButton="True"/>
这个控件会在Gridview的每一行形成一个[删除]超链接。
单击这个超链接会触发Gridview的删除事件。
下面给Gridview添加RowDeleting事件：
OnRowDeleting="cityList_RowDeleting"。
RowDeleting是由单击[删除]超链接时触发。
我们的思路是这样的：
单击[删除]超链接，Gridview会触发RowDeleting事件，然后在RowDeleting的后置代码中写删除的业务逻辑，将要删除的行删掉。
这就有个问题，我们删除一行肯定是根据这一行的主键进行删除，那如何将当前行的主键传递到cityList_RowDeleting方法中呢？
我们给Gridview添加DataKeyNames属性：
DataKeyNames="id"。
使用DataKeyNames属性指定表示数据源主键的字段，这里我们指定的字段是id。
当设置了DataKeyNames属性时，GridView控件用指定字段（id）的值填充它的DataKeys集合，这提供了一种访问每个行的主键的便捷方法。
aspx页面代码：
GridViewID="cityList"DataKeyNames="id"runat="server"AutoGenerateColumns="False"OnRowDeleting="cityList_RowDeleting">
BoundFieldDataField="id"HeaderText="id"/>
BoundFieldDataField="name"HeaderText="名称"/>
CommandFieldShowDeleteButton="True"/>
GridView>
用如下C#代码，在cityList_RowDeleting方法中得到DataKeyNames的id主键值。
stringid=cityList.DataKeys[e.RowIndex].Value.ToString（）;
C#后置代码：
usingSystem;
usingSystem.Data;
usingSystem.Configuration;
usingSystem.Collections;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Web.UI.HtmlControls;
usingSystem.Data.SqlClient;
publicpartialclassDefault04:
System.Web.UI.Page
{
protectedvoidPage_Load（objectsender,EventArgse）
{
if（!
IsPostBack）
{
GetAll（）;
}
}
protectedvoidcityList_RowDeleting（objectsender,GridViewDeleteEventArgse）
{
stringid=cityList.DataKeys[e.RowIndex].Value.ToString（）;
SqlConnectionconn=newSqlConnection（"DataSource=.;InitialCatalog=demo;UserID=sa;Password=sa"）;
DataSetcitySet=null;
try
{
conn.Open（）;
SqlCommandcmd=newSqlCommand（"deletefromcitywhereid='"+id+"'"）;
cmd.Connection=conn;
cmd.ExecuteNonQuery（）;
}
catch（SqlExceptionex）
{
Console.WriteLine（ex.Message）;
}
finally
{
conn.Close（）;
}
GetAll（）;
}
privatevoidGetAll（）
{
SqlConnectionconn=newSqlConnection（"DataSource=.;InitialCatalog=demo;UserID=sa;Password=sa"）;
DataSetcitySet=null;
try
{
SqlDataAdapteradapter=newSqlDataAdapter（"select*fromcity",conn）;
citySet=newDataSet（）;
adapter.Fill（citySet,"city"）;
}
catch（SqlExceptionex）
{
Console.WriteLine（ex.Message）;
}
finally
{
conn.Close（）;
}
cityList.DataSource=citySet;
DataBind（）;
}
}
运行aspx页面后的效果：
这样就实现了点击[删除]链接后，删掉一条记录。
删除通常是要谨慎的，最好先让操作者再确认下，然后再进行删除，以避免误操作。
如何在Gridview删除前加上个确认对话框呢？
选择【删除CommandField】，点击右下角的【将此字段转换为TemplateField】链接，然后点【确定】按钮：
切换到源代码视图，发现原来的
CommandFieldShowDeleteButton="True"/>
现在变成了
TemplateFieldShowHeader="False">
LinkButtonID="LinkButton1"runat="server"CausesValidation="False"CommandName="Delete"Text="删除">
LinkButton>
TemplateField>
然后在LinkButton>中添加提示脚本：
OnClientClick="returnconfirm（'确认要删除吗？
'）;"
这时的Gridview控件代码：
GridViewID="cityList"DataKeyNames="id"runat="server"AutoGenerateColumns="False"OnRowDeleting="cityList_RowDeleting">
BoundFieldDataField="id"HeaderText="id"/>
BoundFieldDataField="name"HeaderText="名称"/>
TemplateFieldShowHeader="False">
LinkButtonID="LinkButton1"runat="server"CausesValidation="False"CommandName="Delete"Text="删除"OnClientClick="returnconfirm（'确认要删除吗？
'）;">
LinkButton>
TemplateField>
GridView>
这样在单击【删除】链接
升级会员 