Load on demand with JQuery inside UpdatePanel

Question

my question is regarding the control UpdatePanel.

UpdatePanel: Basically I have few UpdatePanels on my page, which load expensive to netword data, so sometimes I dont need to load everything, that is why i want to found out how to load on demand the content inside the UpdatePanel.

Using JQuery: The loading of the UpdatePanels should happens by the JQuery function call, so I don't know how but with JQuery I should be able to say "LoadUpdatePanel("idOfUpdatePanel")" and it should load the content of it.

Any idea how to solve this issue by using the UpdatePanel and the JQuery or in what direction I should investigate?

score 0 · Accepted Answer · edited May 23 '17 at 12:18

You simple can not do that with UpdatePanel. The UpdatePanel work automatically connected with all the post data, including the viewstate, and with the code behind.

You can not run the code behind for just get one UpdatePanel, the full cycle must be run.

What you can do

you can avoid to run on code behind some functions by checking if the request is not from the same UpdatePanel.

For example, let say that you have the 4 update panels, and update panel 2 is fired a post back. Then on the rest Update panels on page load you can do something like

protected void Page_Load(object sender, EventArgs e)
{
    if (IsUpdatePanelInRendering(Page, upUpdatePanelId))
    {
        // run the code for update panel 1, me
        // ...
    }
}

where IsUpdatePanelInRendering :

public static bool IsUpdatePanelInRendering(Page page, UpdatePanel panel)
{
    Debug.Assert(HttpContext.Current != null, "Where are you called ? HttpContext.Current is null ");
    Debug.Assert(HttpContext.Current.Request != null, "Where are you called HttpContext.Current.Request is null ");

    // if not post back, let it render
    if (false == page.IsPostBack)
    { 
        return true; 
    }
    else
    {
        try
        {
            // or else check if need to be update
            ScriptManager sm = ScriptManager.GetCurrent(page);

            if (sm != null  && sm.IsInAsyncPostBack)
            {
                Debug.Assert(HttpContext.Current.Request.Form != null, "Why forms are null ?");

                string smFormValue = HttpContext.Current.Request.Form[sm.UniqueID];

                if (!string.IsNullOrEmpty(smFormValue))
                {
                    string[] uIDs = smFormValue.Split("|".ToCharArray());
                    if (uIDs.Length == 2)
                    {
                        if (!uIDs[0].Equals(panel.UniqueID, StringComparison.InvariantCultureIgnoreCase))
                        {
                            return false;
                        }
                    }
                }
            }
        }
        catch (Exception x)
        {
            Debug.Fail("Ops, what we lost here ?");
        }

        return true;
    }
}

Relative:
How to limit the number of post values on UpdatePanel?
how to prevent user controls code behind running in async postbacks?

direct ajax call

The better solution, but the difficult one, is to remove the UpdatePanels, and do your update manually using ajax calls.

In this case you can use the jQuery, and partial send, partial update anything on the page, with the minimum cost of data send and manipulation - but with a more code and design.

Load on demand with JQuery inside UpdatePanel

1 Answers1

What you can do

direct ajax call