Populate tab in asynchronous mode using AJAX | Tech Off

trisonics

Hi,

This might be bit naïve to many but I am new to AJAX so pardon me.

In my web application(asp.net,c#) I have 5 tab. Each tab has multiple elements. To populate data I have to call a backend procedure for this I will use AJAX. But the whole operation will take quite some time as there are many data elements.

My question is it possible to populate each tab separately. I.e. call separate procedure one after the other in a asynchronous mode and populate each table separately. So that the user doesn’t have to wait for the whole loading process to finish before he can see anything. This way he can see the details tab by tab.

It will be very helpful if you can post some sample.

thanks

Maddus Mattus
Do, or do not. There is no try. - Yoda

Take a look at the DynamicPopulateExtender. I think that it fit's your scenario best.

trisonics

Thanks Maddus. I tried but got an error "Web Service call failed: 500" Please see the code below

added a button and the DynamicPopulateExtender control in my aspx file

<asp:Button runat="Server" ID="btnSearch" Text=" Search " OnClientClick="updateDateValues();return false;" />

<ajaxToolkit:DynamicPopulateExtender ID="dpTabGeneral" BehaviorID="dpTabGeneral" runat="server" TargetControlID="updPnlGeneral" ClearContentsDuringUpdate="true" ServiceMethod="popTabGeneral" UpdatingCssClass="modalBackground" />

In the JS file I have

function updTabGeneral() {
   var behavior = $find('dpTabGeneral');
   if (behavior) {
      behavior.populate();
   }
}
function updateDateValues(){
   updTabGeneral();
}

In the CS file I have

public void popTabGeneral(string contextKey)
{
   DataSet ds = <get value from database>;
   lblCustRole.Text = value from ds;
   //similarly populate other elements incl gridview
}

Please help

Maddus Mattus
Do, or do not. There is no try. - Yoda

There is an example website with the AjaxControlToolkit that describes all the stuff you need to do to get it to work, have you tried looking there?

I have little expierence with the control, I just know it is there for this purpose.

trisonics

yes I got the details for there only below are 2 good link I found
http://ajaxcontroltoolkit.com/DynamicPopulate/DynamicPopulate.aspx

http://blogs.msdn.com/alikl/archive/2007/12/31/asp-net-ajax-control-toolkit-basic-sample-for-dynamicpopulate-control.aspx

I am still getting the error.

Maddus Mattus
Do, or do not. There is no try. - Yoda

If you want to update an entire tab with controls, why not use a server side event?

Put your tabcontrol in an update panel and populate the tab on the serverside OnActiveTabChanged event.

You cannot use the DataGrid and Label in combination with dynamic populate control, because there is no Page context in a webservice call.

trisonics

For updating the elements I hope the below code will work

Assign the values to individual elements in the panel
HtmlTextWriter htw = new HtmlTextWriter(sw);
<panel>.RenderControl(htw);
htw.Flush();
return sw.ToString();

this return string I can output is as the innerHTML of the div in the tab. I have previously used it for rendering gridview contol.

trisonics

Anyone having experience using DynamicPopulateExtender control

zvasanth

In reply to trisonics

#May 14th, 2008 @ 7:20 PM

DynamicPopulateExtender Problem
---------------------------------------------
I have also met the same "Web Service call failed: 500",

at that time, i used the method reside on the .aspx page decorated with
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
like this way: http://www.asp.net/AJAX/AjaxControlToolkit/Samples/DynamicPopulate/DynamicPopulate.aspx

After that, i created one method on .asmx page with decorated
[WebMethod]
like this way:

http://www.google.com/url?sa=t&ct=res&cd=1&url=http%3A%2F%2Fdownload.microsoft.com%2Fdownload%2Fb%2F6%2Fa%2Fb6ae89ee-df69-4c87-9bfb-ad1eb2b23373%2Fdynamicpopulate0CS.pdf&ei=9HCDSM63EoOY6gPA4LzIAg&usg=AFQjCNEQIIr4KgXEbLrP7J9Qfki8qWBLPw&sig2=4zaheld50bcu1_jJvHOHzA

For me it works

Thanks,
zvasanth

erion

In reply to Maddus Mattus

#May 8th, 2008 @ 12:12 AM

Hello. I am currently facing the need to dynamically generate a long detailed report with data retrieved from a database in an ASPNET 3.5 project in which I already use the AJAX Control Toolkit intensively. The data is provided by an ASPNET web service. The generated report is static and meant to be printed. My problem is that the data retrieval process takes about 10-15 seconds because of the database query execution time. I have the need to make the report page appear faster. I was wondering if it's possible for the report page to appear immediately with blank data and for the dynamic data to be written in the page as they arrive. In the page the data is contained in html tables with Label server controls in them and everything is inside an UpdatePanel. The report is made of different sections for each of which I have build a separate web method to provide the data. I have tried the asynchronous calls to the web service that provides the data, handling the task completion event for each of the methods, but the page doesn't load until all the data has arrived.
What solutions would you suggest?