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
