-
在
Gridview
中添加超链接列
进入
Gridvie
w
的【编辑列
…
】窗口进行编辑，如图
：
在【
可用字段】里选择
HyperLinkField
，单击【添加
】按钮。
然后选择在【选定的字段】中，选择刚添加的这个<
/p>
HyperLinkField
。
在右边按照图示进行设置：
外观
-Text
：设置链接的文字。
外观
-HeaderText
：设置链接列的标
题。
数据
-DataNavigat
eUrlFields
：设置超链接要传递的参数，
这里写的<
/p>
“
id,name
”
表示要传递
id
和
name
这两个字段的值，注意用逗号分隔，可以设置多个字段。
数
据
-DataNavigateUrlForm
atString
：
设
置
要
链
接
到
< br>的
页
面
和
传
递
的
参
数
。
?id=
{0}
&name=
{1}
表示要链接到
页面。这里的
{0}
表示在形成链接<
/p>
时
{0}
将会被
DataNavigateUrlFields
中设置的第一个参数实际的值替代，
在我们这里是
id
，
{1}
将会被
name
的实际值替代
。
最终形成的页面代码如下：
<
br>
<
br>DataNavigateUrlFields
】，添加一个 <
br>TemplateField Gridview <
br>Gridview <
br>，选择 <
br>里，设置这 /> <
br> />
<
br>DataNavigateUrlFields
<
br>.
cb.
<
br>=
ID
=
runat
=
AutoGenerateColumns
=
>
D
ataField
=
HeaderText
=
编码
/>
D
ataField
=
HeaderText
=
名称
/>
=
DataNavigateUrlFormatString
=
HeaderT
ext
=
操作
Text
=
修改
/>
后置代码如下：
using
System
;
using
;
using
uration
;
using
tions
;
using
;
using
ty
;
using
;
using
trols
;
using
ts
;
using
ntrols
;
using
ent
;
public
partial
class
_Default
:
System.
Web
.
UI
.
Page
{
protected
void
Page_Load(
object
sender,
EventArgs e)
{
SqlConnection
conn
=
new
SqlConnection(
Sou
rce=.;Initial
Catalog=demo;User ID=sa;P
assword=sa1
)
;
DataSet citySet
=
null
;
try
{
SqlDataAdapter
adapter
=
new
SqlDataAdapter(
*
from
city
,
conn)
;
citySet
=
new
DataSet()
;
adapter.
Fill
(citySet,
)
;
}
catch
(SqlException ex)
{
Consol
e.
WriteLine
(ex.
Me
ssage
)
;
}
finally
{
conn.
Close
()
;
}
cityList.
DataSource
=
citySet
;
DataBind()
;
}
}
这时，浏览页面看效果，如图：
如果把鼠标移动到超链接上，观察形成的链接，效果如图：
给
Gridview
添加复选框
点击
Gridv
iew
右上角的三角按钮，选择【编辑列
…
TemplateField
：
然后单击向上的按钮，将这个
移动到最上面：
这样，
我们就为
添加了一个
TemplateField
，
并且将这个
TemplateFie
ld
排到第一列。
下面对这个
TemplateField
添加标题和内容。在【
任务】中，选择【编辑模板】：
进入
模板编辑模式
Column[0]
下的
HeaderTemplate
：
拖一个
Checkbox
标签到
HeaderTemplate
里：
这样就设置了列标题中的复选框。
选择
Column[0]
下的
ItemTemplate
，然后拖一个
Che
ckBox
控件到
ItemTemplate
个控件的
id=”element”
：
形成的代码：
ID
=
runat
=
/>
打
开
源
代
码
视
图
，
修
改
里
的
复
选
框
的
id=”all”
，
添
加
单
击
事
件
onclick=
。
里复选框的代码是这
样的：
id
=
type
=
onclick
=
全选
完整的
Gridview
代码：
ID
=
runat
=
AutoGenerateColumns
=
>
id
=
type
=
onclick
=
全选
ID
=
runat
=
/>
D
ataField
=
HeaderText
=
编码
/>
D
ataField
=
HeaderText
=
名称
/>
=
DataNavigateUrlFormatString
=
HeaderText
=
操
作
Text
=
修改
/>
添
加
selectAll
脚本函数：
<
script
type
=
>
function
selectAll
(
cb
)
{
var
g1
=
document.
getEle
mentById
(
)
;
for
(
i
=
1
;
i
<
g1.
rows
length
;
i
++
)
{
g1.
rows
[
i
]
.
cells
[
0
]
.
getEl
ementsByTagName
(
)
[
0
]
.
ch
ecked
=
checked
;
}
}
sc
ript
>
运行页面后的效果：
当点击标题列中的复选框时，这一列的复选框都会被选择或者取消。
下面开始讲解：如何把在
Gridv
iew
中选择的一行信息传递到后置代码中。
在
Gridview
下添加一个
Button
和
Label
控件：<
/p>
给
Butt
on
添加
click
事件，页面代码：
ID
=
runat
=
Text
=
提
交
OnClick
/>
/>
ID
=
runat
=
Text
=
>
Button1_Click
方法：
protected
void
Button1_Click(
object
sender,
EventArgs e)
{
Label1.
Text
=
;
//
按行遍历
cityList
foreach
(GridViewRow gvr
in
cityList.
Rows
)
{
//
在每行中查
找
id
为
element
的控件，强制转换成
ChecBox
类型
CheckBox ch
=
(CheckBox)gvr.
F
indControl
(
)
;
/
/
检查
ch
，如果处于选择状态
if
(ch.
Checked
)
{
//
累
加
Label
的文本。
[1].Tex
t
表示得到第二个元素的文本
内容
Label1.
Text
+=
选择的
城市
id
为：
+
gvr.
Cells
[
1
].
Text
+
;
}
}
}
还要在
Page_Load
方法中添加一个
if
判断：
当页面第一次加载时才执行对
Grid
view
的数据绑
定，如果没有这个判断的话，每次都重新绑定
数据，原来的选择就失效了。
Page_Load
的代码：
protected
void
Page_Load(
object
sender,
EventArgs e)
{
//
第一次加载页面时
if
(
!
IsPostBack)
{
SqlConnection
conn
=
new
SqlConnection(
Sou
rce=.;Initial
Catalog=demo;User ID=sa;P
assword=sa1
)
;
DataSet citySet
=
null
;
try
{
SqlDataAdapter
adapter
=
new
SqlDataAdapter(
*
from
city
,
conn)
;
citySet
=
new
DataSet()
;
adapter.
Fill
(citySet,
)
;
}
catch
(SqlException ex)
{
Consol
e.
WriteLine
(ex.
Me
ssage
)
;
}
finally
{
conn.
Close
()
;
}
cityList.
DataSource
=
citySet
;
DataBind()
;
}
}
执行代码的效果：
在
Gridview
中显示图片
给
t1
表添加三条记录，
img
字段里存放的是图片的
路径：
INSERT
INTO
t1
(
img
)
VALUES
(
'./images/'
)
< br>
INSERT
INTO
t1
(
img
)
VALUES
(
'./images/'
)
< br>
INSERT
INTO
t1
(
img
)
VALUES
(
'./images/'
)
< br>
在项目的
images
目录下
应该已经有对应的图片存在了。
拖
一个
Gridview
到页面，给这个
Gridview
添加两列：第一列显示
id
< br>字段的值，第二列显示
图片：
图片列是通过
TemplateField
实现的。
页面代码：
<
br>
的属性，
<
br>在
<
br>事件，然后在
ID
=
runat
=
AutoGenerateColumns
=
>
D
ataField
=
HeaderText
=
/>
图片
ID
=
runat
=
ImageUrl
=
'<%#Eval
(
'/>
<
%#Eval(
表示输出当前行的
img
字段的值。
这个值赋给
ImageUrl
因为赋的
值是图片的路径，图片控件就能显示对应
的图片了。
后置
C#
代码：
using
System
;
using
;
using
uration
;
using
tions
;
using
;
using
ty
;
using
;
using
trols
;
using
ts
;
using
ntrols
;
using
ent
;
public
partial
class
Default02
:
System.
Web
.
UI
.
Page
{
protected
void
Page_Load(
object
sender,
EventArgs e)
{
if
(
!
IsPostBack)
{
SqlConnection conn
=
new
SqlConnection(
Source=.;Initi
al Catalog=demo;User ID=sa;Password=sa
)
;
DataSet citySet
=
null
;
try
{
SqlDataAdapter adapter
=
new
SqlDataAdapter(
from
t1
, conn)
;
citySet
=
new
DataSet()
;
adapter.
Fill
(citySet,
)
;
}
catch
(SqlException ex)
{
Console.
WriteLine
(ex.
Message
)
;
}
finally
{
conn.
Close
()
;
}
cityList.
DataSource
=
citySet
;
DataBind()
;
}
}
}
运行后的效果：
Gridview
中添加删除按钮
在
Gridview
中添加【删
除
CommandField
】：
添加完后打开源代码试图，看到在
<
Columns>
节点下多了
ShowDeleteButton
=
/>
这个控件会在
Gridvie
w
的每一行形成一个
[
删除
]
超链接。
单击这个超链接会触发
Gridview
的
删除事件
。
下面给
Gridview
添加
RowDeleting
事件：
OnRowDeleting=
。
RowDeleting
是由单击
[
删除
]
超链接时触发。
我们的思路是这样的：单击
[
删除
]
超链接，
Gr
idview
会触发
RowDeleting