ASP.NET MVC SiteMap
Note: This code does not support caching or security trimming. It is simply a way to build something that compares to the .NET TreeView control using the MVC pattern.
Recently one of my clients had the "perfect storm" of requirements, restrictions, deadlines and policies that lead to the need to develop a MVC TreeView(ish) control.
Requirements:
- Database storage - Site administrations needed a simple interface into editing and I was not about to write something to update XML files.
- NOT use the SQL Service Broker for easy SQL caching support - Security concerns….I assume…I was never told why NOT but just NO.
- Support the MVC pattern - new projects where being developed using ASP.NET MVC
- Easy to implement and maintain
Design:
- With MS shipping jQuery it would be nice to use a jQuery plugin to render the tree
- Leverage existing technology - Exising project are using the SQL SiteMap Provider, hence, accompanying tables and stored procedures.
- Extend the ASP.NET MVC HtmlHelpers class
Note: I assume your application is currently setup to use the SQL SiteMap Provider…or at least the Table for the provider exists.
Step 1: Create a Stored Procedure that uses a CTE
Most of the heavy lifting happens here. As you can see, when viewing the full-size image, the results are ordered by "thePath". That makes parsing the results into a ordered list very easy.
1: WITH siteMapCTE(SYSID, ID, Parent,title,description,url,roles, level, thePath) AS (
2: SELECT SYSID, ID, Parent,title,description,url,roles, 1 as level, CONVERT(VARBINARY(MAX), ID) AS thePath
3: FROM aspnet_SiteMap WHERE Parent is NULL
4: UNION ALL
5: SELECT e.SYSID, e.ID, e.Parent,e.title,e.description,e.url,e.roles, c.level + 1, c.thePath + CONVERT(VARBINARY(MAX), e.ID) AS thePath
6: FROM aspnet_SiteMap e
7: INNER JOIN siteMapCTE c
8: ON e.Parent = c.ID
9: )
10: SELECT * FROM siteMapCTE ORDER BY thePath, title
Step 2: Create new HtmlHelper method
First off..Stephen Walther’s first ASP.NET MVC article was on writing html helpers using Extension Methods. I have his sample in a current project so it was a great place to drop in the new method.
<Extension()> _
Public Function ListBasedSiteMap(ByVal HtmlHelper As HtmlHelper, ByVal items As Object) As String
If items Is Nothing Then
Throw New ArgumentNullException("items")
End If
Dim builder As New StringBuilder()
Dim mPreviousLevel As Integer
Dim mUrl As String = String.Empty
builder.Append("<div class=""demo"" id=""testMap""><ul>")
For Each row As DataRow In items.Rows
If row.Item("url").ToString.Contains("~/") = True Then
mUrl = "/" & System.Configuration.ConfigurationManager.AppSettings("application.name") & "" & row.Item("url").ToString.Split("~/")(1)
Else
mUrl = row.Item("url").ToString
End If
If row.Item("level") = 1 Then
builder.AppendLine("<li id=""" & row.Item("id") & """ class=""open""><a href=""" & mUrl & """>" & row.Item("title") & "</a>")
ElseIf mPreviousLevel < row.Item("level") Then
'child
builder.AppendLine("<ul>")
builder.AppendLine("<li id=""" & row.Item("id") & """><a href=""" & mUrl & """>" & row.Item("title") & "</a>")
ElseIf mPreviousLevel = row.Item("level") Then
builder.AppendLine("<li id=""" & row.Item("id") & """><a href=""" & mUrl & """>" & row.Item("title") & "</a>")
ElseIf mPreviousLevel > row.Item("level") Then
'close level
builder.AppendLine("</li>")
builder.AppendLine("</ul>")
builder.AppendLine("<li id=""" & row.Item("id") & """><a href=""" & mUrl & """>" & row.Item("title") & "</a>")
Else
'parent ?
End If
added.Add(row.Item("id"))
mPreviousLevel = row.Item("level")
Next
builder.AppendLine("</ul></div>")
Return builder.ToString()
End Function
Oh…I pass the results in as a data table….you can change that to be whatever your passing….
Step 3: Get results to your view
How ever you like, get the data to the view. Again, I am using my own DAL and pass the results in as a Data Table
Step 4: Put the unordered list on the view
1: <%=Html.ListBasedSiteMap(ViewData("siteMap"))%>
Don’t forget to import the HtmlHelpers namespace…in your paper (I presume its a master page or the web.config)
1: <%@ Import Namespace="yourNameSpace.HtmlHelpers" %>
Break
Ok, at this point you should have an non-styled unordered list of SiteMap nodes that looks something like. All we have to do now is style, wire and go. As a matter of fact, the sitemap should work too!…it just looks like crap.
Step E: jsTree!
I’m not going to walk you through the process of wiring up your site to use jsTree but that is the next step. download, and put the files into your project, add the script and link tags for the javascript and css…modify the CSS as needed…
So maybe I did walk you through it…anyway.
Step VI: onload event….um…
I’m using dojo for this project with the exception of the TreeView so I leveraged dojo’s OOP and onload….this should work but its not tested.
1: var first = null;
2: $(function() {
3: tree1 = new tree_component();
4: tree1.init(jQuery("#testMap"), {
5: cookies: {
6: prefix: "sitemap",
7: opts: { path: '/' }
8: },
9: callback: {
10: onchange: function(NODE) {
11: if (!first) {
12: first = true;
13: } else { document.location.href = jQuery(NODE).children("a:eq(0)").attr("href"); }
14: }
15: }
16: });
17: });
Finish
Here is what I ended up with…
Again, I know…no caching…no security trimming but it works and you can allow management of the nodes from a web interface (of course you have to code that) … If anyone adds trimming please let me know…I don’t have a need now but I’d like to keep this all together in one place.
ASP.NET MVC, CTE, SQL, jQuery
