using tab container in asp.net in VS 2008, using c#

Hello,
I am still a learner in the asp.net world and I am not sure if I am using the tab container right and if it's even possible to use it the way I am doing it now.  So, please point me in the right direction.

Here is what I did:
I created a tabcontainer in the master page.  I then placed the contentholder inside each one of the tab panels' content template.  Then, I go to each one of the content pages and create labels or whatever I want.

My first question:  Is this a right and good thing to do?

My second question(ie. a problem):
1.  My contentholder placed inside the first tab panel shows in the screen correctly.
2.  My contentholder placed inside the second/third/etc tab pnanel doesn't even show up.

Here is my code:
<body>
    <form id="form1" runat="server" style="position: absolute; width: 995px; height: 616px; top: 0px; left: 0px; bottom: 41px;" > 
                 
     <div style="position:absolute;top:45px"          >
    <asp:ToolkitScriptManager ID="ToolkitScriptManager2" runat="server">
    </asp:ToolkitScriptManager>
   
    <asp:TabContainer runat="server" ID="userip" ActiveTabIndex="1" Height="41px" Width="995px"  BackColor="#FFCC66" BorderColor="#0000CC" >
        <asp:TabPanel ID="TabPanel1" runat="server" HeaderText="Input"  CssClass="tabheader" BackColor="Red" Height="600" Width="600">
            <ContentTemplate>
                      <div id="startdiv" style="border: thin solid #0000FF; position:absolute; top: 83px;                           left: 0px; width: 995px; height: 697px; right: -4px; bottom: -749px;  background-color: #FFFFFF;">
     <asp:ContentPlaceHolder ID="start" runat="server"></asp:ContentPlaceHolder>
</div>
            </ContentTemplate>
        </asp:TabPanel>
       
        <asp:TabPanel ID="TabPanel2" runat="server" HeaderText="my second panel"  CssClass="my header" >
            <ContentTemplate>
            <div id="Div1" style="border: thin solid #0000FF; position:absolute; top: 83px; left: 0px; width: 995px; height: 697px; right: -4px; bottom: -749px; background-color: #FFFFFF;">
                <asp:ContentPlaceHolder ID="second" runat="server"></asp:ContentPlaceHolder>
                </div>
            </ContentTemplate>
        </asp:TabPanel>
        <asp:TabPanel ID="TabPanel3" runat="server" HeaderText="SR" CssClass="mytabheader">
        <ContentTemplate>
            <asp:Label ID="Label1" runat="server" Text="this is tab panel three"></asp:Label>
         </ContentTemplate>
       
        </asp:TabPanel>
    </asp:TabContainer>
 
        </div>
       

Thanks for your help.
rema10Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

rajeeshmcaCommented:
Hi rema10,

can u please post ur content pages... I tried it and it was working good....
0
rema10Author Commented:
Hello rajeeshmca.  Thanks for responding.  Please find below my content page for the tab panel 2 and mine is still not working.  Thanks for your help.

<%@ Page Language="C#" MasterPageFile="~/GP-Header.Master" AutoEventWireup="true" CodeBehind="gp.aspx.cs" Inherits="GP.gp" Title="Untitled Page" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="start" runat="server">
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="gp" runat="server">
   
    <div style="position:absolute;top:20px">
<asp:Label ID="gpperc" runat="server" Text="in Perc: " ></asp:Label>
</div>

<div style="position:absolute;top:50px">
<asp:Label ID="gpamnt" runat="server" Text=" in USD: " ></asp:Label>
</div>

<div style="position:absolute;top:80px">
<asp:Label ID="soamnt" runat="server" Text="Sales " ></asp:Label>
</div>



</asp:Content>


0
rema10Author Commented:
There was a typo when I pasted the code in my comment.  The contentplaceholderid for 'Content3' should say 'second' in my comment.

Hope you will be able to help me in making this work - Thanks.
0
Rowby Goren Makes an Impact on Screen and Online

Learn about longtime user Rowby Goren and his great contributions to the site. We explore his method for posing questions that are likely to yield a solution, and take a look at how his career transformed from a Hollywood writer to a website entrepreneur.

rajeeshmcaCommented:
Try the following code... The problem was with using the Position absolute style......

masterpage
--------------------

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage2.master.cs"
    Inherits="MasterPage2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="Scr1" runat="server">
    </asp:ScriptManager>
        <div style="position: absolute; top: 45px">
            <asp:TabContainer runat="server" ID="userip" ActiveTabIndex="1" Width="995px"
                BackColor="#FFCC66" BorderColor="#0000CC">
                <asp:TabPanel ID="TabPanel1" runat="server" HeaderText="Input" CssClass="tabheader"
                    BackColor="Red" Height="600" Width="600">
                    <ContentTemplate>
                        <div id="startdiv" style="border: thin solid #0000FF; width: 100%; background-color: #FFFFFF;">
                            <asp:ContentPlaceHolder ID="start" runat="server">
                            </asp:ContentPlaceHolder>
                        </div>
                    </ContentTemplate>
                </asp:TabPanel>
                <asp:TabPanel ID="TabPanel2" runat="server" HeaderText="my second panel" CssClass="my header">
                    <ContentTemplate>
                        <div id="Div1" style="border: thin solid #0000FF; width: 100%;  background-color: #FFFFFF;">
                            <asp:ContentPlaceHolder ID="second" runat="server">
                            </asp:ContentPlaceHolder>
                        </div>
                    </ContentTemplate>
                </asp:TabPanel>
                <asp:TabPanel ID="TabPanel3" runat="server" HeaderText="SR" CssClass="mytabheader">
                    <ContentTemplate>
                        <asp:Label ID="Label1" runat="server" Text="this is tab panel three"></asp:Label>
                    </ContentTemplate>
                </asp:TabPanel>
            </asp:TabContainer>
        </div>
    </form>
</body>
</html>

Content Page:
------------------------

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TabInsideMasterPage.aspx.cs"
    Inherits="TabInsideMasterPage" MasterPageFile="~/MasterPage2.master" %>

<asp:Content ID="Content2" ContentPlaceHolderID="start" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="second" runat="server">
    <div style="">
        <asp:Label ID="gpperc" runat="server" Text="in Perc: "></asp:Label>
    </div>
    <div style="">
        <asp:Label ID="gpamnt" runat="server" Text=" in USD: "></asp:Label>
    </div>
    <div style="">
        <asp:Label ID="soamnt" runat="server" Text="Sales "></asp:Label>
    </div>
</asp:Content>
0
rema10Author Commented:
Thanks again for your help.

I did try as you had suggested but, that didn't work.  Did a whole bunch of testing this morning.

Here is something interesting.  If I have 2 tab panels and aspx pages associated with each one of them, whichever panel I choose as the start page shows all the labels and controls and the other tab panel doesn't.

If tab panel1 is the start page then I see all the labels but, I don't see any in the second panel.
If tab panel2 is the start page, then I see all the labels,but, I don't see any in the first panel.

It is almost as if only the first active panel gets loaded with info.

Please let me know how to go further from here.

Thanks for your help and time.
0
rajeeshmcaCommented:
can u please post ur recent master and content page... For me its working good...
0
rema10Author Commented:
I noticed it earlier itself.  But, I forgot to mention.

1.  You have used the 'scriptmanager'  and I am using the 'Toolkitscriptmanager'.  When, I use the 'scriptmanager', the application produces and error.

Please see below my master and content pages.  I created a simple one to resolve the issue.  Thanks again for your valuable time.

MASTER:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Mymaster.master.cs" Inherits="tabtest.Mymaster" %>

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

<!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>Untitled Page</title>
    <asp:ContentPlaceHolder ID="head" runat="server">
     
   
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
    <div>
       
            <asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="1"
                Height="516px" Width="811px">
                <asp:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1">
                    <ContentTemplate>
                    <div style="height:150px; width:150px">
                            <asp:ContentPlaceHolder ID="panel1" runat="server">
                            </asp:ContentPlaceHolder>
                            </div>
                   
                   
            </ContentTemplate>
                   
               
        </asp:TabPanel>
                <asp:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
                    <ContentTemplate>
                    <div style="height:150px; width:150px">
                            <asp:ContentPlaceHolder ID="panel2" runat="server">
                            </asp:ContentPlaceHolder>
                     </div>
                   
                   
            </ContentTemplate>
                   
               
</asp:TabPanel>
                <asp:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3">
                </asp:TabPanel>
           
            </asp:TabContainer>
       
       
    </div>
    </form>
</body>
</html>


CONTENT PAGE 1:
===================

<%@ Page Language="C#" MasterPageFile="~/Mymaster.master" AutoEventWireup="true" CodeBehind="first.aspx.cs" Inherits="tabtest.first" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="panel1" runat="server">
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="panel2" runat="server">
</asp:Content>


CONTENT PAGE 2:
===============================================================
<%@ Page Language="C#" MasterPageFile="~/Mymaster.master" AutoEventWireup="true" CodeBehind="second.aspx.cs" Inherits="tabtest.second" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="panel1" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="panel2" runat="server">
    <asp:Label ID="Label1" runat="server" Text="THIS IS MY SECOND PANEL"></asp:Label>

</asp:Content>
0
rajeeshmcaCommented:
HI,,

I tried with ur code... It worked correctly except that i have removed the contentPlaceHolder (Head)

<asp:ContentPlaceHolder ID="head" runat="server">
     
   
    </asp:ContentPlaceHolder>

Try it out... I dont think we can have a asp control within the head tag...
0
rema10Author Commented:
Hi,

I tried again with the 'head' contentplaceholder removed from both the content pages.  It's still not working.     I don't see the label in the second panel.

1.  I am using VS 2008.

Is there anything else I should be doing.?

Thanks.
0
rajeeshmcaCommented:
Remove the ContentPlaceHolder inside the <head> section from the master page also and just try it out
0
rema10Author Commented:
Hi,

I did try it again without the <head> section from the master page and still having the same problems.  I have attached here the tab panels that come up when I run the application.

1. Image 'first' shows the label in the first panel.
2.  Image 'second' does not show the label in the second panel.

Thanks.
first.jpg
second.jpg
0
rajeeshmcaCommented:
Try with the following and give ur result

master page
---------------

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage2.master.cs"
    Inherits="MasterPage2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <div>
            <asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="1" Height="516px"
                Width="811px">
                <asp:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1">
                    <ContentTemplate>
                        <div style="height: 150px; width: 150px">
                            <asp:ContentPlaceHolder ID="panel1" runat="server">
                            </asp:ContentPlaceHolder>
                        </div>
                    </ContentTemplate>
                </asp:TabPanel>
                <asp:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
                    <ContentTemplate>
                        <div style="height: 150px; width: 150px">
                            <asp:ContentPlaceHolder ID="panel2" runat="server">
                            </asp:ContentPlaceHolder>
                        </div>
                    </ContentTemplate>
                </asp:TabPanel>
                <asp:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3">
                </asp:TabPanel>
            </asp:TabContainer>
        </div>
    </form>
</body>
</html>

content Page
----------------

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TabInsideMasterPage.aspx.cs"
    Inherits="TabInsideMasterPage" MasterPageFile="~/MasterPage2.master" %>

<asp:Content ID="Content2" ContentPlaceHolderID="panel1" runat="server">
<asp:Label ID="Label1" runat="server" Text="THIS IS MY First PANEL"></asp:Label>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="panel2" runat="server">
    <asp:Label ID="Label2" runat="server" Text="THIS IS MY SECOND PANEL"></asp:Label>
</asp:Content>


firstPanel.JPG
SecondPanel.JPG
0
rema10Author Commented:
But, you are using only one contentpage and placing both the labels in that content page for each of the panels.

What I would like to have is:  Create 2 separate page for each of the contentplaceholders. eg: firstpanel.aspx for Contentplaceholder ID=panel1 and secondpanel.aspx for contentplaceholder ID=panel2.  

And when I select the tab panels, the content page that is meant for that tab panel should come up.
0
rajeeshmcaCommented:
Hi rema10,

I dont think thts the right way of using master page..... The problem with ur code is...

1. U will be executing only the  firstpanel.aspx and so only its content will be displayed...

If u r going to use different pages for each tab, then onchnage of the Tab u should redirect to their respective pages.... and thats not good way of using master page......
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
rema10Author Commented:
Thanks for letting me know.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.