Monday, February 7, 2011

MvcContrib Menu

Demo | Source

This page is a placeholder for now; however, I intent to create a post that describes the use of my own version of the MvcContrib Menu Helper.

For now, you can see a working demo by using the demo link.  Once I have the source code cleaned up a bit, I'll post the source code.

Below is a quick snippet of the code used to generate the main menu in the demo. Notice the fluent style and the use of Razor Templates. BTW, sorry for the poor color-code - Razor doesn't format well using SyntaxHighligher.

@Html.MvcContrib().Menu().Items(menu => {
    menu.Action<HomeController>(c => c.Index(), "no text displayed", Url.Content("~/Content/ico/house.png"))
        .ItemAttributes(@class => "solo").DisplayText(false); 
           
    menu.Link("About", null, Url.Content("~/Content/ico/application_side_boxes.png")).Items(sub => {
        sub.Content(
            @:@Html.Partial("_MvcContribLogo")    
        );
    }).ListAttributes(style => "width: 450px;", @class => "sf-shadow-off");
    
    menu.Link("Secure", null, Url.Content("~/Content/ico/lock_open.png")).Items(sub => {
        sub.Secure<HomeController>(c => c.Index(), null, Url.Content("~/Content/ico/application_view_tile.png"));
        sub.Secure<HomeController>(c => c.About(), null, Url.Content("~/Content/ico/info2.png"));
        sub.Secure<HomeController>(c => c.SecurePageOne(), null, Url.Content("~/Content/ico/shield.png"));
        sub.Secure<HomeController>(c => c.SecurePageTwo(), null, Url.Content("~/Content/ico/shield_go.png"));
    });
    
    menu.Link("Insecure", null, Url.Content("~/Content/ico/lock.png")).Items(sub => {
        sub.Action<HomeController>(c => c.Index(), null, Url.Content("~/Content/ico/application_view_tile.png"));
        sub.Action<HomeController>(c => c.About(), null, Url.Content("~/Content/ico/info2.png"));
        sub.Action<HomeController>(c => c.SecurePageOne(), null, Url.Content("~/Content/ico/shield.png"));
        sub.Action<HomeController>(c => c.SecurePageTwo(), null, Url.Content("~/Content/ico/shield_go.png"));
    });
    
    menu.Action<MenuController>(c => c.Index(), "Menu Examples", Url.Content("~/Content/ico/house_go.png"));
})

Demo | Source

12 comments:

habajaba said...

Dan,
Really like the menu, great job! Why the dependency on MVC2 dll? I'm hesitant to use it based on this.

Phil

tdryan said...

Hello Phil: Thanks for the nice feedback. There isn't an MVC2 dependency - the dependency that you see is the ASP.NET MVC Futures (Microsoft.Web.Mvc) assembly. MvcContrib has a dependency on the Futures functionality. The dll was actually imported via the MvcContrib.Mvc3-ci NuGet package. The newer version of the MvcContrib.Mvc3-ci NuGet package is using Mvc3Futures. Give me a couple days to test the code with the new package. If everything works as expected, I'll update the code and the samples. Thanks again Phil... -Dan

tdryan said...

Okay, I've updated the source and pushed the changes to CodePlex. I've also updated the NuGet package - MvcContrib.Shp 1.1.0.0. Hope this helps...

dharmesh said...

Mvccontrib Menu is nice one to use. but there is a problem while you use IE8 browser and centered align your whole page and resize the windows cause menu item text to appear in wrong place. i have already raise this issue on codeplex MVCcontrib menu project. would you please look at this problem? I really appreciate your afforts.

tdryan said...

Hello @dharmesh. Thanks for the post... I've updated the downloadable project that includes a VerticalCenter view - this view is not accessible via the menu, so you'll need to access it via url. The page is centered via a div with the following css: width: 960; margin: 0 auto. I cannot replicated your issue in IE8 (or any other browser). I don't believe this is a project-related bug. Recommend that you take a look at your css for your application. Your css is probably this source of your issues.

tdryan said...

@dharmesh - try the following link - VerticalCenter

dharmesh said...

Thanks tdryan. i have another problem using this menu on mvc.

when i hoverover menuitem, it is showing another submenu dynamically on the fly. but the problem is when submenu overlap with any silverlight object, it always show up behind the silverlight object. It is happening with only silverlight object and jqgrid form jquery...

tdryan said...

@dharmesh - this isn't an issue with the menu, it's an issue with Silverlight - specifically, it's an issue with the object tag. I neither use Flash nor Silverlight; however, the following link will help point you in the right direction: SWF file ignores stacking order, plays on top of DHTML layers. Hope this helps...

Dennis Li said...

Hi Tdryryan, you are a genius. great job !!!, I have download it and i'm going to use it in my first MVC web app. thanks !

Dennis Li said...

Hi Tdryryan, you are a genius. great job !!!, I have download it and i'm going to use it in my first MVC web app. thanks !

Dennis Li said...

I have installed MvcContrib.Mvc3-ci and mvcContrib.ship from the library via MS 2010
I got an error “ system.web.htmlhelper’ does not contain a definition for mvcContrib …. ” at _Menu.Main.cshtml page. Did I miss something?
thanks

Dennis Li said...

the problem fixed.