Today I am going to explain for you how to create a Multiview Tab using a MenuControl in ASP.Net.
Prerequisites
- Visual Studio 2005, 08, 10
- AjaxControlToolkit 3.5
If you don't have ajaxcontroltoolkit then you can download it from here:
http://ajaxcontroltoolkit.codeplex.com/releases/view/90063
After downloading it install it via toolbox in Visual Studio; create a new tab in toolbox via right-click and add a new tab, rename it to ajax and then right-click on it and choose item and then browse to the location where you have downloaded the ajaxcontroltoolkit35.dll to and add it and click ok.
Your CSS file will look like this:
ul,li,body
{
margin:0;
padding:0;
}
/* MultiView Tab Using Menu Control */
.tabs
{
position:relative;
top:1px;
z-index:2;
}
.tab
{
border:1px solid black;
background-image:url(images/navigation.jpg);
background-repeat:repeat-x;
color:White;
padding:2px 10px;
}
.selectedtab
{
background:none;
background-repeat:repeat-x;
color:black;
}
.tabcontents
{
border:1px solid black;
padding:10px;
width:600px;
height:500px;
background-color:white;
}
/* MultiView Ends Here..*/
The Image file is attached with download.
Your Default Source file will be like this:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ 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>MultiView Tab Using Menu Control And Css</title>
<link href="TabDesign.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<div>
<asp:UpdatePanel ID="UpdatePanel" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Menu1" />
</Triggers>
<ContentTemplate>
<asp:Label ID="TimeLabel" runat="server" Text="" />
<asp:Menu ID="Menu1" Orientation="Horizontal" StaticMenuItemStyle-CssClass="tab"
StaticSelectedStyle-CssClass="selectedtab" CssClass="tabs" runat="server"
onmenuitemclick="Menu1_MenuItemClick">
<Items>
<asp:MenuItem Text="Home" Value="0" Selected="true"></asp:MenuItem>
<asp:MenuItem Text="Our Mission" Value="1"></asp:MenuItem>
</Items>
</asp:Menu>
<div class="tabcontents">
<asp:MultiView ID="MultiView1" ActiveViewIndex="0" runat="server">
<asp:View ID="View1" runat="server">
This is a View 1.
</asp:View>
<asp:View ID="View2" runat="server">
This is a View 2.
</asp:View>
</asp:MultiView>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
And your Default.cs file will be like this:
protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
{
int index = Int32.Parse(e.Item.Value);
MultiView1.ActiveViewIndex = index;
}
The design of the page will look like this:
![Design-Multiview-Tab-Using-MenuControl.jpg]()
And if you select Our Members link then it will be highlighted with the color set to black and the background is the image.
![output-Multiview-Tab-Using-MenuControl.jpg]()
Happy coding, I hope you like my article.