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

Continue Reading

Google charts in xsl

Google charts is a simple and easy way to provide charts on a webpage. Refer to
Google Charts for more info.

A simple chart can be produced using img tag

Using the same in xsl will not work as the charactors ?,& etc will not be recognized as you would expect. Hence you should give this as

src="https://chart.googleapis.com/chart?chs=250x100&chd=t:60,40&cht=p3&chl=Hello|World" 

Any refernce to url can be applied in similar fashion.

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

Continue Reading

Disable a button after onclick inside an update panel

Avoiding users to click on a button more than once can be done as follows :-

btnSubmit.Attributes.Add("onclick", "this.disabled=true;" + Page.ClientScript.GetPostBackEventReference(btnSubmit, "").ToString());

This method is quite nice but if you would want to apply for entire website then you would have to duplicate the code in every page, usercontrols etc. Instead this simple script allows you to handle once for all

 var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(InitRequest);
    prm.add_endRequest(EndRequest);
    function InitRequest(sender, args) {
        var btn = $get(args._postBackElement.id);
        if (btn && btn.type == "submit") {
                btn.disabled = true;
        }
    }
    function EndRequest(sender, args) {      
        var btn = $get(sender._postBackSettings.sourceElement.id);
        if (btn && btn.type == "submit") {
                btn.disabled = false;
        }
    }

Above mentioned method is for ASP.NET ajax where update panels are used.

Hardware: the parts of a computer that can be kicked. ~Jeff Pesis

Continue Reading