Dynamic Menus and Custom MVC Routing – Part 1

Maybe it’s because the Christmas spirit has addled my brain but I’m not entirely sure the title of this blog is clear, but I’m sticking with it! I’ve been working on a project creating a company intranet, the primary goal of which is to deliver reporting functionality. Reports will be by department but I don’t want to create a view per department. Instead I will load the departments from an entity framework model and create custom mvc routing to route to the same view but load content dynamically.

Companion video for this blog

Loading the department model

This is not an EF tutorial but for the purposes of this blog know that there is a model for departments (if you want to follow along you could just create a list).

departmentsmodel

Departments model

The first thing I want to do is load the departments from the model into the navigation bar like so

navigation bar

departments loaded from model and displayed on the page

I could write the code to do this directly in the HomeController but in the case of the project I’m working on I want this to be displayed on every page. To achieve this I am going to subclass Controller to make my own BaseController class, then all other controllers I create will inherit from BaseController.

At this point I just want to make a note about coding style and best practices. I’m not following them for this blog; I’m simply demonstrating how something could be achieved (there are always other ways). However, that being said I am always interested in hearing your views.

In short, I am getting a reference to a departments repository (repository pattern to be discuss in another blog), I am then overriding the OnActionExecuting() method. In this method I am getting a list of departments and returning them as a property of Viewbag. Next we need to display them. As I mentioned before, I want these to appear on every page, so for this I will create a layout page. Right-click on View->Shared and add new layout page; call it _departments.cshtml. Replace the code with the following:

departments cshtml

You will obviously need to make changes to the namespace to reflect your own project. I am also assuming you are using the default Bootstrap theme with Visual Studio 2013 MVC projects. Next we need to edit the _Layout.cshtml file to include our departments. Open up the _Layouts.cshtml file and replace the existing links code in the <div class=”navbar-collapse collapse”> with: @RenderPage(“_Departments.cshtml”) It should look like this:

Renderpage departments

Now, assuming my incessant gibbering has retained a degree of focus, all you need to do now is change your HomeController to inherit from BaseController:

Build and run the project and your navbar should now list all your departments In part 2 of this ramble we will look at customising the routing.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.