要想在WebForm显示一组图像的缩略图,则需要一些技巧。即用DataList来完成。
首先,要定义主页面,大致如下:
<asp:datalist id="Movies" runat="server" Width="600px" RepeatColumns="3" RepeatDirection="Horizontal">
<ItemTemplate>
<table style="FONT-SIZE: 10pt">
<tr>
<td align="center" width="170">
<A href='ShowDetail.aspx?id=<%# DataBinder.Eval(Container.DataItem,"ID")%>' target=_blank>
<IMG height=236 width=170 src='ShowImage.aspx?id=<%# DataBinder.Eval(Container.DataItem,"ID") %>'>
</A>
</td>
</tr>
<tr align="center" runat="server">
<td width="170" align="center">
<font color="blue"><a href='ShowDetail.aspx?id=<%# DataBinder.Eval(Container.DataItem,"ID")%>' target=_blank>
<%# DataBinder.Eval(Container.DataItem,"MovieName")%>
</a></font>
</td>
</tr>
</table>
</ItemTemplate>
</asp:datalist>
接着要在主页面程序中进行数据绑定,如下:
public void ListBind()
{
this.Movies.DataSource = CreateSource();
this.Movies.DataBind();
lbnNextPage.Enabled = true;
lbnPrevPage.Enabled = true;
if( CurrentPage == PageCount || PageCount == 1)
lbnNextPage.Enabled = false;
if( CurrentPage==1 || PageCount==1 )
lbnPrevPage.Enabled = false;
}
ICollection CreateSource()
{
int StartIndex;
StartIndex = (CurrentPage-1)*PageSize;
ArrayList temp = new ArrayList();
if(CurrentPage != PageCount)
{
temp = GenreMovies.GetRange(StartIndex,PageSize);
}
else
{
temp = GenreMovies.GetRange(StartIndex,GenreMovies.Count-(PageCount-1)*PageSize);
}
DataTable dt = new DataTable();
DataRow dr;
dt.Columns.Add(new DataColumn("ID", typeof(Int32)));
dt.Columns.Add(new DataColumn("MovieName", typeof(string)));
for (int i = 0; i < temp.Count; i++)
{
dr = dt.NewRow();
dr[0] = ( (MovieInfo)temp[i]).MovieID;
dr[1] = ((MovieInfo)temp[i]).MovieName;
dt.Rows.Add(dr);
}
return dt.DefaultView;
}
然后要增加一个页面,来根据传入的ID值返回图像流,我这里叫“'ShowImage.aspx”,程序代码如下:
private void Page_Load(object sender, System.EventArgs e)
{
try
{
string id = Request.QueryString["id"];
int ID = Int32.Parse(id);
byte[] imagebyte = //Get image data by image’s ID
Response.ContentType = "image/gif";
Response.BinaryWrite( imagebyte );
}
catch(Exception Error)
{
Response.Write(Error.Message);
}
}
这样就可以在页面上显示一组缩略图了。