在vs2005中用gridview显示表中的image字段
目标：用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#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
string strEmployeeID = Request.QueryString["ID"];
if (strEmployeeID == null)
{
return;
}
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>
<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#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<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>
步骤一：用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#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> protected void Page_Load(object sender, EventArgs e) {
string strEmployeeID = Request.QueryString["ID"]; if (strEmployeeID == null) {
return; } 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><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#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"></script><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>
