Ajax Tab Control has lots of properties but not having the onTabIndexChanged server event. When it is required to implement this event we can use its client side event.
You can download the AjaxControlToolkit DLL September-09 release from
here.
In the attached Project I have introduced some demo of use of update panel that prevent from postback and refresh the info without a postback.
So back to the topic If you want to cause the Changing of tab causing postback you simply have to put the following JavaScript code to you page where you have added the tab control
<script type="text/javascript"
language="javascript">
function clientActiveTabChanged(sender, args) {
// trigger the
async-postback
if (sender.get_activeTabIndex() == 0) {
// load tab1
__doPostBack('Button3', '');
}
else if (
sender.get_activeTabIndex() == 1) {
// load tab2
__doPostBack('Button1', '');
}
}
</script>
The function _doPostBack() take the reference of any control to initialize the postback. Here I have used the Button3 that is on first tab and button 1 that is on second tab.
In the above scenario I have used update panel to show the Ajax Callback.
The aspx page will designed like this for this:
<form id="form1"
runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1"
runat="server">
</asp:ScriptManager><div class="example"
style="float:left">
Change the Tab
and see the server side code executed
</div>
<div style="clear:both">
<ajaxToolkit:TabContainer runat="server" ID="Tabs" Height="138px" OnClientActiveTabChanged="clientActiveTabChanged" ActiveTabIndex="0"
Width="402px">
<ajaxToolkit:TabPanel runat="server"
ID="Panel1"
HeaderText="Signature
and Bio">
<ContentTemplate>
<asp:UpdatePanel ID="updatePanel1"
runat="server">
<ContentTemplate>
<table>
<tr>
<td>
Signature:</td>
<td>
<asp:TextBox ID="signatureText"
runat="server"
/>
</td>
</tr>
<tr>
<td>
Bio:</td>
<td>
<asp:TextBox ID="bioText"
runat="server"
/> </td>
</tr>
</table>
<asp:Button ID="Button3" OnClick=" Button3_Click" runat="Server" Text="Save" />
<br
/><br />
Hit Save to cause a postback from an update panel inside the tab panel.<br />
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="server"
ID="Panel3"
HeaderText="Email"
>
<ContentTemplate>
Email: <asp:TextBox ID="emailText"
runat="server"
/>
<asp:Button ID="Button1"
OnClick="
Button2_Click" runat="server" Text="Save"
/>
Hit
Save to cause a full postback.
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
<asp:UpdatePanel ID="UpdatePanel2"
runat="server">
<ContentTemplate>
Result: <asp:Label ID="Label1" runat="server" Text=""></asp:Label><br />
Click the
button for postback and Ajax Callback ==> : <asp:Label ID="Label2" runat="server" Text=""></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</form>
The code behind .cs file actions are:
protected void Page_Load(object sender, EventArgs
e)
{
if (ScriptManager1.IsInAsyncPostBack || IsPostBack)
{
int index = Tabs.ActiveTabIndex;
Label1.Text = "Selected Tab : " +
Tabs.ActiveTab.HeaderText;
Label2.Text = "";
}
}
protected void Button2_Click(object sender, EventArgs
args)
{
Label2.Text = " Tab 2 seleted [Message from Postback]";
}
protected void Button3_Click(object sender, EventArgs
args)
{
Label2.Text = " Tab 1 seleted [Message using Ajax Callback]";
}
This tutorial is for showing the functionality of tab control and creating your own custom postback from client side. And also Ajax update panel is introduced to show the partial refreshing of page.
Hope it was helpful to some extent.
You can also download the source project for this article.
Was my effort good ??? Comment Please....