My aim is to implement Tabstructure using AJAX tabcontainer.The TabContainer should be in the Masterpages and Content for Tabpanels should be in corressponding content pages.I have tried to implement the below way.
Before all this I have a login page where on valid user credentials I am redirecting to Tab1.aspx
So,Content in tab1.aspx corresponding to Tab1 is displayed properly,but if i click on other two tabs,they just appear for a split second and again goes back to tab1 but content in tab1.aspx is lost i.e it shows empty.
Please correct me where am I missing the logic and suggest me ways to implement my aim.
You do not necessarily use AJAX control toolkit's tabs, because you are utilizing Response.Redirect and you have 3 pages, each of which is a page. Style all the three pages like a TabContainer, the difference is the tab that is activated.
Thank you for the suggestion,but my aim is to use AJAX Tabcontainer.I mean like, I want to implement a functionality of AJAX Tabcontainer in Masterpage and content in different content pages.From,my above code I am able to go some extent but missing some
basic logic.So,Can you tell me where am I going wrong?
What the TabContainer does is to hold different parts of pages in a tabbed manner. All these content are in the same page, so when you try to use Response.Redirect, it may not be successful.
If you want to change to a new tab, and and the same time update the content in this tab, then consider UpdatePanel. After user signs in, trigger the UpdatePanel to update.
Thanks for the reply.So you mean content in different content pages for AJAX tabcontainer is not possible.?If its so then I have no other option than to use style for master page & use href etc (or) jquery (or) anyother 3rd party tab implementations.
You advised me to use the update panel instead of the contentplace holder,in any case how is it possible that i can move/redirect from one page to an another for changing content in update panel by click on each tab.This comes back to square one of my query.
If you are trying the redirect to a new page, you don't necessarily use TabContainer. You may just style the tabbed menu by CSS. You can look at this example,
http://odyniec.net/articles/css-based-tabbed-menu/ It is much straight forward.
The TabContainer is designed originally not for full post back purpose, though it offers AutoPostBack feature. If you do not want a full post back, in this case, you may consider UpdatePanel.
/* 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;
}
The tab functionality is accomplished,but now my problem is that there is no difference between active tab and other tabs.How can I highlight selected Tab.?I could find from forums that i should use a selected/current class in css like I have made below,but
how can I apply this to activetab dynamically?
SAICHANDRA
0 Points
5 Posts
Ajax Tabcontainer in MasterPage
Mar 30, 2012 06:33 AM|LINK
Hi,
My aim is to implement Tabstructure using AJAX tabcontainer.The TabContainer should be in the Masterpages and Content for Tabpanels should be in corressponding content pages.I have tried to implement the below way.
In Masterpage.aspx I have the following code
<ajaxToolKit:TabContainer ID="MainTabContainer" runat="server" Width="98%"
AutoPostBack="true" OnActiveTabChanged="Tabchange_Click" >
<ajaxToolKit:TabPanel runat="server" ID="TabPanel1" HeaderText="Tab1" TabIndex="0">
<ContentTemplate>
<asp:ContentPlaceHolder ID="ContentPlaceHolderTab1" runat="server">
</asp:ContentPlaceHolder>
</ContentTemplate>
</ajaxToolKit:TabPanel>
<ajaxToolKit:TabPanel ID="TabPanel2" runat="server" HeaderText="Tab2" TabIndex="1">
<ContentTemplate>
<asp:ContentPlaceHolder ID="ContentPlaceHolderTab2" runat="server" >
</asp:ContentPlaceHolder>
</ContentTemplate>
</ajaxToolKit:TabPanel>
<ajaxToolKit:TabPanel ID="TabPanel3" runat="server" HeaderText="Tab3" TabIndex="2">
<ContentTemplate>
<asp:ContentPlaceHolder ID="ContentPlaceHolderTab3" runat="server" >
</asp:ContentPlaceHolder>
</ContentTemplate>
</ajaxToolKit:TabPanel>
</ajaxToolKit:TabContainer>
The content for these contentplaceholders is written in corresponding content pages tab1.aspx,tab2.aspx & tab3.aspx
In Materpage.aspx.cs,I have the following code
protected void Tabchange_Click(object sender, EventArgs e)
{
switch (MainTabContainer.ActiveTab.TabIndex)
{
case 0:
MainTabContainer.ActiveTabIndex = 0;
Response.Redirect("Tab1..aspx");
break;
case 1:
MainTabContainer.ActiveTabIndex = 1;
Response.Redirect("Tab2.aspx");
break;
case 2:
MainTabContainer.ActiveTabIndex = 2;
Response.Redirect("Tab3.aspx");
break;
}
}
Before all this I have a login page where on valid user credentials I am redirecting to Tab1.aspx
So,Content in tab1.aspx corresponding to Tab1 is displayed properly,but if i click on other two tabs,they just appear for a split second and again goes back to tab1 but content in tab1.aspx is lost i.e it shows empty.
Please correct me where am I missing the logic and suggest me ways to implement my aim.
Thanks in advance.
BU XI - MSFT
All-Star
22367 Points
2704 Posts
Microsoft
Re: Ajax Tabcontainer in MasterPage
Apr 03, 2012 04:23 AM|LINK
Hello
You do not necessarily use AJAX control toolkit's tabs, because you are utilizing Response.Redirect and you have 3 pages, each of which is a page. Style all the three pages like a TabContainer, the difference is the tab that is activated.
If you have any feedback about my replies, please contact msdnmg@microsoft.com.
Microsoft One Code Framework
SAICHANDRA
0 Points
5 Posts
Re: Ajax Tabcontainer in MasterPage
Apr 03, 2012 06:59 AM|LINK
Hello,
Thank you for the suggestion,but my aim is to use AJAX Tabcontainer.I mean like, I want to implement a functionality of AJAX Tabcontainer in Masterpage and content in different content pages.From,my above code I am able to go some extent but missing some basic logic.So,Can you tell me where am I going wrong?
BU XI - MSFT
All-Star
22367 Points
2704 Posts
Microsoft
Re: Ajax Tabcontainer in MasterPage
Apr 04, 2012 03:27 AM|LINK
What the TabContainer does is to hold different parts of pages in a tabbed manner. All these content are in the same page, so when you try to use Response.Redirect, it may not be successful.
If you want to change to a new tab, and and the same time update the content in this tab, then consider UpdatePanel. After user signs in, trigger the UpdatePanel to update.
If you have any feedback about my replies, please contact msdnmg@microsoft.com.
Microsoft One Code Framework
SAICHANDRA
0 Points
5 Posts
Re: Ajax Tabcontainer in MasterPage
Apr 04, 2012 03:04 PM|LINK
Hello..
Thanks for the reply.So you mean content in different content pages for AJAX tabcontainer is not possible.?If its so then I have no other option than to use style for master page & use href etc (or) jquery (or) anyother 3rd party tab implementations.
You advised me to use the update panel instead of the contentplace holder,in any case how is it possible that i can move/redirect from one page to an another for changing content in update panel by click on each tab.This comes back to square one of my query.
BU XI - MSFT
All-Star
22367 Points
2704 Posts
Microsoft
Re: Ajax Tabcontainer in MasterPage
Apr 05, 2012 03:20 AM|LINK
If you are trying the redirect to a new page, you don't necessarily use TabContainer. You may just style the tabbed menu by CSS. You can look at this example, http://odyniec.net/articles/css-based-tabbed-menu/ It is much straight forward.
For MasterPage, user UserControl to hold the content, http://forums.asp.net/p/1374359/2894274.aspx
Or try iframe, each iframe has a aspx page, http://forums.asp.net/p/1439085/3265458.aspx
The TabContainer is designed originally not for full post back purpose, though it offers AutoPostBack feature. If you do not want a full post back, in this case, you may consider UpdatePanel.
If you have any feedback about my replies, please contact msdnmg@microsoft.com.
Microsoft One Code Framework
SAICHANDRA
0 Points
5 Posts
Re: Ajax Tabcontainer in MasterPage
Apr 05, 2012 11:32 AM|LINK
Hi,
Thank you.I beleive I am done with this AJAX Tabcontainer and think that it doesn't work with different content pages.
I have used tabbed menu as per example you have given.
Masterpage looks like this
<ul class="css-tabs">
<li><a id="first" href="Tab1.aspx" runat="server" >
<asp:Label ID="lblTab1" runat="server" Text="Tab1" /></a></li>
<li><a id="second" href="Tab2.aspx">
<asp:Label ID="lblTab2" runat="server" Text="Tab2" /></a></li>
<li><a id="third" href="Tab3.aspx" >
<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>
And css page looks like this
/* 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;
}
The tab functionality is accomplished,but now my problem is that there is no difference between active tab and other tabs.How can I highlight selected Tab.?I could find from forums that i should use a selected/current class in css like I have made below,but how can I apply this to activetab dynamically?
ul.css-tabs a.current
{
border-bottom:none 0px;
color:#000;
cursor: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;*/
}
Thank you in Advance.
SAICHANDRA
0 Points
5 Posts
Re: Ajax Tabcontainer in MasterPage
Apr 09, 2012 09:37 AM|LINK
Hi,
Happy to post the answer..We can achieve this by the writting below code in each of the content pages Page_Load function
HtmlAnchor Tabid = (HtmlAnchor)(this.Master).FindControl("first");
Tabid.Attributes["class"] = "current";
Thank You....