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?
 
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
 
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
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
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
 
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
 
rema10Author Commented:
Thanks for letting me know.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.