Systenics Solutions Logo
  • Home start here
  • Solutions services we provide
  • Products products we build
  • About Us who we are
  • Contact Us request a quote
  • Jobs work for us
  • Blog our views

Blog

Home / Blog

Create navigation menu in Umbraco 6 using ASP.NET MVC Partial View and Razor

  • by:
  • in:
  • tags: .NET, ASP.NET MVC, Razor, Umbraco 6
  • 0 Comments

Introduction

I was recently faced with the challenge of implementing a navigation menu in Umbraco 6, it was very difficult to search creditable samples which worked in Umbraco 6. In this blog post, I will explain the steps to create a navigation menu using partial view as you can see on current Systenics website. Besides linking the pages, we also wanted to display a help text for each menu item. Umbraco 6 provides several ways to implement the same, you could either use Macros, but I have chosen to write a MVC Partial View. This article assumes that you have Umbraco 6 configured to use Mvc as the display engine so that MVC Partial Views can be used.

header_menu
Figure 1: Systenics navigation menu

Our sample Content hierarchy is as below:

Home
- Solutions
- Products
- Contact Us

Getting Started

We need to include the parent menu item (Home) and traverse through all child pages to create the menu in header section.

In Umbraco administration tool –> Settings section, right click on Partial Views and select Create from the context menu. Give the name as NavigationMenu and click Create to create the new partial view and bring up its editor. Copy paste the code from listing 1 below into the editor and click Save to save the menu.

Listing 1: NavigationMenu.cshtml

@inherits Umbraco.Web.Mvc.UmbracoViewPage<IPublishedContent>
@using System.Collections;
@{
   Layout = null;
   var parent = Model.AncestorOrSelf(1);
   string classSelectedMenuItem = "";
   if(Model.Name == parent.Name)
   {
       classSelectedMenuItem = "selected_menu_item";
   }
    
  Dictionary<string, string> menuItems = 
         new Dictionary<string, string>();
  menuItems.Add("Home", "start here");
  menuItems.Add("Solutions", "services we provide");
  menuItems.Add("Contact Us", "request a quote");
}
<ul>
  <li class="@classSelectedMenuItem" >
    <a href="@parent.NiceUrl()">@parent.Name
    <span class='helpText'>@menuItems[@parent.Name]</span></a></li>
    @foreach(var page in parent.Children.Where(x => x.IsVisible()))
    {
       string strClassName = "";
       if(@Model.Name == @page.Name)
       {
          strClassName = "selected_menu_item";
       }
       <li class="@strClassName"><a href="@page.NiceUrl()">
       @page.Name<span class='helpText'>
       @try {@menuItems[@page.Name] } catch {}</span></a></li>
    }
</ul>

 

By default partial views in Umbraco 6 inherit from the Umbraco.Web.Mvc.UmbracoViewPage<IPublishedContent> class as shown on line 1 above. 
In the above code listing, we are looping over the results of Lambda expression query which has items with IsVisible property set as true. This property is set by adding the umbracoNaviHide property to the document type that is used to display the pages. A try-catch block is added on line 31 which will allow the code to execute and render a blank span tag in case there is no description provided for the added page in the dictionary item. You will have to manually update the menuItems object on line 12 to contain descriptions for all your pages.

To use this partial view, include it in your base template using the following code of listing 2. We pass the @Model.Content parameter to the partial view so that it can find the pages for the application.

Listing 2: Include NavigationMenu in your base template

	@Html.Partial("NavigationMenu", @Model.Content)

 

I hope you find this little blog post helpful.

Share This Post:

About the Author

This post was written by on Saturday March 23, 2013.

comments powered by Disqus
< Older Newer >
All Categories
  • Programming
  • General
  • DevOps
Tags
  • .NET (9)
  • Ajax (1)
  • Android (3)
  • ASP.NET (1)
  • ASP.NET 4.5 (1)
  • ASP.NET 5 (1)
  • ASP.NET 6 (1)
  • asp.net core (1)
  • ASP.NET MVC (12)
  • AuctionWorx (2)
  • Bootstrap (4)
  • Build and Release (1)
  • CI (1)
  • ClickOnce (1)
  • ClientDependency (1)
  • Code Signing (1)
  • Continuous Integration (1)
  • C-Sharp (9)
  • devops (1)
  • ExpressJS (1)
  • Interview Process (1)
  • iOS (1)
  • Linux (1)
  • Lucene (1)
  • MVC (2)
  • NodeJS (1)
  • Phonegap (3)
  • Razor (4)
  • Salesforce (2)
  • Socket.IO (1)
  • SQL CE 3.5 SP2 (1)
  • SQL Server (1)
  • Sync (1)
  • Sync Framework v2.1 (1)
  • Umbraco 6 (6)
  • Umbraco 7 (4)
  • Visual Studio 2015 (1)
  • Visual Studio Online (1)
  • VMWare ESXI 6.0 (1)
  • WCF (1)
  • Windows (2)
  • WPF (2)

About Us

Systenics Solutions is a customized software development company. We specialize in building Cloud, Web, and Mobile based applications using the latest Cloud Technologies. Our fine-tuned agile processes help you smoothly progress from conceptualizing your ideas, building proto-types/wireframes to bringing your product to market, giving our clients complete visibility and control at all times. We strive to provide our global clients of various sizes with cost effective benefits of offshore development while providing expert technical services.


Microsoft Partner - Gold Cloud Platform

Contact Us

Systenics Solutions

The Affaires, Unit #F-1, 1st Floor, Plot #9, Sector - 17, Opp. Bhumiraj Costarica, Sanpada, Navi Mumbai - 400705, India

 

Telephone: +91-22-2781 0808

Email: info@systenics.com

Skype: saurabhn

Testimonials

"Coming from a non-technical background, Saurabh and his team at Systenics took my business idea and turned it into a fully functional application which surpassed my expectations! You can be sure with them that all your IT related concerns will be covered."

Shobhan, CEO - IITJobs Inc

"The ability Systenics showed in code signing and deploying my click once code in Microsoft visual was truly awesome. I interviewed and tested 6 different development companies and only one was actually able to get the job done - that was Systenics Solutions! Professional, courteous and reliable - I highly recommend them and am very happy and eager to continue growing our business relationship now and in the near future. Thank you Saurabh"

Andre Pierre

I contracted with Systenics about 6 months ago, in an effort to customize auction software for a new company I am launching in the US. The entire process was as smooth as could be. Their estimate for the project was reasonable, and very close to the final number. I would absolutely use this company again, and I have so much confidence in their ability to work with me, I even agreed to a support agreement with them long term. Their ability to communicate with me in the US was always very timely. They listened to my thoughts and ideas, and then suggested some changes, that made my software have even greater value. I cannot thank them enough, and would highly suggest their quality services to anyone. A completely satisfied customer!

Joe Lefebvre - Pharmabid, LLC

Systenics did a great job on our customization , they clearly understood the requirements and completed the task in a timely manner. They were very thorough in project discussions and made sure that we understood how the customization works and suggested improvements when required

Mike Singh - Dr. Liquidator

Copyright © 2012-2018 Systenics Solutions. All rights reserved.

BACK TO TOP