Using jQuery tabs with ASP.NET MVC

Developing websites using ASP.NET webforms does have its benefits. Now why not give a try with ASP.NET MVC. Ok Here is a simple article that describes about using jquery tabs for MVC application.

As everyone know ASP.NET MVC template provides menu options for various actions, now why not provide the same options with jquery tabs. Here is how it compares both

Standard MVC template

MVC template with jquery tabs

Now let look into details of how this can be achieved. First add the required references for jquery scripts as follows inside head tag of site.master

As with ASP.NET MVC what we need is
- Model
- View
- Controller

Let's first start with creating the required model data required for our JQuery tabs. Here is what we need to achive:-

1) Model for storing data for a tab panel
2) Model for maintaining list of tab panels (ie.. tabs)

Remember to create these classes under Models folder.

1) Model for storing data for a tab panel
Create JQueryTabPanel data model for tab related information and its relevant controller action as follows:-

JQueryTabPanel.cs

namespace MvcApplication.Models
{
    public class JQueryTabPanel
    {
        public string TabPanelID { get; set; }
        public string TabPanelTitle { get; set; }
        public string TabPanelAction { get; set; }
        public string TabPanelController { get; set; }

        public JQueryTabPanel(string PanelID, string PanelTitle, string PanelAction, string ControllerName)
        {
            this.TabPanelID = PanelID;
            this.TabPanelTitle = PanelTitle;
            this.TabPanelAction = PanelAction;
            this.TabPanelController = ControllerName;
        }
    }
}

2) Model for maintaining list of tab panels (ie.. tabs)
Create JQueryTabs data model for tab related information and its relevant controller action as follows:-

JQueryTabs.cs

namespace MvcApplication.Models
{
    public class JQueryTabs
    {
        public List JQueryTabPanels { get; set; }

        public JQueryTabs()
        {
            JQueryTabPanels = new List();
        }
    }
}

So far we have created the required data model, now let move on to creating the respective views. Create the following view under Shared folder ( as it will be common for the entire web application).

JQueryTabsControl.ascx

Finally lets update the controller. As these tabs are common for all controllers lets create a base controller as follows :-

BaseController.cs

namespace MvcApplication
{
    public class BaseController : Controller
    {

        public BaseController()
        {
            JQueryTabs tabs = new JQueryTabs();
            tabs.JQueryTabPanels.Add(new JQueryTabPanel("1", "Home", "Index", "Home"));
            tabs.JQueryTabPanels.Add(new JQueryTabPanel("2", "About", "About", "Home"));

            ViewData["JQueryTabs"] = tabs;
        }

    }
}

Now modidy site.master so as to render the JQueryTabsControl.

site.master

Also add jquery script to populate the tabs and select the respective tab based on the controller action.

common.js

That's it now you should have a working model of ASP.NET MVC using jquery tabs.


The real danger is not that computers will begin to think like men, but that men will begin to think like computers. ~Sydney J. Harris