Question

I have 2 tabs.

• The first one is the most important and it loads the content very fast.
• The second one is not very important and it takes too long to load its content (charts and summaries)

So, I do not want to load both tabs’ content at the same time. Ideally, I would just load the first tab content and when the user clicks on the second tab I would load its related content (on demmand).

In order to do that, I need to know in server side that the second tab has been clicked and then send back all the relevant information to the client side.

Any ideas on how to do this?

Answer 1

For this you will have to make changes on both client and server side.
On server side (or code-behind), make the method Static and decorate it with [WebMethod] attribute.

public partial class _Default : System.Web.UI.Page
{
    ...
    [WebMethod]
    public static void MethodToBeCalledUsingAjax(parameters)
    {
        //tab clicked logic goes here
    }
    ...
}

On client side, inside tab click function, use jquery ajax as below

var req = $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "Default.aspx/MethodToBeCalledUsingAjax",
            data: "{}",
            dataType: "json",
            success: function (msg) {
            }
        });

This ajax call shall on demand inform server side that the tab is clicked and process the code accordingly.

Please ignore the styling…i’m new to stackoverflow 🙂