ASP.NET Tutorial/ASP.net Controls/MultiView
Содержание
Active index
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="Default_aspx" %>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">
Enter your name:<br />
First Name <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
<br />
Last Name
<asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
<br />
<asp:Button ID="btnView1Next" runat="server" Text="Next" /></asp:View><asp:View ID="View2" runat="server">
Birthday:<br />
<asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
<br />
<asp:Button ID="btnView2Previous" runat="server" Text="Previous" />
<asp:Button ID="btnView2Next" runat="server" Text="Next" /></asp:View><asp:View ID="View3" runat="server">
Thank you for registering with us.<br />
<br />
<asp:Button ID="btnView3Finish" runat="server" Text="Finish" />
<asp:Button ID="btnView3Reset" runat="server" Text="Reset" /></asp:View></asp:MultiView>
</div>
</form>
</body>
</html>
File: Default.aspx.vb
Partial Class Default_aspx
Inherits System.Web.UI.Page
Protected Sub btnAllButtons_Click(ByVal sender As Object, _
ByVal e As System.EventArgs) _
Handles btnView1Next.Click, _
btnView2Next.Click, btnView2Previous.Click, _
btnView3Finish.Click, btnView3Reset.Click
Select Case CType(sender, Button).Text
Case "Next"
MultiView1.ActiveViewIndex += 1
Case "Previous"
MultiView1.ActiveViewIndex -= 1
Case "Finish"
Response.Write("You have registered as " & _
txtFirstName.Text & _
txtLastName.Text & "<br/>")
Response.Write("Birthday " & _
Calendar1.SelectedDate)
btnView3Finish.Enabled = False
btnView3Reset.Enabled = False
Case "Reset"
MultiView1.ActiveViewIndex = 0
End Select
End Sub
End Class
Displaying a Multi-Part Form
NextView: activate the next View control.
PrevView: activate the previous View control.
SwitchViewByID: activate the view by id.
SwitchViewByIndex:activate the view by index.
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void View3_Activate(object sender, EventArgs e)
{
lblFirstNameResult.Text = txtFirstName.Text;
lblColorResult.Text = txtColor.Text;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>MultiView Form</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:MultiView
id="MultiView1"
ActiveViewIndex="0"
Runat="server">
<asp:View ID="View1" runat="server">
<h1>Step 1</h1>
<asp:Label
id="lblFirstName"
Text="Enter Your First Name:"
AssociatedControlID="txtFirstName"
Runat="server" />
<br />
<asp:TextBox
id="txtFirstName"
Runat="server" />
<br /><br />
<asp:Button
id="btnNext"
Text="Next"
CommandName="NextView"
Runat="server" />
</asp:View>
<asp:View ID="View2" runat="server">
<h1>Step 2</h1>
<asp:Label
id="Label1"
Text="Enter Your Favorite Color:"
AssociatedControlID="txtColor"
Runat="server" />
<br />
<asp:TextBox
id="txtColor"
Runat="server" />
<br /><br />
<asp:Button
id="Button1"
Text="Next"
CommandName="NextView"
Runat="server" />
</asp:View>
<asp:View ID="View3" runat="server" OnActivate="View3_Activate">
<h1>Summary</h1>
Your First Name:
<asp:Label
id="lblFirstNameResult"
Runat="server" />
<br /><br />
Your Favorite Color:
<asp:Label
id="lblColorResult"
Runat="server" />
</asp:View>
</asp:MultiView>
</div>
</form>
</body>
</html>
MultiView and View Controls
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 & View Controls</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>MultiView & View Controls</h1>
<br/>
<asp:RadioButtonList AutoPostBack="True" ID="rblView"
OnSelectedIndexChanged="rblView_SelectedIndexChanged"
RepeatDirection="Horizontal" runat="server">
<asp:ListItem Value="-1">Nothing</asp:ListItem>
<asp:ListItem Value="0" Selected="True">First</asp:ListItem>
<asp:ListItem Value="1">Second</asp:ListItem>
<asp:ListItem Value="2">Third</asp:ListItem>
<asp:ListItem Value="3">Last</asp:ListItem>
</asp:RadioButtonList>
<br />
Current Index:
<asp:Label ID="lblCurrentIndex" runat="server"></asp:Label>
<br/>
<asp:MultiView ID="MultiView1" runat="server"
ActiveViewIndex="0"
OnActiveViewChanged="MultiView1_ActiveViewChanged">
<asp:View ID="vwFirst" runat="server"
OnActivate="ActivateView"
OnDeactivate="DeactivateView">
<h2>
First View
</h2>
<asp:TextBox ID="txtFirstView" runat="server"></asp:TextBox>
<asp:Button CommandName="NextView" ID="btnNext1" runat="server" Text="Go To Next" />
<asp:Button CommandArgument="vwLast" CommandName="SwitchViewByID" ID="btnLast" runat="server" Text="Go to Last" />
</asp:View>
<asp:View ID="vwSecond" runat="server"
OnActivate="ActivateView"
OnDeactivate="DeactivateView">
<h2>
Second View
</h2>
<asp:TextBox ID="txtSecondView" runat="server"></asp:TextBox>
<asp:Button CommandName="NextView" ID="btnNext2" runat="server" Text="Go To Next" />
<asp:Button CommandName="PrevView" ID="btnPrevious2" runat="server" Text="Go to Previous" />
</asp:View>
<asp:View ID="vwThird" runat="server"
OnActivate="ActivateView"
OnDeactivate="DeactivateView">
<h2>
Third View</h2>
<br />
<asp:Button CommandName="NextView" ID="btnNext3" runat="server" Text="Go To Next" />
<asp:Button CommandName="PrevView" ID="btnPrevious3" runat="server" Text="Go to Previous" />
</asp:View>
<asp:View ID="vwLast" runat="server"
OnActivate="ActivateView"
OnDeactivate="DeactivateView">
<h2>
Last View
</h2>
<asp:Button CommandName="PrevView" ID="btnPrevious4" runat="server" Text="Go to Previous" />
<asp:Button CommandArgument="0" CommandName="SwitchViewByIndex" ID="btnFirst" runat="server" Text="Go to First" />
</asp:View>
</asp:MultiView>
<br />
<br />
First TextBox:
<asp:Label ID="lblFirstTextBox" runat="server" />
<br />
Second TextBox:
<asp:Label ID="lblSecondTextBox" runat="server" />
<br />
<br />
<strong><span style="text-decoration: underline">
View Activation History:</span></strong>
<br />
<asp:Label ID="lblViewActivation" runat="server" />
</div>
</form>
</body>
</html>
File: Default.aspx.cs
using System;
using System.Data;
using System.Configuration;
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 _Default : System.Web.UI.Page
{
protected void Page_PreRender(object sender, EventArgs e)
{
lblCurrentIndex.Text = MultiView1.ActiveViewIndex.ToString();
}
protected void rblView_SelectedIndexChanged(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex = Convert.ToInt32(rblView.SelectedValue);
}
protected void MultiView1_ActiveViewChanged(object sender, EventArgs e)
{
lblFirstTextBox.Text = txtFirstView.Text;
lblSecondTextBox.Text = txtSecondView.Text;
rblView.SelectedIndex = MultiView1.ActiveViewIndex + 1;
}
protected void ActivateView(object sender, EventArgs e)
{
string str = lblViewActivation.Text;
View v = (View)sender;
str += "View " + v.ID + " activated <br/>";
lblViewActivation.Text = str;
}
protected void DeactivateView(object sender, EventArgs e)
{
string str = lblViewActivation.Text;
View v = (View)sender;
str += "View " + v.ID + " deactivated <br/>";
lblViewActivation.Text = str;
}
}
MultiView hides and display different areas of a page, useful to create a tabbed page
The MultiView control supports the following properties (this is not a complete list):
ActiveViewIndex: select the View control by index.
Views: return the list of View controls.
GetActiveView: get the selected View control.
SetActiveView: select the active view.
ActiveViewChanged: Raised when a new View control is selected.
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
{
int index = Int32.Parse(e.Item.Value);
MultiView1.ActiveViewIndex = index;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>MultiView Tabs</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Menu
id="Menu1"
Orientation="Horizontal"
StaticMenuItemStyle-CssClass="tab"
StaticSelectedStyle-CssClass="selectedTab"
CssClass="tabs"
OnMenuItemClick="Menu1_MenuItemClick"
Runat="server">
<Items>
<asp:MenuItem Text="Tab 1" Value="0" Selected="true" />
<asp:MenuItem Text="Tab 2" Value="1" />
<asp:MenuItem Text="Tab 3" Value="2" />
</Items>
</asp:Menu>
<div class="tabContents">
<asp:MultiView
id="MultiView1"
ActiveViewIndex="0"
Runat="server">
<asp:View ID="View1" runat="server">
<br />This is the first view
<br />This is the first view
<br />This is the first view
<br />This is the first view
</asp:View>
<asp:View ID="View2" runat="server">
<br />This is the second view
<br />This is the second view
<br />This is the second view
<br />This is the second view
</asp:View>
<asp:View ID="View3" runat="server">
<br />This is the third view
<br />This is the third view
<br />This is the third view
<br />This is the third view
</asp:View>
</asp:MultiView>
</div>
</div>
</form>
</body>
</html>
Use the MultiView control to dynamically switch views in a page
<%@ Page language="C#"%>
<script runat="server">
void Page_Load(object sender, EventArgs e)
{
Tables.ActiveViewIndex = Views.SelectedIndex;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>View controls</title>
</head>
<body>
<div id="pageContent">
<form id="Form1" runat="server">
<tr>
<td valign="top">
<asp:DropDownList Runat="server" ID="Views" AutoPostBack="true">
<asp:ListItem Value="Employees" />
<asp:ListItem Value="Products" />
<asp:ListItem Value="Customers" />
</asp:DropDownList>
</td>
<td valign="top" style="border:solid 1px black;">
<asp:MultiView runat="server" id="Tables" ActiveViewIndex="0" >
<asp:View runat="server" id="Employees">
<h1>Employees</h1>
</asp:View>
<asp:View runat="server" id="Products">
<h1>Products</h1>
</asp:View>
<asp:View runat="server" id="Customers">
<h1>Customers</h1>
</asp:View>
</asp:MultiView>
</td>
</tr>
</form>
</div>
</body>
</html>
What is an asp:MultiView (C#)
File: Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="MultiViewGreetingCardMaker" %>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<tr>
<td>
<asp:MultiView id="MultiView1"
runat="server"
ActiveViewIndex="0">
<asp:View ID="View1"
runat="server">
Choose a foreground (text) color:<br />
<asp:DropDownList ID="lstForeColor"
runat="server"
AutoPostBack="True"
Height="22px"
OnSelectedIndexChanged="ControlChanged"
Width="194px">
</asp:DropDownList><br />
<br />
Choose a background color:<br />
<asp:DropDownList ID="lstBackColor" runat="server" AutoPostBack="True" Height="22px"
OnSelectedIndexChanged="ControlChanged" Width="194px">
</asp:DropDownList>
<br />
<asp:Button ID="cmdNext" runat="server" Text="Next >" CommandName="NextView" />
</asp:View>
<asp:View ID="View2" runat="server">
Choose a border style:<br />
<asp:RadioButtonList ID="lstBorder" runat="server" AutoPostBack="True"
Height="59px" OnSelectedIndexChanged="ControlChanged" RepeatColumns="2" Width="177px">
</asp:RadioButtonList><br />
<br />
<asp:CheckBox ID="chkPicture" runat="server" AutoPostBack="True" OnCheckedChanged="ControlChanged"
Text="Add the Default Picture" />
<br />
<asp:Button ID="Button3" runat="server" Text="< Prev" CommandName="PrevView" />
<asp:Button ID="Button4" runat="server" Text="Next >" CommandName="NextView" />
</asp:View>
<asp:View ID="View3" runat="server">
Choose a font name:<br />
<asp:DropDownList ID="lstFontName" runat="server" AutoPostBack="True" Height="22px"
OnSelectedIndexChanged="ControlChanged" Width="194px">
</asp:DropDownList><br />
<br />
Specify a font size:<br />
<asp:TextBox ID="txtFontSize" runat="server" AutoPostBack="True" OnTextChanged="ControlChanged"></asp:TextBox><br />
<br />
Enter the greeting text below:<br />
<asp:TextBox ID="txtGreeting" runat="server" Height="85px" OnTextChanged="ControlChanged"
TextMode="MultiLine" Width="240px" AutoPostBack="True"></asp:TextBox>
<br />
<asp:Button ID="Button1" runat="server" Text="< Prev" CommandName="PrevView" />
<asp:Button ID="Button2" runat="server" Text="Apply" />
</asp:View>
</asp:MultiView>
</td>
<td >
<asp:Panel ID="pnlCard" runat="server" Height="445px" HorizontalAlign="Center" Style="z-index: 101;
" Width="339px">
<br />
<asp:Label ID="lblGreeting" runat="server" Height="150px" Width="272px"></asp:Label>
<asp:Image ID="imgDefault" runat="server" Height="160px" Visible="False" Width="212px" />
</asp:Panel>
</td>
</tr>
</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;
using System.Drawing;
using System.ruponentModel;
public partial class MultiViewGreetingCardMaker : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
string[] colorArray = Enum.GetNames(typeof(System.Drawing.KnownColor));
lstBackColor.DataSource = colorArray;
lstBackColor.DataBind();
lstForeColor.DataSource = colorArray;
lstForeColor.DataBind();
lstForeColor.SelectedIndex = 34;
lstBackColor.SelectedIndex = 163;
System.Drawing.Text.InstalledFontCollection fonts;
fonts = new System.Drawing.Text.InstalledFontCollection();
foreach (FontFamily family in fonts.Families)
{
lstFontName.Items.Add(family.Name);
}
string[] borderStyleArray = Enum.GetNames(typeof(BorderStyle));
lstBorder.DataSource = borderStyleArray;
lstBorder.DataBind();
lstBorder.SelectedIndex = 0;
imgDefault.ImageUrl = "http://www.nfex.ru/style/logo.png";
}
}
protected void ControlChanged(Object sender, EventArgs e)
{
pnlCard.BackColor = Color.FromName(lstBackColor.SelectedItem.Text);
lblGreeting.ForeColor = Color.FromName(lstForeColor.SelectedItem.Text);
lblGreeting.Font.Name = lstFontName.SelectedItem.Text;
try
{
if (Int32.Parse(txtFontSize.Text) > 0)
{
lblGreeting.Font.Size = FontUnit.Point(Int32.Parse(txtFontSize.Text));
}
if (Int32.Parse(txtFontSize.Text) > 0)
{
lblGreeting.Font.Size =
FontUnit.Point(Int32.Parse(txtFontSize.Text));
}
}catch{
}
TypeConverter cnvrt = TypeDescriptor.GetConverter(typeof(BorderStyle));
pnlCard.BorderStyle = (BorderStyle)cnvrt.ConvertFromString(lstBorder.SelectedItem.Text);
if (chkPicture.Checked == true)
{
imgDefault.Visible = true;
}
else
{
imgDefault.Visible = false;
}
lblGreeting.Text = txtGreeting.Text;
}
}