MVC – Going Crazy With Dynamic Methods!

August 20th, 2010 / No Comments » / by Mike

I recently finished a Project in MVC 2 and .NET 4.0. This project was basically a website with an admin section. Nothing special…

But the client wanted his navigation menu to have a different image button for every menu item… and it has rollover effect with another image button… This is not a big challenge but It was a pain in the ass to do this the old fashion way!

So I decided to have fun with some new stuff instead!

I started by putting all the menu items in an array:

var menuItems = new [] {
    new {
        Name = "Home",
        isActive = SetActiveStatus("Home"),
        CssClass = "btn-darkBlue",
        ActiveCssClass = "btn-darkBlue-active"
    },
    new {
        Name = "Careers",
        isActive = SetActiveStatus("Careers"),
        CssClass = "btn-lightBlue",
        ActiveCssClass = "btn-lightBlue-active"
    },
    new {
        Name = "Services",
        isActive = SetActiveStatus("Services"),
        CssClass = "btn-green",
        ActiveCssClass = "btn-green-active"
    },
    new {
        Name = "News",
        isActive = SetActiveStatus("News"),
        CssClass = "btn-orange",
        ActiveCssClass = "btn-orange-active"
    },
    new {
        Name = "About",
        isActive = SetActiveStatus("About"),
        CssClass = "btn-red",
        ActiveCssClass = "btn-red-active"
    },
    new {
        Name = "Contact",
        isActive = SetActiveStatus("Contact"),
        CssClass = "btn-purple",
        ActiveCssClass = "btn-purple-active"
    }
};

As you can see Menu Items are actually dynamic objects with their Name, their Status, their Css Class and their Active Css Class.

SetActiveStatus(“Contact”) is a dynamic method I created to find out where I’m located on the site, to set the status of the right menu item. This is fairly simple:

Func SetActiveStatus = c => (c == area);

So basically this is method which requires a string and sends you back a bool if the string you input is the same as area.

Once this was done I needed the HTML markup for my menu, so here goes: (I was having difficulty with Syntax Highlighter here. Seems it doesn’t like a mix of languages! Click the image to enlarge)

Every link looks like this:

Html.RouteLink("Careers",
                     "Careers_Home",
                     null,
                     new {
                         @class = GetActiveStatus("Careers")
                                 ? GetActiveCssClass("Careers")
                                 : GetCssClass("Careers")
                     }
)

What this does is make a link from my routes with a CSSclass depending on the status of the item I want to display.

Func GetActiveStatus = c => (menuItems.Where(x => x.Name == c).First().isActive);
Func GetActiveCssClass = c => (menuItems.Where(x => x.Name == c).First().ActiveCssClass);
Func GetCssClass = c => (menuItems.Where(x => x.Name == c).First().CssClass);

This is probably VERY overkill for a 6 items menu, but it was fun writing =)

Navigation in Windows Phone 7 Application

August 12th, 2010 / 5 Comments » / by Mike

I’ve recently started playing with Windows Phone 7 Developer Tools and one of the first thing I asked myself is “How To Link Between Views?!”. I researched the web and found 3 ways to handle navigation: Static Links, Routes and Navigation Service.

First of all, to build a Windows Phone 7 Application you will need to download and install the this. You will also need to have a basic understanding of Silverlight/XAML.

1. First things first, lets create a new Project.

2. Then I created a few pages in a folder I created and named Views (You could call this folder whatever you want…)

3. This is what my Solution Explorer looks like now.

4. To create Static Links, add some Hyperlink to the ContentGrid of MainPage.xaml and give them the NavigateUri property with the path to the page you want to navigate to.


    
    
    

5. Now if you run the application using the Windows Phone 7 Emulator and click one of the Hyperlink you created you should see the content of that page. In my case the only thing I changed is the Page Title..

6. Lets try to do the same thing with the Navigation Service. Open App.xaml and add the following code in






        
    

7. We now need to tell the Application to use this UriMapper. This is very simple, open App.xaml.cs and add RootFrame.UriMapper = Resources["UriMapper"] as UriMapper; at the end of the constructor. It should look like this:

public App()
{
    // Global handler for uncaught exceptions.
    // Note that exceptions thrown by ApplicationBarItem.Click will not get caught here.
    UnhandledException += Application_UnhandledException;

    // Standard Silverlight initialization
    InitializeComponent();

    // Phone-specific initialization
    InitializePhoneApplication();

    RootFrame.UriMapper = Resources["UriMapper"] as UriMapper;
}

8. Once this is done, add a button on the MainPage.xaml.


    
    
    

9. Double click on the button you just added to give it a Click Event. This should create button1_Click method in MaiPage.xaml.cs. Put the following line of code in the method:

private void button1_Click(object sender, RoutedEventArgs e)
{
    NavigationService.Navigate(new Uri("/Page3", UriKind.Relative));
}

10. NavigationService also provides you metods like GoBack() to go back to the previous page. If you want to try this, you could add a button a Page3.xaml much like we did for step 9 and put this code in Page3.xaml.cs:

private void button1_Click(object sender, RoutedEventArgs e)
{
    NavigationService.GoBack();
}

I know I skipped the second option, Routes. I’ll write about it in another post! I think the most important navigation feature in a Windows Phone 7 application is the NavigationService!

ASP.NET MVC 2 – Linking between Areas

June 10th, 2010 / No Comments » / by Mike

If you’ve been playing with MVC 2 you might be wondering how to make ActionLinks between areas. I know it took me a good half hour to figure out!

Here it is:

Html.ActionLink("Display Text", "Action", "Controller", new { area = "Area" }, null);

I hope it helps someone!