The next page I added to the site was one
named “PhotoListing.aspx”. The tag-cloud control used above creates a
hyperlink for each tag that links to this page and passes the tag name as an
argument to it when you click a tag.
The PhotoListing.aspx page I created is based
on the Site.Master template above and uses a templated DataList control to
output the pictures in a two-column layout:
Listing 9
<asp:Content ID="C1" ContentPlaceHolderID="MainContent" Runat="server">
<div class="photolisting">
<asp:DataList ID="PhotoList" RepeatColumns="2" runat="server">
<ItemTemplate>
<div class="photo">
<div class="photoframe">
<a href='PhotoDetail.aspx?photoid=<%# Eval("PhotoId") %>'>
<img src='<%# Eval("Thumbnail") %>' />
</a>
</div>
<span class="description">
<%# Eval("Description") %>
</span>
</div>
</ItemTemplate>
</asp:DataList>
</div>
</asp:Content>Below is the entire code-behind for the page:
Listing 10
using System;
using System.Query;
using PhotoAlbum;
public partial class PhotoListing: System.Web.UI.Page
{
void PopulatePhotoList(string tagName)
{
PhotoDB photoDb = new PhotoDB();
if (tagName == null)
{
PhotoList.DataSource = photoDb.Photos;
}
else
{
PhotoList.DataSource = from photo in photoDb.Photos where photo.Tags.Any
(t = > t.Name == tagName)select photo;
}
PhotoList.DataBind();
}
protected void Page_Load(object sender, EventArgs e)
{
PopulatePhotoList(Request.QueryString["tag"]);
}
}When a user clicks on the “Cats” tag in the
tag-cloud, they’ll then see this list of photos rendered:
Figure 7
