Friday, 1 July 2011

Enhancing the functionality with Ajax Tab Control

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.

1.gif
 
2.gif

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

No comments:

Post a Comment