Yes, I know the title is a mouthful, but its all the cool stuff I used to make this trick work. I have mentioned before that I have been using the Spark View Engine with ASP.Net MVC just because I think it is much cleaner markup when it comes to intermingling HTML with C#. I also mentioned that I have been working on my blog app and like my own home blog page, I want to have a blog roll. So what I did was create a table with two records containing information about my two favorite blogs.
Now what I want to do is on the Master Page that I am using is have to these two links display on the page asynchronously after the base HTML loads.
The Spark Master Page and Partial Rendering
There is pretty good documentation for Spark for getting started, so I won’t go into detail about it here; but there are a few things I wanted to mention. The default way to use a Master Page in the Spark View Engine is to create a folder named “Layouts” inside the “View” folder and then to add a file named “Application.spark” in that folder. This is the convention that will allow all other views to access that Master Page unless otherwise specified.
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
2: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
3: <head>
4: <title>${H(Title)}</title>
5: <link rel="stylesheet" href="~/Content/Site.css" type="text/css" />
6: <use content="head"/>
7: <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min-vsdoc.js" type="text/javascript"></script>
8: <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
9: <script src="/Scripts/pure.js" type="text/javascript"></script>
10: </head>
11: <body>
12: <div id="wrapper">
13: <div id="header">
14: <div id="logo">
15: <h1>Website Logo Goes Here</h1>
16: </div>
17: <div id="search">
18: Search goes here
19: </div>
20: </div>
21: <div id="header_menu">
22: <ul id="menu">
23: <li>
24: <a title="" accesskey="1" href="#">Home</a>
25: </li>
26: <li>
27: <span>|</span>
28: </li>
29: <li>
30: <a title="" accesskey="2" href="#">Blog</a>
31: </li>
32: <li>
33: <span>|</span>
34: </li>
35: <li>
36: <a title="" accesskey="3" href="#">About Me</a>
37: </li>
38: <li>
39: <span>|</span>
40: </li>
41: <li>
42: <a title="" accesskey="4" href="#">Contact</a>
43: </li>
44: </ul>
45: <div id="menu_spacer">
46: </div>
47: </div>
48: <div id="content">
49: <div id="colOne">
50: <div class="box">
51:
52: <myLinks />
53: </div>
54: </div>
55: <div id="colTwo">
56: <use content="view"/>
57: </div>
58: </div>
59:
60:
61: </body>
62: </html>
Some things to notice on the master page here, is that I am accessing jQuery, and PURE. Of course, jQuery is the JavaScript framework that makes almost everything JavaScript related really easy. The other script tag for PURE is also a JavaScript framework but it is mainly to make the mapping of markup to your JSON response much easier. We use it a lot where I work, so I have become a big fan of it. I will demonstrate that later.
Also another thing to notice in this code is the tag <myLinks />. This is how Spark does partial HTML rendering. The convention for partial rendering in Spark is to create a file in the “Views/Shared” folder that is prefixed with “_” and has the extension “spark” like all the other views. So for my example above, I have a file located at “<project_location>/View/Shared/_myLinks.spark”.
The Controller Class
Nothing special here. I have a controller class that returns a JSON response. The only thing I should mention though is in order for PURE to work with a list of records you will need to rap your List object in another object. Also, as mentioned in a previous post, I need to return a JsonResult to get the properly formatted response. Since these links won’t change much (I am not that fickle) I am caching this action using the OutputCache attribute.
1: using System.Collections.Generic;
2: using System.Web.Mvc;
3: using Aviblog.Core.Dto;
4: using Aviblog.Core.Services;
5:
6: namespace Aviblog.Web.Controllers
7: {
8: public class LinksController : Controller
9: {
10: private readonly ILinksService _linksService;
11:
12: public LinksController(ILinksService linksService)
13: {
14: _linksService = linksService;
15: }
16:
17: [AcceptVerbs(HttpVerbs.Get)]
18: [OutputCache(Duration = 60, VaryByParam = "None")]
19: public JsonResult All()
20: {
21: Links links;
22: IList<LinkDto> result = _linksService.GetActiveLinks();
23: links = result != null ? new Links() {LinkList = result} : null;
24: return Json(links);
25: }
26: }
27: }
My Links class looks like this:
1: using System.Collections.Generic;
2:
3: namespace Aviblog.Core.Dto
4: {
5: public class Links
6: {
7: public IList<LinkDto> LinkList { get; set; }
8: }
9: }
This will generate a JSON response as follows:
{"LinkList":
[{"LinkId":1,"Title":"Scott Gunthie","Description":"Scott Gunthrie\u0027s Blog","BlogUri":http://weblogs.asp.net/scuttgu/,
"FeedUri":null,"IsActive":true},{"LinkId":2,"Title":"Scott Hanselman",
"Description":"Scott Hanselman\u0027s Blog","BlogUri":"http://www.hansleman.com/","FeedUri":null,"IsActive":true}]}
Notice, that I now have my wrapper class called LinkList that I can use to tell PURE that this is my collection.
The Partial HTML that Loads the Links
So in my _myLinks.spark file I have the JavaScript that is going to make an AJAX call to get the links, and the PURE code that will map the response back to the unordered list.
1: <script type="text/javascript"> 1:
2: $(document).ready(function() { 3: $.ajax({ 4: type: "GET",
5: url: "/Links/All",
6: dataType: "json",
7: success: function(res) { 8: var $blogRollList = $("ul#blogRollList"); 9:
10: var directive = { 11: 'li':{ 12: 'link<-LinkList':{ 13: 'a':'link.Title',
14: 'a@href':'link.BlogUri'
15: }
16: }
17: };
18:
19: $blogRollList.render(res, directive);
20:
21: }
22: });
23: });
</script>
2:
3:
4: <h3>Bloggroll</h3>
5: <div id="blogRoll">
6: <ul id="blogRollList">
7: <li><a></a></li>
8: </ul>
9: </div>
I am using the $.Ajax function to make a call out to my controller class “LinksController” and the action “All”. If the code returns a successful response, the PURE code maps the response to the list.
The $blogRollList variable is the ul tag that I want my response to be loaded into.
The directive variable is how I tell PURE to map my response. It is saying for each item in the response, create a list tag. The “link<-LinkList” is saying for the collection LinkList there will be items named “link”. Inside that declaration I am then using each “link” item that was defined and them mapping it to an anchor tag.
The Result
So now when the page loads I get the result:
