Populate tab in asynchronous mode using AJAX | Tech Off

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

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

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

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 @ 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