ASP.NET MVC SiteMap

Eric Polerecky — Wed, 03 Dec 2008 22:19:21 +0000

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.

        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(""demo"" id=""testMap"">")

            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(""" & row.Item("id") & """ class=""open"">"" & mUrl & """>" & row.Item("title") & "")

                ElseIf mPreviousLevel < row.Item("level") Then

                    'child

                    builder.AppendLine("")

                    builder.AppendLine(""" & row.Item("id") & """>"" & mUrl & """>" & row.Item("title") & "")

                ElseIf mPreviousLevel = row.Item("level") Then

                    builder.AppendLine(""" & row.Item("id") & """>"" & mUrl & """>" & row.Item("title") & "")

                ElseIf mPreviousLevel > row.Item("level") Then

                    'close level

                    builder.AppendLine("")

                    builder.AppendLine("")

                    builder.AppendLine(""" & row.Item("id") & """>"" & mUrl & """>" & row.Item("title") & "")

                Else

                    'parent ?

                End If

                added.Add(row.Item("id"))

                mPreviousLevel = row.Item("level")

            Next

            builder.AppendLine("

            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.

No related posts.

Eric Polerecky » CTE

ASP.NET MVC SiteMap