Friday, April 15, 2011

AJAX TabContainer Tutorial

An ASP.NET AJAX TabContainer creates a set of Tabs that can be used to save screen space and organize content. The TabContainer contains a number of TabPanel controls. You can place your controls inside each TabPanel. In this article, we will explore some common tips and tricks with the ASP.NET AJAX TabContainer control.
1. How to Create a ASP.NET AJAX TabContainer with Tab Panels

Assuming you have AJAX Control Toolkit for 3.5 installed, Open Visual Studio 2008 > File > New Website > ‘ASP.NET WebSite’ > Enter a name and location for the project > Click Ok.
Drag and drop a <ScriptManager> from the Toolbox to the page. Now drag and drop a TabContainer to the page and using the smart tag, add a few tabpanels. Switch to the source view and add <ContentTemplates> inside each TabPanel. You can now place controls inside the <ContentTemplates>. The code will look similar to the following:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Tab Container Tips & Tricks By Yasser</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>   
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
   
        <cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0">
       
            <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1">
                <ContentTemplate>
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
                    <asp:Button ID="Button1" runat="server" Text="Button" />
                </ContentTemplate>
            </cc1:TabPanel>
           
            <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
                <ContentTemplate>
                    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
                    <asp:Button ID="Button2" runat="server" Text="Button" />
                </ContentTemplate>
            </cc1:TabPanel>
                      
            <cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3">
                <ContentTemplate>
                    <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox><br />
                    <asp:Button ID="Button3" runat="server" Text="Button" />
                </ContentTemplate>
            </cc1:TabPanel>
           
        </cc1:TabContainer>
        <br />
   
    </div>
    </form>
</body>
</html>


2. How to add an image in the Header of each TabPanel in an ASP.NET AJAX TabContainer

Use <HeaderTemplate>.
You can then add an image as shown below:
   <cc1:TabPanel ID="TabPanel1" runat="server">
       <HeaderTemplate>
           <img src="search.jpg" alt="Tab1"/>
       </HeaderTemplate>
       <ContentTemplate>
           <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
       </ContentTemplate>
   </cc1:TabPanel>

1 comments:

Anonymous said...

thanks

Post a Comment

 

2011 ·Code-Studio by yrus.