Ajaxcontroltoolkit tabcontainer

P

Peter

ASP.NET 3.5

I hava an Ajaxcontroltoolkit Tabcontainer on my web page and what I am
trying to do is NOT to load all of the data in the Tab Control at the
page_load event.
I want to load data after user clicks on the tab.

How can I create a event on the client side to load the data from the
server?
I've looked at the OnActiveTabChanged property, but that works only on the
post back. I've tried to set the TabControl to AutoPostback, but it's too
slow, I can usually click on serveral tabs before the firstone filres the
click event and that's without loading any data.

I've looked at the onclickentactivetabchanged event, but how do I pass which
Tab was just clicked?


Thank You


Peter
 
V

Vince Xu [MSFT]

Hello,

You can use "get_activeTabIndex" method of tabcontainer behavior to get the
active tab index.


$find("TabContainer1").get_activeTabIndex();


In OnClientActiveTabChanged client event, you can use ASP.Net Ajax to
communicate with Web Method or Page Method to get the data from server and
update the related content via JavaScript DOM. With this approach, I think
it will be better/faster than with doing postback.

Please try the below sample.

<script runat="server" type="text/C#">
[System.Web.Services.WebMethod]
public static string GetContextMethod(int TabIndex) //This is Page
Method, you can also use Web Method for it.
{
string text = "text" + TabIndex.ToString();
return text;
}

</script>
<script type="text/javascript">
function changeActiveTab() {
var index = $find("TabContainer1").get_activeTabIndex(); //get the
current tab index
PageMethods.GetContextMethod(index, onsuccess); //call page method
via Ajax


}
function onsuccess(result) {
var newdata = result;
var index = $find("TabContainer1").get_activeTabIndex();//get the
current tab index
$find("TabContainer1").get_tabs()[index].get_element().innerHTML =
newdata;//update the related tab content

}

</script>

<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager runat="Server"
EnablePartialRendering="true" ID="ScriptManager1"
EnablePageMethods="true"/>
<ajaxToolkit:TabContainer runat="server" ID="TabContainer1"
OnClientActiveTabChanged="changeActiveTab"
ActiveTabIndex="0">
<ajaxToolkit:TabPanel runat="server" ID="TabPanel1"
HeaderText="TabPanel1">
<ContentTemplate>
TabPanel1
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="server" ID="TabPanel2"
HeaderText="TabPanel2">
<ContentTemplate>
TabPanel2
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="server" ID="TabPanel3"
HeaderText="TabPanel3">
<ContentTemplate>
TabPanel3
<asp:Label ID="Label1" runat="server"
Text="Label"></asp:Label>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</form>
</body>


To get the further information about Ajax with Web Service you can check
http://dotnetslackers.com/columns/ajax/ASPNETAjaxWebService.aspx.


AjaxControlToolkit is following Microsoft Public License (Ms-PL), which is
out of the support boundaries of our managed newsgroups. Please post it to
http://forums.asp.net/1022.aspx if you'd like. It is not managed, but this
forum will provide support for AjaxControlToolkit professionally.
AjaxControlToolkit License:
http://www.codeplex.com/AjaxControlToolkit/license
MSDN Newsgroup Support Boundary:
http://blogs.msdn.com/msdnts/archive/2006/11/08/msdn-service-introduction.as
px


Sincerely,

Vince Xu

Microsoft Online Support


==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/en-us/subscriptions/aa948868.aspx#notifications.

MSDN Managed Newsgroup support offering is for non-urgent issues where an
initial response from the community or a Microsoft Support Engineer within
2 business day is acceptable. Please note that each follow up response may
take approximately 2 business days as the support professional working with
you may need further investigation to reach the most efficient resolution.
The offering is not appropriate for situations that require urgent,
real-time or phone-based interactions. Issues of this nature are best
handled working with a dedicated Microsoft Support Engineer by contacting
Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/en-us/subscriptions/aa948874.aspx
==================================================
 
P

Peter

Thank You very much I will try this!


Vince Xu said:
Hello,

You can use "get_activeTabIndex" method of tabcontainer behavior to get
the
active tab index.


$find("TabContainer1").get_activeTabIndex();


In OnClientActiveTabChanged client event, you can use ASP.Net Ajax to
communicate with Web Method or Page Method to get the data from server and
update the related content via JavaScript DOM. With this approach, I think
it will be better/faster than with doing postback.

Please try the below sample.

<script runat="server" type="text/C#">
[System.Web.Services.WebMethod]
public static string GetContextMethod(int TabIndex) //This is Page
Method, you can also use Web Method for it.
{
string text = "text" + TabIndex.ToString();
return text;
}

</script>
<script type="text/javascript">
function changeActiveTab() {
var index = $find("TabContainer1").get_activeTabIndex(); //get the
current tab index
PageMethods.GetContextMethod(index, onsuccess); //call page method
via Ajax


}
function onsuccess(result) {
var newdata = result;
var index = $find("TabContainer1").get_activeTabIndex();//get the
current tab index
$find("TabContainer1").get_tabs()[index].get_element().innerHTML =
newdata;//update the related tab content

}

</script>

<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager runat="Server"
EnablePartialRendering="true" ID="ScriptManager1"
EnablePageMethods="true"/>
<ajaxToolkit:TabContainer runat="server" ID="TabContainer1"
OnClientActiveTabChanged="changeActiveTab"
ActiveTabIndex="0">
<ajaxToolkit:TabPanel runat="server" ID="TabPanel1"
HeaderText="TabPanel1">
<ContentTemplate>
TabPanel1
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="server" ID="TabPanel2"
HeaderText="TabPanel2">
<ContentTemplate>
TabPanel2
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="server" ID="TabPanel3"
HeaderText="TabPanel3">
<ContentTemplate>
TabPanel3
<asp:Label ID="Label1" runat="server"
Text="Label"></asp:Label>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</form>
</body>


To get the further information about Ajax with Web Service you can check
http://dotnetslackers.com/columns/ajax/ASPNETAjaxWebService.aspx.


AjaxControlToolkit is following Microsoft Public License (Ms-PL), which is
out of the support boundaries of our managed newsgroups. Please post it to
http://forums.asp.net/1022.aspx if you'd like. It is not managed, but this
forum will provide support for AjaxControlToolkit professionally.
AjaxControlToolkit License:
http://www.codeplex.com/AjaxControlToolkit/license
MSDN Newsgroup Support Boundary:
http://blogs.msdn.com/msdnts/archive/2006/11/08/msdn-service-introduction.as
px


Sincerely,

Vince Xu

Microsoft Online Support


==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/en-us/subscriptions/aa948868.aspx#notifications.

MSDN Managed Newsgroup support offering is for non-urgent issues where an
initial response from the community or a Microsoft Support Engineer within
2 business day is acceptable. Please note that each follow up response may
take approximately 2 business days as the support professional working
with
you may need further investigation to reach the most efficient resolution.
The offering is not appropriate for situations that require urgent,
real-time or phone-based interactions. Issues of this nature are best
handled working with a dedicated Microsoft Support Engineer by contacting
Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/en-us/subscriptions/aa948874.aspx
==================================================
 
P

Peter

The problem is I have GridView on one of the Tabs, would using JavaScript
DOM instead a postback still will be a good idea to populate the GridView?

Vince Xu said:
Hello,

You can use "get_activeTabIndex" method of tabcontainer behavior to get
the
active tab index.


$find("TabContainer1").get_activeTabIndex();


In OnClientActiveTabChanged client event, you can use ASP.Net Ajax to
communicate with Web Method or Page Method to get the data from server and
update the related content via JavaScript DOM. With this approach, I think
it will be better/faster than with doing postback.

Please try the below sample.

<script runat="server" type="text/C#">
[System.Web.Services.WebMethod]
public static string GetContextMethod(int TabIndex) //This is Page
Method, you can also use Web Method for it.
{
string text = "text" + TabIndex.ToString();
return text;
}

</script>
<script type="text/javascript">
function changeActiveTab() {
var index = $find("TabContainer1").get_activeTabIndex(); //get the
current tab index
PageMethods.GetContextMethod(index, onsuccess); //call page method
via Ajax


}
function onsuccess(result) {
var newdata = result;
var index = $find("TabContainer1").get_activeTabIndex();//get the
current tab index
$find("TabContainer1").get_tabs()[index].get_element().innerHTML =
newdata;//update the related tab content

}

</script>

<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager runat="Server"
EnablePartialRendering="true" ID="ScriptManager1"
EnablePageMethods="true"/>
<ajaxToolkit:TabContainer runat="server" ID="TabContainer1"
OnClientActiveTabChanged="changeActiveTab"
ActiveTabIndex="0">
<ajaxToolkit:TabPanel runat="server" ID="TabPanel1"
HeaderText="TabPanel1">
<ContentTemplate>
TabPanel1
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="server" ID="TabPanel2"
HeaderText="TabPanel2">
<ContentTemplate>
TabPanel2
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="server" ID="TabPanel3"
HeaderText="TabPanel3">
<ContentTemplate>
TabPanel3
<asp:Label ID="Label1" runat="server"
Text="Label"></asp:Label>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</form>
</body>


To get the further information about Ajax with Web Service you can check
http://dotnetslackers.com/columns/ajax/ASPNETAjaxWebService.aspx.


AjaxControlToolkit is following Microsoft Public License (Ms-PL), which is
out of the support boundaries of our managed newsgroups. Please post it to
http://forums.asp.net/1022.aspx if you'd like. It is not managed, but this
forum will provide support for AjaxControlToolkit professionally.
AjaxControlToolkit License:
http://www.codeplex.com/AjaxControlToolkit/license
MSDN Newsgroup Support Boundary:
http://blogs.msdn.com/msdnts/archive/2006/11/08/msdn-service-introduction.as
px


Sincerely,

Vince Xu

Microsoft Online Support


==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/en-us/subscriptions/aa948868.aspx#notifications.

MSDN Managed Newsgroup support offering is for non-urgent issues where an
initial response from the community or a Microsoft Support Engineer within
2 business day is acceptable. Please note that each follow up response may
take approximately 2 business days as the support professional working
with
you may need further investigation to reach the most efficient resolution.
The offering is not appropriate for situations that require urgent,
real-time or phone-based interactions. Issues of this nature are best
handled working with a dedicated Microsoft Support Engineer by contacting
Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/en-us/subscriptions/aa948874.aspx
==================================================
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,009
Latest member
GidgetGamb

Latest Threads

Top