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

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="" >
    <head runat="server">
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <form id="form1" runat="server">
        <div class="header">
            <h1>Scott's Photo Sample</h1>
        <div class="tagcloud">
            <div class="subheader">
                <h2>Filter Tags</h2>
            <vrk:Cloud ID="Cloud1" runat="server" 
                       DataTitleFormatString="{0} photos" 
                       DataWeightField="Weight" >
        <asp:contentplaceholder id="MainContent" runat="server">

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()
  protected void Page_Load(object sender, EventArgs e)

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
Title: Dear   
Name: Bilal khan
Date: 2012-08-07 1:13:37 PM
Plz send this article to my email address

thanks in advance
Title: th   
Name: Janaa
Date: 2009-09-28 9:09:50 AM
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  |  Page Processed at 2024-06-23 7:44:38 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search