by JBrooks
24. October 2010 10:53
I have a regular menu for my site and I wanted to use the Ajax Tabs Control as a submenu when the user was doing point-of-sale (ordering cards that describe the wine). So when the user was on POS on the main menu (black background) they would see the submenu as shown below.
To make this, the first thing I did was create a new web user control and add the Ajax Tabs Control. This user control is called wcPOSMenu and will be place on each of the 3 ASP.Net pages involved. You can see there isn’t much to the markup below.
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="wcPOSMenu.ascx.cs"
Inherits="ToutonWeb.wcPOSMenu" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:TabContainer ID="TabContainerPOS" runat="server" AutoPostBack="true" BorderWidth="0px"
Width="926px" Height="12px" CssClass="ajax__tab_xp" ActiveTabIndex="0"
OnActiveTabChanged="TabContainerPOS_ActiveTabChanged">
<asp:TabPanel ID="tpSelect" runat="server" HeaderText="Select POS" BorderWidth="0px">
<ContentTemplate>
Enter Description or ItemNo to Search for and Hit Enter. Click a Column Heading
to Sort by That Column.
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="tpEdit" runat="server" HeaderText="Edit SKUs" BorderWidth="0px">
<ContentTemplate>
Enter a SKU to Add or Edit.
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="tpSend" runat="server" HeaderText="Send POS" BorderWidth="0px">
<ContentTemplate>
Send POS.
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
One thing to note is that I couldn’t quickly figure out how to eliminate the tab’s containers border so I just made it a height of 12px and used that area as a subtitle to the rest of the content.
Below is the code behind, there isn’t much to this either. First you have a user control’s property TabIndex that can be set on each of the parent pages. So for my example the page for “Edit SKUs” will have this user control on it and it’s TabIndex property will be set to the value of 1.
The page Page_Load event just uses that property to set the current tab.
The TabContainerPOS_ActiveTabChanged just redirects the user to the correct page whenever they change the tab. To the user is appears they are selecting a menu option, but to the tab control they are actually changing the active tab.
using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace ToutonWeb
{
public partial class wcPOSMenu : System.Web.UI.UserControl
{
private int _tabIndex;
public int TabIndex
{
get { return _tabIndex; }
set { _tabIndex = value; }
}
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
this.TabContainerPOS.ActiveTabIndex = _tabIndex;
}
protected void TabContainerPOS_ActiveTabChanged(object sender, EventArgs e)
{
switch (TabContainerPOS.ActiveTabIndex)
{
case 0:
Response.Redirect("~/frmPOS.aspx");
break;
case 1:
Response.Redirect("~/frmPOSEdit.aspx");
break;
case 2:
Response.Redirect("~/frmPOSSend.aspx");
break;
}
}
}
}
On each of the parent pages I just need to add 2 lines. The first is to register the user control, line 5 below. The second is line 9 below. Note the TabIndex property of the user control being set in line 9.
1: <%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true"
2: CodeBehind="frmPOSEdit.aspx.cs" Inherits="ToutonWeb.frmPOSEdit" %>
3:
4: <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp"%>
5: <%@ Register Src="wcPOSMenu.ascx" TagName="wcPOSMenu" TagPrefix="uc1" %>
6: <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
7: </asp:Content>
8: <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
9: <uc1:wcPOSMenu ID="wcPOSMenu1" runat="server" TabIndex="1" />
That is it.
09a25f26-8761-42a8-8f2a-65fd213820d3|1|4.0|27604f05-86ad-47ef-9e05-950bb762570c
Tags:
ASP.Net | Development
Subscribe