在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">

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>

<title>Untitled Page</title>

</head>

<body>

<div>

</div>

</form>

</body>

</html>

步骤四：修改步骤二中(在文件default.aspx中)所设定的模板列, 代码如下：

<asp:TemplateField HeaderText="Picture">

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

</EditItemTemplate>

<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>

<title>Untitled Page</title>

</head>

<body>

<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">

<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">

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

</EditItemTemplate>

<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>