NETTUTS had a great tutorial by Dan Wellman called "
Building a jQuery-Powered Tag-Cloud" The problem for me was that the tutorial showed you how to connect to the database and pull tags and frequencies via PHP.
Because I am currently learning ASP.NET MVC I thought I would try to
duplicate the results of the tutorial but with using ASP.NET MVC RC
instread of PHP. Here is how I did it.
I started by creating a Home Controller class.
HomeController.cs
1: using System;
2: using System.Collections.Generic;
3: using System.Linq;
4: using System.Web;
5: using System.Web.Mvc;
6: using System.Web.Mvc.Ajax;
7:
8: namespace MvcApplication5.Controllers
9: {
10: public class HomeController : Controller
11: {
12: //
13: // GET: /Home/
14: public ActionResult TagCloud()
15: {
16: return View();
17: }
18:
19: public JsonResult JSON()
20: {
21: List<object> tagcloud = new List<object>
22: {
23: new { tag = "jQuery", freq = "10" },
24: new { tag = "asp.net", freq = "3"},
25: new { tag = "programming", freq = "183"},
26: new { tag = "code", freq = "34" },
27: new { tag = "HTML", freq = "58"},
28: new { tag = "javascript", freq = "23"},
29: new { tag = "people", freq = "43" },
30: new { tag = "Google", freq = "3"},
31: new { tag = "Microsoft", freq = "1"},
32: new { tag = "Apple", freq = "10" },
33: new { tag = "iPhone", freq = "38"},
34: new { tag = "MVC", freq = "1"}
35: };
36: return Json(tagcloud);
37: }
38:
39: }
40: }
What's happening here is that we are making a action for the View we
will create and I am calling it TagCloud. This action isn't going to
provide us any data so it's a stub action. The next Action we create
is to provide TagCloud the JSON data. In here I am creating a static
List to send back serialized as JSON. You could also tie it to a model
and use Linq to SQL to build the List.
Our URL for the .getJSON method will be: /Home/JSON
This will return JSON data that looks like this:
Notice the difference in the JSON I am bringing back and the one
Dan was bringing back. I don't have a tags: with the rest of the data
nested under it. We'll need to update a line in the jQuery to make
this work now.
Let's create the View for TagCloud.
TagCloud.aspx
1: <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
2:
3: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
4: <html>
5: <head>
6: <link rel="stylesheet" type="text/css" href="/content/tagcloud.css" />
7: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
8: <title>jQuery Tag Cloud</title>
9: </head>
10: <body>
11: <div id="tagCloud">
12: <h2>Tag Cloud</h2>
13: </div>
14: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
15: <script type="text/javascript">
16: $(function() {
17: //get tag feed
18: $.getJSON("/Home/JSON",null, function(data) {
19: //create list for tag links
20: $("<ul>").attr("id", "tagList").appendTo("#tagCloud");
21:
22: //create tags
23: $.each(data, function(i, val) {
24:
25: //create item
26: var li = $("<li>");
27:
28: //create link
29: $("<a>").text(val.tag).attr({ title: "See all pages tagged with " + val.tag, href: "http://localhost/tags/" + val.tag + ".html" }).appendTo(li);
30:
31: //add to list
32: li.appendTo("#tagList");
33: //set tag size
34: li.children().css("fontSize", (val.freq / 10 < 1) ? val.freq / 10 + 1 + "em" : (val.freq / 10 > 2) ? "2em" : val.freq / 10 + "em");
35:
36: });
37: });
38: });
39: </script>
40: </body>
41: </html>
As we start to loop through the JSON data Dan was telling jQuery
to start inside tags with data.tags, since we don't have tags we can
just use the variable data like so: $.each(data, function(i, val) {
The rest of setting this up is the same as NETTUTS article. All that remains is the css.
Download the SourcejQuery-TagCloud_source.zip (44.82 KB)