0

I have one page with ajax tab container and the content of the tabcontainer should be place in different pages.For this i have used the following code

<asp:Tabcontainer ID="Tabcontainer1" runat="server" AutoPostBack="true" OnActiveTabChanged="tabChanged">
    <asp:TabPanel ID="panel1" runat="server" HeaderText="Panel1" >
        <ContentTemplate>
             <asp:ContentPlaceHolder ID="Panel1content" runat="server"  >
             </asp:ContentPlaceHolder>
        </ContentTemplate>
    </asp:TabPanel>
    <asp:TabPanel ID="Panel2" runat="server" HeaderText="Panel2">
        <ContentTemplate>
            <asp:ContentPlaceHolder ID="Panel2content" runat="server">
            </asp:ContentPlaceHolder>
        </ContentTemplate>
    </asp:TabPanel>
    <asp:TabPanel ID="Panel3" runat="server" HeaderText="Panel3">
        <ContentTemplate>
            <asp:ContentPlaceHolder ID="Panel3content" runat="server" >
            </asp:ContentPlaceHolder>
        </ContentTemplate>
    </asp:TabPanel>
</asp:Tabcontainer>

In the content page of the master page i have placed the content.
Example one content page is as follows:

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<asp:Content ID="head" ContentPlaceHolderID="head" runat="server" ></asp:Content>
<asp:Content ID="body" runat="server" ContentPlaceHolderID="Panel1content">
    <asp:Label ID="Lbl1" runat="server" Text="Panel1"></asp:Label>
</asp:Content>

Second content page is as follows:

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<asp:Content ID="head" ContentPlaceHolderID="head" runat="server" >
</asp:Content>
<asp:Content ID="body" runat="server" ContentPlaceHolderID="Panel2content">
    <asp:Label ID="Lbl1" runat="server" Text="Panel2"></asp:Label>
</asp:Content>

third content page is as follows:

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<asp:Content ID="head" ContentPlaceHolderID="head" runat="server" >
</asp:Content>
<asp:Content ID="body" runat="server" ContentPlaceHolderID="Panel3content">
     <asp:Label ID="Lbl1" runat="server" Text="Panel3"></asp:Label>
</asp:Content>

The problem is that when tried to open the individual pages it is working fine but when navigating to other tab panel from the same page the content in the tab panel is not displayed. How to solve this issue??

Please Help me !!..

Thanks In Advance...
Sushmaja Arumalla.

2
Contributors
2
Replies
8
Views
3 Years
Discussion Span
Last Post by Sals
0

Here I'm not using the tabcontainer control because it is meaning less to make postback using ajax controls.Using some css styles I designed the tab container and redirecting pages accordingly.Sample code is as follows

/* root element for tabs */
ul.css-tabs{margin:0 !important;padding:0;height:30px;border-bottom:1px solid #666;}
/* single tab */
ul.css-tabs li {float:left;padding:0;margin:0;list-style-type:none;}
/* link inside the tab. uses a background image */
ul.css-tabs a{float:left;font-size:13px;display:block;padding:5px 30px;text-decoration:none;border:1px solid #666;
border-left:0px;border-bottom:0px;height:18px;background: #F5F5F5; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F5F5F5', endColorstr='#BEBEBE'); /* for IE */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F5F5F5), to(#BEBEBE), color-stop(.6,#999999)); /* for webkit browsers */
background: -moz-linear-gradient(top, #F5F5F5, #BEBEBE); /* for firefox 3.6+ */
color:#000;position:relative;top:1px;outline:0;}
ul.css-tabs a span{font-family:Calibri, Arial, Helvetica, sans-serif;color:Black;font-size:100%;}
ul.css-tabs #first{border-left:1px solid #666;}
ul.css-tabs a:hover {background: #ffffff; /* for non-css3 browsers */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff'); /* for IE */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#ffffff), color-stop(.6,#ffffff)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ffffff, #ffffff); /* for firefox 3.6+ */color:#000;}
ul.css-tabs a.current{border-bottom:none 0px;color:#000;ursor:default;background: #ffffff; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff'); /* for IE */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#ffffff), color-stop(.6,#ffffff)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ffffff, #ffffff); /* for firefox 3.6+ */margin-bottom:5px;height: 19px;/* height: 20px;margin-top: -2px;*/}

These are the css styles.
Master page is as follows:

<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <link href="Styles/Tabcontainer.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <ul class="css-tabs">
<li><a id="first" href="~/WebForm2.aspx" runat="server" >
<asp:Label ID="lblTab1" runat="server" Text="Tab1" /></a></li>
<li><a id="second" href="~/WebForm3.aspx" runat="server" >
<asp:Label ID="lblTab2" runat="server" Text="Tab2" /></a></li>
<li><a id="third" href="~/WebForm4.aspx" runat="server">
<asp:Label runat="server" ID="lblTab3" Text="Tab3"></asp:Label>
</a></li>
 </ul>
<div class="css-panes">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</div>
    </div>
    </div>
    </form>
</body>

The content pages designer is same but on Page_Load the following 2 lines are to be written

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace Sample
{
    public partial class WebForm2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            HtmlAnchor Tabid = (HtmlAnchor)(this.Master).FindControl("first");
            Tabid.Attributes["class"] = "current";
        }
    }
}
0

Put the Tab container in the master Page and in child pages have the individual tab activated of the master page, this should be easy.

-mark this as an answer if it solves your problem.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.