Multiview with style : Multiview « Asp Control « ASP.Net
- ASP.Net
- Asp Control
- Multiview
Multiview with style
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="MultiViewTest" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>MultiView Class Example</title>
<style type="text/css">
.TabContainer
{
font: bold 0.75em Verdana;
width: 60em;
margin-top: 1.5em;
padding-top: 2em;
}
.TabItemInactive
{
border-top: 1px solid white;
border-left: 1px solid white;
border-right: 1px solid #aaaaaa;
border-bottom: none;
background-color: #d3d3d3;
text-align: center;
text-decoration: none;
padding: 0.75em 0.25em 0 0.25em;
}
.TabItemInactive:hover
{
background: #808080;
}
.TabItemActive
{
border-top: 1px solid white;
border-left: none;
border-right: 1px solid #aaaaaa;
border-bottom: none;
text-decoration: none;
background-color: #bbbbbb;
text-align: center;
padding: 0.75em 0.25em 0 0.25em;
}
.ContentPanel
{
background-color: #bbbbbb;
padding: 10px 10px 10px 10px;
width: 60em;
font: 0.8em Verdana;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<asp:MultiView ID="mviewMain" runat="Server" ActiveViewIndex="0">
<asp:View ID="CustomerView" runat="Server">
<asp:Panel ID="panelNavigatonView1"
runat="server"
CssClass="TabContainer">
<asp:Label ID="labOne"
runat="Server"
CssClass="TabItemActive"
Text="Customer Information" />
<asp:LinkButton ID="lnkb_DefaultBook"
CssClass="TabItemInactive"
Text="Customer Book Selections"
runat="Server"
OnCommand="LinkButton_Command"
CommandName="Book" />
<asp:LinkButton ID="lnkb_DefaultCategories" CssClass="TabItemInactive"
Text="Customer Categories" runat="server"
OnCommand="LinkButton_Command"
CommandName="Categories" />
</asp:Panel>
<asp:Panel ID="panelView1" runat="server" CssClass="ContentPanel">
<h2>Customer's Information</h2>
<p>First Name:<asp:TextBox ID="txtFirst" runat="server" /></p>
<p>Last Name:<asp:TextBox ID="txtLast" runat="server" /></p>
<p>Phone:<asp:TextBox ID="txtPhone" runat="server" /></p>
<asp:Button id="view1Next" runat="Server" Width="6em"
Text="Next" CommandName="NextView" />
</asp:Panel>
</asp:View>
<asp:View ID="BookView" runat="Server">
<asp:Panel ID="panelNavigatonView2" runat="server" CssClass="TabContainer">
<asp:LinkButton ID="lnkb_BookCustomer"
runat="Server"
CssClass="TabItemInactive"
Text="Customer Information"
OnCommand="LinkButton_Command"
CommandName="Customer" />
<asp:Label ID="Label3"
runat="Server"
CssClass="TabItemActive"
Text="Customer Book Selections" />
<asp:LinkButton ID="lnkb_BookCategories"
runat="server"
CssClass="TabItemInactive"
Text="Customer Categories"
OnCommand="LinkButton_Command"
CommandName="Categories" />
</asp:Panel>
<asp:Panel ID="panelView2" runat="server" CssClass="ContentPanel">
<asp:Button id="view2Back" runat= "Server"
Text="Previous" CommandName="PrevView" Width="6em" />
<asp:Button id="view2Next" runat="Server"
Text="Next" CommandName="NextView" Width="6em" />
</asp:Panel>
</asp:View>
<asp:View ID="CategoriesView" runat="Server">
<asp:Panel ID="panelNavigatonView3" runat="server" CssClass="TabContainer">
<asp:LinkButton ID="lnkb_CategoriesCustomer"
runat="Server"
CssClass="TabItemInactive"
Text="Customer Information"
OnCommand="LinkButton_Command"
CommandName="Customer" />
<asp:LinkButton ID="lnkb_CategoriesBook"
runat="Server"
CssClass="TabItemInactive"
Text="Customer Book Selections"
OnCommand="LinkButton_Command"
CommandName="Book" />
<asp:Label ID="Label4" runat="Server" CssClass="TabItemActive"
Text="Customer Categories" />
</asp:Panel>
<asp:Panel ID="panelView3" runat="server" CssClass="ContentPanel">
<asp:Button id="view3Prev" runat= "Server"
Text="Previous" CommandName="PrevView" Width="6em" />
<asp:Button id="view3First" runat= "Server"
Text="Start"
CommandName="SwitchViewByIndex"
CommandArgument="0" Width="6em" />
</asp:Panel>
</asp:View>
</asp:MultiView>
</div>
</form>
</body>
</html>
File: Default.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class MultiViewTest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
mviewMain.SetActiveView(CustomerView);
}
}
protected void LinkButton_Command(object sender, CommandEventArgs e)
{
switch ((string)e.CommandName)
{
case "Customer":
mviewMain.SetActiveView(CustomerView);
break;
case "Book":
mviewMain.SetActiveView(BookView);
break;
case "Categories":
mviewMain.SetActiveView(CategoriesView);
break;
}
}
}
Related examples in the same category