 |
|
|
The control works great for me when there is only one level of folders. I use the control on a masterpage. When I have a folder structure like: root/customers/accounts/ the control can't seem to find the css and defaults to the embedded one. It does not like it when I use an href like "~/css/styles.css" and only seems to work with "../css/styles.css".
Also when I select a sub tab the active tab is no longer highlighted and all my sub tabs disappear.
Please help.
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
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.
I assume you have some basic experience developing ASP.NET AJAX applications and have installed the ASP.NET AJAX Library and ASP.NET Control Toolkit. As of this writing, the toolkit version is Version 1.0.20229 (if you are targeting Framework 2.0, ASP.NET AJAX 1.0 and Visual Studio 2005) and Version 3.0.20229 (if targeting .NET Framework 3.5 and Visual Studio 2008).
All the tips shown below have been created using Version 3.0.20229 (targeting .NET Framework 3.5 and Visual Studio 2008).
Tip 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:
-------------------------------------------
Tab.aspx File
-------------------------------------------
<%@ 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</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>
---------------------------------------------
Tab.aspx.cs
----------------------------------------------
protected void btnLoop_Click(object sender, EventArgs e)
{
AjaxControlToolkit.TabContainer container = (AjaxControlToolkit.TabContainer)TabContainer1;
foreach (object obj in container.Controls)
{
if (obj is AjaxControlToolkit.TabPanel)
{
AjaxControlToolkit.TabPanel tabPanel = (AjaxControlToolkit.TabPanel)obj;
foreach (object ctrl in tabPanel.Controls)
{
if (ctrl is Control)
{
Control c = (Control)ctrl;
foreach (object innerCtrl in c.Controls)
{
if (innerCtrl is System.Web.UI.WebControls.TextBox)
Response.Write(((TextBox)innerCtrl).Text);
}
}
}
}
}
}
---------------------------------------------------
For VB.net use below code
-----------------------------------------------------
Protected Sub btnLoop_Click(ByVal sender As Object, ByVal e As EventArgs)
Dim container As AjaxControlToolkit.TabContainer = CType(TabContainer1, AjaxControlToolkit.TabContainer)
For Each obj As Object In container.Controls
If TypeOf obj Is AjaxControlToolkit.TabPanel Then
Dim tabPanel As AjaxControlToolkit.TabPanel = CType(obj, AjaxControlToolkit.TabPanel)
For Each ctrl As Object In tabPanel.Controls
If TypeOf ctrl Is Control Then
Dim c As Control = CType(ctrl, Control)
For Each innerCtrl As Object In c.Controls
If TypeOf innerCtrl Is System.Web.UI.WebControls.TextBox Then
Response.Write((CType(innerCtrl, TextBox)).Text)
End If
Next innerCtrl
End If
Next ctrl
End If
Next obj
End Sub
IF any problem please let me know.
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
The goal of this article was the control that allows to redirect to a different page when you clicked on a tab. Tabs definitions including URLs are specified in XML.
|
| Sign In·View Thread·PermaLink | 2.00/5 |
|
|
|
|
|
|
I have download the folder
and when buld the project and complie the fild some errors below :
Warning 1 Element 'TabStrip' is not a known element. This can occur if there is a compilation error in the Web site, or the web.config file is missing. \\win-dev\dshukla\dcadmin\TabSubtab\TabStripDemo\MasterPage.master 26 14 dcadmin
Error 2 The type or namespace name 'ControlDesigner' does not exist in the namespace 'System.Web.UI.Design' (are you missing an assembly reference?) \\win-dev\dshukla\dcadmin\TabSubtab\TabStrip\TabStripDesigner.cs 6 58 dcadmin
Please tell me what should I do ..
Thanks Dilip
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
Hi Dilip,
Have you installed ASP.NET AJAX and ASP.NET Ajax Control Toolkit?
You can take from here: http://www.asp.net/ajax/downloads/
If you are running ASP.NET 3.5 then you need to update the project
(please see some of the earlier comments below).
Thanks
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
Yes I am running ASP.NET 3.5,
Problem is with TabStripDesigner.cs inside
----------------------------------
using System;
using System.Web.UI.Design;
using System.Web.UI.HtmlControls;
using System.IO;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.ComponentModel;
namespace AjaxControlToolkit
{
public class TabStripDesigner : System.Web.UI.Design.ControlDesigner
{
public override string GetDesignTimeHtml()
{
return CreatePlaceHolderDesignTimeHtml();
}
}
}
------------------------------------
Description: An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately.
Parser Error Message: Could not load file or assembly 'TabStrip' or one of its dependencies. The system cannot find the file specified.
Source Error:
[No relevant source lines]
Source File: none Line: 0
Assembly Load Trace: The following information can be helpful to determine why the assembly 'TabStrip' could not be loaded.
WRN: Assembly binding logging is turned OFF.
To enable assembly bind failure logging, set the registry value [HKLM\Software\Microsoft\Fusion!EnableLog] (DWORD) to 1.
Note: There is some performance penalty associated with assembly bind failure logging.
To turn this feature off, remove the registry value [HKLM\Software\Microsoft\Fusion!EnableLog].
This is an error what i am facing.
Thanks,
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
Here is what I did to use this control with ASP.NET 3.5:
- In "TabStrip" project in the "References" I updated references to
"AjaxControlToolkit", "System.Web.Extensions" and "System.Web.Extensions.Design" to newer versions
- "TabStripDemo" project I updated the references to "AjaxControlToolkit" and
updated the web.config file (I just replaced the old web.config file with
the web.config file that I took from some of MS Ajax 3.5 samples)"
|
| Sign In·View Thread·PermaLink | 3.00/5 |
|
|
|
|
|
|
|
|
|
In my code behind, I build the tabstrip up without using the xml file. And the first tab will not react to any input. Is it necessary to have the tabstrip built through a xml file??
|
| Sign In·View Thread·PermaLink | 1.00/5 |
|
|
|
|
|
|
Hi how do you get it to work in linking other websites and capturing the content on the masterpage. Thanks
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
Hi. I want to create Tab Strip from database.For that i m using following code.But i am unable to find the current active tab
foreach (DataRow dr in ds.Tables[0].Rows)
{
if (dr["PARENTID"].ToString() == "")
{
Tab t1 = new Tab();
t1.Text = dr["TABNAME"].ToString();
t1.Url = dr["PAGENAME"].ToString();
TabStrip1.Tabs.Add(t1);
child(dr, ds, t1);
}
}
TabStrip1.ActiveTabIndex=0;
}
}
private void child(DataRow dr,DataSet ds,Tab t1)
{
foreach (DataRow dr1 in ds.Tables[0].Rows)
{
if (dr["TABID"].ToString() == dr1["PARENTID"].ToString())
{
TabLink tl = new TabLink();
tl.Text = dr1["TABNAME"].ToString();
tl.Url = dr1["PAGENAME"].ToString();
t1.TabLinks.Add(tl);
}
}
}
aaa
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
Hi,
By default, after clicking the tab, a user will be redirected to the URL, that is specified in the tab's Url property. Alternatively, a handler for "OnActiveItemChanged" event could be provided. Then in this event handler you can access currently selected tab ID and Url.
For example,
Markup:
<act:TabStrip runat="server" ID="TabStrip1" DataFile="~/TabMap.xml" OnActiveItemChanged="OnActiveItemChanged1"
OnClientActiveItemChanged="ClientActiveItemChanged" />
Code behind:
protected void OnActiveItemChanged1(object sender, ActiveItemChangedEventArgs e)
{
Response.Redirect(e.Url);
}
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
|
|
|
Hi sun_rang,
Yes, it is possible. However, you cannot use CSS from article you mentioned above directly. In my implementation I used slightly different than in AjaxToolkit method for rendering tabs, so called "sliding door technique" by Douglas Bowman (http://www.alistapart.com/articles/slidingdoors).
What you can do is to generate custom CSS and attach it to the control like
<TabStrip runat="server" ID="TabStrip1" CssClass="pod_tab" DataFile="~/Data/TabMap.xml" >
The CSS could be like something the following:
/* Tab */
.pod_tab .ajax__tab_header
{
clear:right;
float: right;
margin-top:18px;
}
.pod_tab .ajax__tab_header ul
{
margin ;
padding;
}
.pod_tab .ajax__tab_header li
{
float: left;
background: url(../images/tab/tab-left.gif) no-repeat left top;
margin: 0px;
padding: 0 0 0 9px;
list-style: none;
cursor:pointer;
}
.pod_tab .ajax__tab_header span
{
display: block;
background:url(../images/tab/tab-right.gif) no-repeat right top;
padding: 5px 15px 5px 6px;
cursor:pointer;
}
/* Commented backslash hack hides rule from IE5-Mac \*/
.pod_tab .ajax__tab_header span
{
float: none;
}
/* End of IE5-Mac hack */
.pod_tab .ajax__tab_header .ajax__tab_active
{
background-image: url(../images/tab/tab-active-left.gif);
cursor: default;
}
.pod_tab .ajax__tab_header .ajax__tab_active span
{
background-image: url(../images/tab/tab-active-right.gif);
cursor: default;
}
.pod_tab .ajax__tab_header .ajax__tab_hover
{
background-image: url(../images/tab/tab-hover-left.gif);
}
.pod_tab .ajax__tab_header .ajax__tab_hover span
{
background-image: url(../images/tab/tab-hover-right.gif);
}
.pod_tab .ajax__tab_header .ajax__tab_disabled
{
filter: alpha(opacity=50);
-moz-opacity: .60;
background-image: url(../images/tab/tab-left.gif);
cursor: default;
}
.pod_tab .ajax__tab_header .ajax__tab_disabled span
{
background-image: url(../images/tab/tab-right.gif);
cursor: default;
}
/* */
/* tab link */
/* */
.pod_tab .ajax__tab_link
{
clear:right;
margin: 0px;
background: url(../images/tab/tab-bar.gif) #e7ebf7 repeat-y right top;
width: 100%;
height: 22px;
}
.pod_tab .ajax__tab_link ul
{
margin;
padding;
}
.pod_tab .ajax__tab_link li
{
float: right;
list-style: none;
cursor: pointer;
}
.pod_tab .ajax__tab_link span
{
display: block;
padding-top: 4px;
padding-left: 5px;
padding-right: 7px;
font-family: verdana,tahoma,helvetica;
font-size:xx-small;
text-decoration: underline;
color: black;
cursor: pointer;
}
.pod_tab .ajax__tab_link .ajax__tab_link_active
{
cursor: default;
}
.pod_tab .ajax__tab_link .ajax__tab_link_active span
{
text-decoration: none;
cursor: default;
}
.pod_tab .ajax__tab_link .ajax__tab_link_disabled
{
filter: alpha(opacity=50);
-moz-opacity: .60;
cursor: default;
}
.pod_tab .ajax__tab_link .ajax__tab_link_disabled span
{
text-decoration: none;
filter: alpha(opacity=50);
-moz-opacity: .60;
cursor: default;
}
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
HI.
I have a few questions.
I can't set the ID of my tabs in the xml file, it always has the default ID. Is there any way to do this?
Another question, is it posible to create my tabs with all it's child links in the aspx markup? I can't find the way to do it because the tab object does not allow to nest tablinks inside.
Thanks. I found very useful your control.
|
| Sign In·View Thread·PermaLink | 5.00/5 |
|
|
|
|
|
|
Hello,
I'm trying to use this control to get the data from database instead of XML file. I encounter a few issues. Only Tab#1 displays correctly when page loads. Clicking on the next tabs only does postback/refresh. My goal is to display the sub tabs without postback when I click the parent tabs (Parent tab will not have Url.) I use the clientevent javascript, the page still does postback. Below is my code.
<b>ASPX</b>
<script type="text/javascript">
function ClientActiveItemChanged(sender, e)
{
}
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<act:TabStrip ID="TabStrip2" runat="server" OnClientActiveItemChanged="ClientActiveItemChanged">
</act:TabStrip>
<b>C#</b>
private void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
CreateTabs();
}
}
private void CreateTabs()
{
// SQL Connection
SqlConnection conn;
SqlCommand cmd;
conn = new SqlConnection(ConfigurationManager.AppSettings["DataConn"]);
conn.Open();
cmd = new SqlCommand("Select SectionId as SubTab, TabId as ParentTab, Name, Url from tbl1", conn);
SqlDataAdapter DA = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
DA.Fill(ds);
ds.Relations.Add("TabRelation", ds.Tables[0].Columns["SubTab"], ds.Tables[0].Columns["ParentTab"]);
foreach (DataRow dbRow in ds.Tables[0].Rows)
{
//If parentTab is null, tab is main tab.
if (dbRow.IsNull("ParentTab"))
{
AjaxControlToolkit.Tab newTab = new AjaxControlToolkit.Tab();
newTab.Text = dbRow["Name"].ToString();
TabStrip2.Tabs.Add(newTab);
PopulateSubMenu(dbRow, newTab);
}
}
cmd.Dispose();
conn.Dispose();
}
//Create Sub Tabs menu
private void PopulateSubMenu(DataRow dbRow, AjaxControlToolkit.Tab item)
{
foreach (DataRow childRow in dbRow.GetChildRows("TabRelation"))
{
//I'm not sure about the next lines, but seems to be working.
AjaxControlToolkit.TabLink childTabs = new AjaxControlToolkit.TabLink(childRow["Name"].ToString(), childRow["Url"].ToString(), false);
item.TabLinks.Add(childTabs);
}
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
Thanks for this article. I tried to register the assembly on my site but I get an error message becuase I have a newer version of AJAX. Can you please give me an idea about how I can make this work?
Thanks again.
John
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
Hi John,
I tried to recompile the project with ASP.NET AJAX Library 3.5.
Here is what I did to make it work with this version.
- In "TabStrip" project in the "References" I updated references to
"AjaxControlToolkit", "System.Web.Extensions" and "System.Web.Extensions.Design" to newer versions
- "TabStripDemo" project I updated the references to "AjaxControlToolkit" and
updated the web.config file (I just replaced the old web.config file with
the web.config file that I took from some of MS Ajax 3.5 samples)
If this won't work for you, please let me know, I can send you the
updated solution.
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
|
|
|
Is it possible for the user to add a new tab in this control at run time?
Certified VB6, SQL 7 and ASP developer
|
| Sign In·View Thread·PermaLink | 2.00/5 |
|
|
|
|
|
|
Yes. You can try to use something like the following:
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
TabStrip1.DataBind();
Tab tab = new Tab("RunTime Tab", "SomePage.aspx", false, -1);
TabStrip1.Tabs.Add(tab);
}
}
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
I’ve download your demo and it works great. One thing though, I want to activate a tab just by clicking on it. As it is now you have click on a tab then click on the PostBack button then the tab is Active. How can we get the tab just clicked on to automatically activate so that it is a one click process?
|
| Sign In·View Thread·PermaLink | 2.00/5 |
|
|
|
|
|
|
|
|
|
Hi Dave,
Thank you for your interest.
My intention was to make sub-links optional.
I will check the scenario without sub-links and post an update if there is a bug.
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
|
