目标:用gridview显示northwind中employee表的photo字段
步骤一:用SqlDataSource连接到northwind并获取employee表,我这里选取了:EmployeeID, LastName, FirstName, Country, Photo这几个字段。完成后如果:
步骤二:从“GridView Tasks”上选择"Edit Columns", 弹出Fields对话框。在“Availabe fields”里选ImageField之后,点击“Add”按钮,在ImageField Properties中的HeadText填入"Picture", 然后点击“Convert this field into a TemplateField”链接,最后点击 OK 按钮。
步骤三:新增一个名为GetEmployeeImage.aspx的页面,在Page_Load里写上一段代码。我写好的代码如下:
<%
@ Page Language
=
"
C#
"
%>
![None.gif](/Images/OutliningIndicators/None.gif)
<!
DOCTYPE html PUBLIC
"
-//W3C//DTD XHTML 1.0 Transitional//EN
"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
"
>
![None.gif](/Images/OutliningIndicators/None.gif)
<
script runat
=
"
server
"
>
![None.gif](/Images/OutliningIndicators/None.gif)
protected void Page_Load(object sender, EventArgs e)
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
string strEmployeeID = Request.QueryString["ID"];
if (strEmployeeID == null)
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
return;
}
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
SqlConnection con = new SqlConnection(WebConfigurationManager.ConnectionStrings["Northwind"].ConnectionString);
SqlCommand cmd = new SqlCommand("select Photo from Employees where EmployeeID=" + strEmployeeID, con);
con.Open();
byte[] buffer = (byte[])cmd.ExecuteScalar();
con.Close();
Response.BinaryWrite(buffer);
Response.End();
}
</
script
>
![None.gif](/Images/OutliningIndicators/None.gif)
<
html xmlns
=
"
http://www.w3.org/1999/xhtml
"
>
<
head runat
=
"
server
"
>
<
title
>
Untitled Page
</
title
>
</
head
>
<
body
>
<
form id
=
"
form1
"
runat
=
"
server
"
>
<
div
>
</
div
>
</
form
>
</
body
>
</
html
>
步骤四:修改步骤二中(在文件default.aspx中)所设定的模板列, 代码如下:
<
asp:TemplateField HeaderText
=
"
Picture
"
>
<
EditItemTemplate
>
<
asp:TextBox ID
=
"
TextBox1
"
runat
=
"
server
"
></
asp:TextBox
>
</
EditItemTemplate
>
<
ItemTemplate
>
<asp:Image ID="Image1" runat="server" ImageUrl='<%# "GetEmployeeImage.aspx?ID=" + Eval("EmployeeID") %>'/>
</
ItemTemplate
>
</
asp:TemplateField
>
最终default.aspx的代码如下:
<%
@ Page Language
=
"
C#
"
%>
![None.gif](/Images/OutliningIndicators/None.gif)
<!
DOCTYPE html PUBLIC
"
-//W3C//DTD XHTML 1.0 Transitional//EN
"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
"
>
![None.gif](/Images/OutliningIndicators/None.gif)
<
script runat
=
"
server
"
>
![None.gif](/Images/OutliningIndicators/None.gif)
</
script
>
![None.gif](/Images/OutliningIndicators/None.gif)
<
html xmlns
=
"
http://www.w3.org/1999/xhtml
"
>
<
head runat
=
"
server
"
>
<
title
>
Untitled Page
</
title
>
</
head
>
<
body
>
<
form id
=
"
form1
"
runat
=
"
server
"
>
<
div
>
<
asp:SqlDataSource ID
=
"
employeeDataSource
"
runat
=
"
server
"
ConnectionString
=
"
<%$ ConnectionStrings:Northwind %>
"
SelectCommand
=
"
SELECT [EmployeeID], [LastName], [FirstName], [Photo], [Country] FROM [Employees]
"
>
</
asp:SqlDataSource
>
</
div
>
<
asp:GridView ID
=
"
GridView1
"
runat
=
"
server
"
AutoGenerateColumns
=
"
False
"
DataKeyNames
=
"
EmployeeID
"
DataSourceID
=
"
employeeDataSource
"
Height
=
"
172px
"
Width
=
"
335px
"
>
<
Columns
>
<
asp:BoundField DataField
=
"
EmployeeID
"
HeaderText
=
"
EmployeeID
"
InsertVisible
=
"
False
"
ReadOnly
=
"
True
"
SortExpression
=
"
EmployeeID
"
/>
<
asp:BoundField DataField
=
"
LastName
"
HeaderText
=
"
LastName
"
SortExpression
=
"
LastName
"
/>
<
asp:BoundField DataField
=
"
FirstName
"
HeaderText
=
"
FirstName
"
SortExpression
=
"
FirstName
"
/>
<
asp:BoundField DataField
=
"
Country
"
HeaderText
=
"
Country
"
SortExpression
=
"
Country
"
/>
<
asp:TemplateField HeaderText
=
"
Picture
"
>
<
EditItemTemplate
>
<
asp:TextBox ID
=
"
TextBox1
"
runat
=
"
server
"
></
asp:TextBox
>
</
EditItemTemplate
>
<
ItemTemplate
>
<
asp:Image ID
=
"
Image1
"
runat
=
"
server
"
ImageUrl
=
'
<%# "GetEmployeeImage.aspx?ID=" + Eval("EmployeeID") %>
'
/>
</
ItemTemplate
>
</
asp:TemplateField
>
</
Columns
>
</
asp:GridView
>
</
form
>
</
body
>
</
html
>
步骤五:将default.aspx设为启动页之后运行,在浏览器中查看结果如下:
附:
web.config中所做的修改:
1.
<connectionStrings>
<add name="Northwind" connectionString="Data Source=cc;Initial Catalog=Northwind;Integrated Security=True" providerName="System.Data.SqlClient"/>
</connectionStrings>
2.
<pages>
<namespaces>
<add namespace="System.Data.SqlClient"/>
<add namespace="System.Web.Configuration"/>
</namespaces>
</pages>