Updated - MvcContrib UI Extensions - Themed Grid & Menu

After a comment on by blog here, I have updated the MvcContrib UI Extensions source code, the sample MVC3 Web application (both source and demo), and deployed a new NuGet package to the public NuGet feed.  Here are the links:

• MvcContrib UI Extensions - Themed Grid & Menu
• Demo Web Application
• NuGet Package

Thanks for reading...

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

Themed & Ajaxified MVCContrib Grid - with page size dropdown

Demo | Source

MVCContrib Grid.

Okay, that's a little biased; however, within a couple of hours of toying around with the MVCContrib Grid, I was sold.  I won't go into all the functionality provided by the grid - you can read about it here, read a more detailed writeup on Jeremy Skinner's blog here, and there's a nice writeup on the use of the grid here. What I really like about the MVCContrib Grid is the fluent code design and GridModels.  These two items are reviewed  on the MVCContrib Grid page and Jeremy's posts.

I'm kind of a demanding guy that is rarely satisfied.  And while the MVCContrib Grid is sweet, I still wanted more.  What are my demands?  I use 'demands' lightly, but many people I know would disagree... I digress.  Here they are:

• Themeable via jQuery UI Themes
• AJAX enabled
• Page Size enabled,
• Easy to use, and
• Easy to apply to an existing MVCContrib Grid implementation.

The AJAX purests out there will disagree with my implementation of the AJAX functionality.  I call my implementation 'poor man's AJAX.'  I make the request and pass back markup.  Why?  Referring back to my list of 'demands'... the last two bullets are very important.  I don't want fellow developers to have to learn something new - Microsoft .NET related technologies are moving at a rapid pace - there's already enough to learn - I'm writing this post on a Saturday - go away... ;-)  I want the developers to make maybe a handful of simple changes to existing code and bam - it's done.

My implementation includes three parts:

1. C# Class Library.  A class that overrides the HtmlTableGridRenderer (HtmlTableGridThemedRenderer), a class that defines a new Pager called PagerThemed, and a couple new HTML Helper extensions.
2. A jQuery Plugin - mvccontribGrid.  This plugin handles the AJAX requests and some grid stylization. This plugin works like any jQuery plugin.  You pass a selector and a few options and the grid's good-to-go.
3. CSS.  Simple CSS classes that provide the grid-specific styles.

In order to use the grid, you will also need jQuery and a jQuery Theme.

A little word on design.  I originally put all the CSS classes and selectors markup in the C# code; however, those markup features started to weigh down the AJAX response, so I moved CSS classes and selector additions to the plugin.  The HtmlTableGridThemedRenderer has a method called LighenUp.  This method sets an internal field that will either reduce (or not) the aforementioned CSS classes and selectors on the server-side.  The default it true - meaning the CSS classes and selectors will be rendered via the jQuery plugin - client-side.

The only part of my implementation that 'smells' a bit it the requirement to have a View and a PartialView that serve almost the same function.  Why does it smell?  It violates DRY.  However, I couldn't figure out another way to make it work without redesigning the grid control - that was not an option - I've got client work to attend to folks... :-)

Mentioning DRY, rather than cut and paste from the client (the MVC app) implementation and put it in this post, you can download the whole source code (with demo code) here.  The demo code is easy to follow.  Plus, I don't expend anyone to even read this post unless they have some developer knowledge and can easily figure out the simple logic.  Note that the source code includes a bunch of GAC assemblies copied as local references.  Since I designed the code using and for Razor (MVC 3), the GAC assemblies copied as local references was required for me to push the demo to my host - original development was MVC 3 RC2.  You can simply remove the local assemblies and replace with you GAC assemblies.

Oh yeah, almost forgot - take a look at the demo here and play around with it.  Notice that the demo include the jQuery themeroller, so you can place around with the various themes available from jQuery UI.

Thanks for reading...

References:

• Demo
• Source
• MVCContrib Project
• MVCContrib Grid
• Jeremy Skinner's Blog
• jQuery
• jQuery UI

Demo | Source