AJAX Tab Control Event Handling ...

I had been looking at doing something special with the tab control, so I was trying to learn some of the events in preparation for what I was doing, and am going to post some of what you can do with the tab controls and control extenders that are a part of the AJAX Control Toolkit. This particular control I was testing was the tab container, which fires a client-side active tab changed event. The tab container below uses a javascript event handler defined in a script, as we'll get to soon.

I had been looking at doing something special with the tab control, so I was trying to learn some of the events in preparation for what I was doing, and am going to post some of what you can do with the tab controls and control extenders that are a part of the AJAX Control Toolkit.  This particular control I was testing was the tab container, which fires a client-side active tab changed event.  The tab container below uses a javascript event handler defined in a script, as we will get to soon.

<ajax:TabContainer ID="tc" runat="server" ActiveTabIndex="0" OnClientActiveTabChanged="Tab_SelectionChanged">

<ajax:TabPanel ID="t1" runat="server" HeaderText="Test1">

<ContentTemplate>

Some content

</ContentTemplate>

</ajax:TabPanel>

<ajax:TabPanel ID="t2" runat="server" HeaderText="Test2">

<ContentTemplate>

<asp:TextBox ID="txt" runat="server" />

</ContentTemplate>
</ajax:TabPanel>

</ajax:TabContainer>

In order for this to work, a client-side script needs rendered, which can be added to the script manager. The script file has our client event handler as discussed above.  This is the middle step, to register the script file.

<asp:ScriptManager ID="asm" runat="server">

<Scripts>

<asp:ScriptReference Path="~/Scripts.js" />

</Scripts>

</asp:ScriptManager>

Lastly, the following script accesses the tab container.  It simply outputs information about the control raising the event:

/// <reference name="MicrosoftAjax.js"/>
function Tab_SelectionChanged(sender,e)

{
var msg = "Header: " + sender.get_activeTab().get_headerText() + " ";

msg += "Active Index: " + sender.get_activeTabIndex() + " ";
msg += "ID: " + sender.get_element().id + " ";msg += "Page Url: " + sender.get_element().ownerDocument.location.href + " ";

alert(msg);

}

The script above uses a sender property; this is a reference to the tabcontainer AJAX javascript class; note that you can access certain properties of it.  For instance, the get_activeTab is defined on the AJAX javascript class, returning a reference to the AJAX TabPanel javascript class.  The next property is the active tab index, returns a numeric value representing the index.

Third, each javascript class defines a get_element property that returns a reference to the underlying html element.  The last one uses the ownerDocument property that gains reference to the underlying URL (this is not an add-on to javascript).

source: dotnetslackers

 View Full Story.