Building a Photo Tagging Application using ASP.NET 2.0, LINQ, and Atlas
page 6 of 9
by Scott Guthrie
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 38956/ 68

Step 5: Browsing Photos By Tag

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


View Entire Article

User Comments

Title: dfds   
Name: vvxc
Date: 2012-11-02 8:00:17 AM
Comment:
vxcv
Title: Dear   
Name: Bilal khan
Date: 2012-08-07 1:13:37 PM
Comment:
Plz send this article to my email address


iam.bilal@yahoo.com

thanks in advance
Title: th   
Name: Janaa
Date: 2009-09-28 9:09:50 AM
Comment:
Thats seems to be very useful. I will try to use it on my site thx.






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-03-29 5:10:04 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search