We pay for user submitted tutorials and articles that we publish. Anyone can send in a contributionLearn More
Tab menus are a fairly common thing that I use in a lot of my applications. I like tabs because they help break up large chunks of, usually, related information.
At work we use RadControls for Telerik and they have a pretty nice tab menu control that is easy to use and looks good too. The only problem with these controls is that they only work in WebForms like even the default ASP.NET controls. So when I started playing with MVC I quickly realized I would need to spend some time building some of these controls myself.
Based on that realization, the idea for this post was formed and I set to work creating a fair simple control. This control is not meant to be compared with the control from Telerik. Mine is very basic and has very few features.
Again, I will be using the default MVC template project as my starting point. I did make a few minor changes to the MasterPage but I will include the finished Visual Studio project with this post so you can take a look for yourself.
The first step is to create the HtmlHelper extension method that will generate our control. This method will do most of the work we need.
So what this method does is it accepts an IEnumberable collection of MenuTab. We’ll look at the MenuTab class in just a bit. Next the method gets the names of both the current controller and action. These will be used to determine which tab is currently selected. Then the method uses a foreach to loop through the collection and build out the HTML unordered list. Notice that during the loop we are checking to see if the MenuTab instance’s controller and action match the current controller and action. If they make we apply the selected CSS class to the anchor. Pretty simple stuff.
Note: All this method does is produce the required HTML markup. CSS is used to achieve the tab look.
Now let’s look at the MenuTab class.
This class is very simple. It just stores the information we will need to build the links in our menu.
That covers off the extension method and any related code. As you can see I wasn’t kidding when I said it doesn’t have many features. This only meant to should how to get started.
In order to make the menu look like tabs a made a few minor tweaks to the existing Site.css file and added the below class definition to indicate which tab is selected.
Now all that is left is to insert our menu into the Site.Master file of our application.
I replaced the menu code that was already in the demo with the above code that defines the links in our menu.
So as you can see it was pretty simple to build an extension method to add our own helper method for building a tab like menu. By encapsulating this into a helper method we can now easily reuse it in any application.
You can download a sample project from our Freebies Page
Tags :actionASP.NET MVCClassControllercreatemenuMenuTabmethodstringTabtext
Copyright © 2012 Dev102.com
Breeze : Designed by Amit Raz and Nitzan Kupererd