ASP.NET and JQuery MVC Menu Part 3 (AJAX)

Other posts in this series:

• Part 1
• Part 2

Aaron has very kindly sent me an extension to the original code for creating a simple menu for ASP.NET MVC sites. His version employs the Microsoft AJAX library to “ajaxify” the links on the menu.

The main part of his code handles getting a List Item containing an AJAX link.

1. public static class Extention
2.     {
3.         public static TagBuilder GetNavItem(this AjaxHelper ajax, MolineSoftware.SLAudit.Navigation navItem)
4.         {
5.             MvcHtmlString htmlTemplate = null;
7.             if (navItem.Route == null)
8.             {
9.                 htmlTemplate =
10.                     ajax.ActionLink(navItem.LinkText, navItem.ActionName, navItem.Controller,
11.                                     new AjaxOptions
12.                                         {
13.                                             UpdateTargetId = navItem.UpdateTargetId,
14.                                             OnSuccess = navItem.OnSuccess,
15.                                             OnBegin = navItem.OnBegin
16.                                         });
17.             }
18.             else
19.             {
20.                 htmlTemplate =
21.                     ajax.ActionLink(navItem.LinkText, navItem.ActionName, navItem.Controller, navItem.Route,
22.                                     new AjaxOptions
23.                                         {
24.                                             UpdateTargetId = navItem.UpdateTargetId,
25.                                             OnSuccess = navItem.OnSuccess,
26.                                             OnBegin = navItem.OnBegin
27.                                         });
28.             }
30.             var builder = new TagBuilder("li");
32.             if (IsCurrentAction(ajax, navItem.ActionName, navItem.Controller))
33.                 builder.MergeAttribute("class", "current");
35.             builder.InnerHtml = htmlTemplate.ToHtmlString();
36.             return builder;
37.         }
39.         static bool IsCurrentAction(AjaxHelper ajax, string actionName, string controllerName)
40.         {
41.             string currentControllerName = (string) ajax.ViewContext.RouteData.Values["controller"];
42.             string currentActionName = (string) ajax.ViewContext.RouteData.Values["action"];
44.             if (currentControllerName.Equals(controllerName, StringComparison.CurrentCultureIgnoreCase) &&
45.                 currentActionName.Equals(actionName, StringComparison.CurrentCultureIgnoreCase))
46.             {
47.                 return true;
48.             }
49.             return false;
50.         }
51.     }
52. }

You will notice the use of a class called Navigation (to build the actual link).

1. public class Navigation
2. {
3.     #region | Public Properties |
4.  
5.     /// <summary>
6.     /// Gets or Sets the ID
7.     /// </summary>
8.     public virtual Int32 Id { get; set; }
9.  
10.     /// <summary>
11.     /// Gets or Sets the Display for the link
12.     /// </summary>
13.     public virtual String LinkText { get; set; }
14.  
15.     /// <summary>
16.     /// Gets or Sets the ActionName.
17.     /// </summary>
18.     public virtual String ActionName { get; set; }
19.  
20.     /// <summary>
21.     /// Gets or Sets the Controller
22.     /// </summary>
23.     public virtual String Controller { get; set; }
24.  
25.     /// <summary>
26.     /// Gets or sets the Active flag.
27.     /// </summary>
28.     public virtual Boolean Active { get; set; }
29.  
30.     /// <summary>
31.     /// Gets or sets the JavaScript function to call after the page is successfully updated.
32.     /// </summary>
33.     public virtual String OnSuccess { get; set; }
34.  
35.     /// <summary>
36.     /// Gets or sets the name of the JavaScript function to call immediately before the page is updated.
37.     /// </summary>
38.     public virtual String OnBegin { get; set; }
39.  
40.     /// <summary>
41.     /// Gets or sets the ID of the DOM element to update by using the response from the server.
42.     /// </summary>
43.     public virtual String UpdateTargetId { get; set; }
44.  
45.     /// <summary>
46.     /// Gets or Sets the <see cref="RouteValueDictionary"/>
47.     /// </summary>
48.     public virtual object Route { get; set; }
49.  
50.     #endregion
51. }

We can then create a collection of these navigation items…

1. namespace MolineSoftware.SLAudit
2. {
3.     public class NavigationList : List<Navigation>
4.     {
5.         #region | Constructor |
6.  
7.         #endregion
8.  
9.         ///Returns a NavigationList of items ** TESTING ONLY
10.         public NavigationList GetTestList()
11.         {
12.             NavigationList list = new NavigationList();
13.  
14.             list.Add(new Navigation
15.                          {
16.                              Active = true,
17.                              Controller = "Home",
18.                              OnBegin = "SetLoading",
19.                              OnSuccess = "handleUpdate",
20.                              Id = 1,
21.                              LinkText = "Home",
22.                              ActionName = "Index",
23.                              UpdateTargetId = "output-data",
24.                              Route = new {serverName = "MyServer"} //Example setting the route object
25.                          });
26.  
27.  
28.             list.Add(new Navigation
29.                          {
30.                              Active = true,
31.                              Controller = "Home",
32.                              OnBegin = "SetLoading",
33.                              OnSuccess = "handleUpdate",
34.                              Id = 2,
35.                              LinkText = "About",
36.                              ActionName = "About",
37.                              UpdateTargetId = "output-data"
38.                          });
39.             return list;
40.         }
41.     }

Finally we can use this code (assuming model is an instance of our NavigationList class) to render the menu.

1. <% foreach (var menu in Model as MolineSoftware.SLAudit.NavigationList) { %>
2.     <%= Ajax.GetNavItem(menu)%>
3. <% } %>