ASP.NET Tutorial/ASP.net Controls/MultiView

Содержание

1 Active index
2 Displaying a Multi-Part Form
3 MultiView and View Controls
4 MultiView hides and display different areas of a page, useful to create a tabbed page
5 Use the MultiView control to dynamically switch views in a page
6 What is an asp:MultiView (C#)

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&nbsp;<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 />
                        &nbsp;
                        <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;
    }
}

ASP.NET Tutorial/ASP.net Controls/MultiView

Содержание

Active index

Displaying a Multi-Part Form

MultiView and View Controls

MultiView hides and display different areas of a page, useful to create a tabbed page

Use the MultiView control to dynamically switch views in a page

What is an asp:MultiView (C#)

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Инструменты

Навигация