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

Step 4: Adding "Tag Cloud" UI to our Application

After defining the database and creating the LINQ-enabled object-model above, I focused on the UI of the site.

To maintain a consistent layout and look and feel across the site, I first created an ASP.NET master page that I called “Site.Master”.  Within this file I defined the basic layout structure that I wanted all pages to have, and used an external stylesheet to define CSS rules.

I then downloaded and added into my project a cool, free “Cloud Control” that Rama Krishna Vavilala built and published (with full source-code) in a nice article here.  It encapsulates all of the functionality needed to render a list of weighted cloud tags within an ASP.NET page.  It also supports standard ASP.NET databinding – which means I can easily bind a result from a LINQ query to it to output the correct weighted tags for our application.

My final Site.Master template to accomplish this ended up looking like this:

Listing 7

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Site" %>
<%@ Register Namespace="VRK.Controls" TagPrefix="vrk" Assembly="VRK.Controls" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
    <form id="form1" runat="server">
 
        <div class="header">
            <h1>Scott's Photo Sample</h1>
        </div>
        
        <div class="tagcloud">
 
            <div class="subheader">
                <h2>Filter Tags</h2>
            </div>
        
            <vrk:Cloud ID="Cloud1" runat="server" 
                       DataTextField="Name" 
                       DataTitleField="Weight" 
                       DataHRefField="Name" 
                       DataHrefFormatString="PhotoListing.aspx?tag={0}"
                       DataTitleFormatString="{0} photos" 
                       DataWeightField="Weight" >
 
            </vrk:Cloud>
                
        </div>
 
        <asp:contentplaceholder id="MainContent" runat="server">
        </asp:contentplaceholder>
    </form>
</body>
</html>

The below Site.Master code-behind file is then used to obtain a unique list of tags from the database (it uses the “data-projection” feature of LINQ to fetch a sequence of custom shaped types containing the Tag name and usage count).  It then databinds this sequence to Rama’s control above like so:

Listing 8

using System;
using System.Query;
using PhotoAlbum;
 
public partial class Site: System.Web.UI.MasterPage
{
 
  void PopulateTagCloud()
  {
 
    PhotoDB photoDb = new PhotoDB();
 
    Cloud1.DataSource = from tag in photoDb.Tags group tag by tag.Name into g
      orderby g.Key select new
    {
      Name = g.Key, Weight = g.Count()
    };
 
    Cloud1.DataBind();
  }
 
  protected void Page_Load(object sender, EventArgs e)
  {
    PopulateTagCloud();
  }
}

And now if I create an empty page based on the Site.Master above and hit it, I’ll automatically have the weighted tag-cloud added to the left-hand side of it:

Figure 6


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-2019 ASPAlliance.com  |  Page Processed at 2019-09-15 10:31:32 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search