Multiple UpdatePanel render async

Question

My page possess two UpdatePanel with a same Trigger that look like:

<asp:AsyncPostBackTrigger ControlID="btnTest" EventName="Click" />

On server side, during the partial post-back, I call two different functions related to the two updatepanel. The first one takes less than a second but the second take 5-10 seconds.

The inconvenient is that all the render is done when everything is done.

How can I do to render the result for the first panel when it's done and don't have to wait for the second? Is it possible to relate a specific function to an updatepanel, as we can do with some AJAX code (

$.ajax({
                        type: "POST",
                        url: "GridDemo.aspx/search",
                        contentType: "application/json; charset=utf-8",
                        data: "{}",
                        dataType: "json"

)

Thanks all.

My environnement: VB.NET, ASP.NET, Framework .NET 4.0

Answer 1

Avoid multiple update panels

I'm sure you've heard this before, but you should avoid using update panels wherever possible. Multiple update panels in the same page will be especially troublesome. Instead, what you should do is use a web service to populate the update panel content.

ASP.Net Web API

MVC 4 introduced a new method for creating a RESTful API in Visual Studio 2012. This method has been successfully ported over to ASP.Net web forms and to Visual 2010. Simply put, the process works like so:

1. You create a Web API which contains a server-side function that returns your data.
2. You call a javascript function using the $.ajax() method--This function can be called from the client-side without triggering a postback, and it will return the value or data-set from your server-side function which you created in step one.
3. You put the data wherever you want it using the javascript--there are many methods for doing this.

---

Some examples to get you started

Seeing as how just last year I was having the same problem you are (fighting multiple update panels), I have plenty of links and tutorials that you might find helpful.

• Posting JSON data via jQuery to MVC 4 controller action (Stack Overflow)
• Using Web API with ASP.NET Web Forms
• Using jQuery to POST [FromBody] parameters to Web API
• HTTP GET request in JavaScript (Stack Overflow)

---

PS: I'm afraid I may not have explained this well enough, so if you need any additional help, just comment (or start a chat) and I'll be happy to assist you further.