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.

public static class Extention
    {
        public static TagBuilder GetNavItem(this AjaxHelper ajax, MolineSoftware.SLAudit.Navigation navItem)
        {
            MvcHtmlString htmlTemplate = null;
            if (navItem.Route == null)
            {
                htmlTemplate =
                    ajax.ActionLink(navItem.LinkText, navItem.ActionName, navItem.Controller,
                                    new AjaxOptions
                                        {
                                            UpdateTargetId = navItem.UpdateTargetId,
                                            OnSuccess = navItem.OnSuccess,
                                            OnBegin = navItem.OnBegin
                                        });
            }
            else
            {
                htmlTemplate =
                    ajax.ActionLink(navItem.LinkText, navItem.ActionName, navItem.Controller, navItem.Route,
                                    new AjaxOptions
                                        {
                                            UpdateTargetId = navItem.UpdateTargetId,
                                            OnSuccess = navItem.OnSuccess,
                                            OnBegin = navItem.OnBegin
                                        });
            }
            var builder = new TagBuilder("li");
            if (IsCurrentAction(ajax, navItem.ActionName, navItem.Controller))
                builder.MergeAttribute("class", "current");
            builder.InnerHtml = htmlTemplate.ToHtmlString();
            return builder;
        }
        static bool IsCurrentAction(AjaxHelper ajax, string actionName, string controllerName)
        {
            string currentControllerName = (string) ajax.ViewContext.RouteData.Values["controller"];
            string currentActionName = (string) ajax.ViewContext.RouteData.Values["action"];
            if (currentControllerName.Equals(controllerName, StringComparison.CurrentCultureIgnoreCase) &&
                currentActionName.Equals(actionName, StringComparison.CurrentCultureIgnoreCase))
            {
                return true;
            }
            return false;
        }
    }
}

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

public class Navigation
{
    #region | Public Properties |
    /// 
    /// Gets or Sets the ID
    /// 
    public virtual Int32 Id { get; set; }
    /// 
    /// Gets or Sets the Display for the link
    /// 
    public virtual String LinkText { get; set; }
    /// 
    /// Gets or Sets the ActionName.
    /// 
    public virtual String ActionName { get; set; }
    /// 
    /// Gets or Sets the Controller
    /// 
    public virtual String Controller { get; set; }
    /// 
    /// Gets or sets the Active flag.
    /// 
    public virtual Boolean Active { get; set; }
    /// 
    /// Gets or sets the JavaScript function to call after the page is successfully updated.
    /// 
    public virtual String OnSuccess { get; set; }
    /// 
    /// Gets or sets the name of the JavaScript function to call immediately before the page is updated.
    /// 
    public virtual String OnBegin { get; set; }
    /// 
    /// Gets or sets the ID of the DOM element to update by using the response from the server.
    /// 
    public virtual String UpdateTargetId { get; set; }
    /// 
    /// Gets or Sets the 
    /// 
    public virtual object Route { get; set; }
    #endregion
}

We can then create a collection of these navigation items…

namespace MolineSoftware.SLAudit
{
    public class NavigationList : List
    {
        #region | Constructor |
        #endregion
        ///Returns a NavigationList of items ** TESTING ONLY
        public NavigationList GetTestList()
        {
            NavigationList list = new NavigationList();
            list.Add(new Navigation
                         {
                             Active = true,
                             Controller = “Home”,
                             OnBegin = “SetLoading”,
                             OnSuccess = “handleUpdate”,
                             Id = 1,
                             LinkText = “Home”,
                             ActionName = “Index”,
                             UpdateTargetId = “output-data”,
                             Route = new {serverName = “MyServer”} //Example setting the route object
                         });
            list.Add(new Navigation
                         {
                             Active = true,
                             Controller = “Home”,
                             OnBegin = “SetLoading”,
                             OnSuccess = “handleUpdate”,
                             Id = 2,
                             LinkText = “About”,
                             ActionName = “About”,
                             UpdateTargetId = “output-data”
                         });
            return list;
        }
    }

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

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

Source code, step-by-step tutorials, videos and more

I've compiled a whole load of useful tutorials, source code for articles (like this one) and mini video series to help you push through all the noise and build better ASP.NET web applications, faster.

Drop your email in the box below to get new posts first, and instant access to 'the vault'.

I respect your email privacy. Unsubscribe with one click.