Thursday 12 December 2013

How to use Ajax Tabcontainer in asp.net?



In this article I will explain how to use Ajax Tabcontainer in asp.net.

Every Tab container contains multiple Tab Panels. We can declare our asp controls between the Tab Panels.

One more thing don't hesitate to learn the post completely after seen the length of the post because it's huge for looking but nothing is there just design only the page contains 3 TabPanels that's why code is more and it's very easy to work with TabContainer

Now we can see how we can use ajax tab container in our application First add AjaxControlToolkit reference to your application and add 

<%@ Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" tagPrefix=" ajaxtoolkit " %>


Below is the tabcontainer code for designing. Every tabcontainer contains multiple TabPanels. We can declare our asp controls between the TabPanels.

<ajaxtoolkit:tabcontainer id="tcImport" runat="server" autopostback="false" width="80%"
            height="200px" activetabindex="0">
                    <ajaxToolkit:TabPanel runat="server" ID="tpImport" HeaderText="Send SMS">
                        <ContentTemplate>
                            <table width="1000px">
                                <tr>
                                    <td>
                                   
                                        Import Excel data for send SMS :
                                        <asp:FileUpload runat="server" ID="fuUpload" />
                                    </td>
                                </tr>
                                <tr>
                                    <td height="20px">
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:Button Text="Import & Send SMS" runat="server" ID="btnImport" OnClick="btnImport_Click"
                                            />
                                        &nbsp;&nbsp;&nbsp;
                                        <asp:Button Text="Cancel" runat="server" ID="btnImportCancel" OnClick="btnImportCancel_Click"
                                             />
                                    </td>
                                </tr>
                               
                            </table>
                        </ContentTemplate>
                    </ajaxToolkit:TabPanel>
                    <ajaxToolkit:TabPanel runat="server" ID="TabPanel1" HeaderText="Customized SMS">
                        <ContentTemplate>
                            <table width="1000px">
                                <tr>
                                    <td>
                                        Message :
                                        <asp:TextBox runat="server" ID="txtMessage" TextMode="MultiLine" Height="100px" Width="400px"></asp:TextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td height="20px">
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:Button Text="Send" runat="server" ID="btnSendSMS" OnClick="btnSend_Click"  />
                                        &nbsp;&nbsp;&nbsp;
                                        <asp:Button Text="Cancel" runat="server" ID="btnCancelSMS" OnClick="btnCancelSMS_Click"
                                             />
                                    </td>
                                </tr>
                            </table>
                        </ContentTemplate>
                    </ajaxToolkit:TabPanel>
                </ajaxtoolkit:tabcontainer>




No comments:

Post a Comment