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)%>
<% } %>

Want to learn ASP.NET Core?

  • Want to learn ASP.NET Core but don't know where to start?
  • Don't have time to keep up with everything Microsoft is putting out?
  • Stuck on legacy apps when you want to build something new?

Pop your details in the boxes below and get regular updates from me about all things ASP.NET Core.

LinkedIn
Reddit