步骤一:用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 >
<! 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 >
< 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 >
<! 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>