ASP.NET Tutorial/ASP.net Controls/MultiView

Материал из .Net Framework эксперт
Перейти к: навигация, поиск

Active index

   <source lang="csharp">

<%@ 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">
       <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
           <asp:View ID="View1" runat="server">
               Enter your name:
First Name <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
Last Name <asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
<asp:Button ID="btnView1Next" runat="server" Text="Next" /></asp:View><asp:View ID="View2" runat="server"> Birthday:
<asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
<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.

<asp:Button ID="btnView3Finish" runat="server" Text="Finish" /> <asp:Button ID="btnView3Reset" runat="server" Text="Reset" /></asp:View></asp:MultiView>
   </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 & "
") Response.Write("Birthday " & _ Calendar1.SelectedDate) btnView3Finish.Enabled = False btnView3Reset.Enabled = False Case "Reset" MultiView1.ActiveViewIndex = 0 End Select End Sub

End Class</source>


Displaying a Multi-Part Form

   <source lang="csharp">

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">
   <asp:MultiView
       id="MultiView1"
       ActiveViewIndex="0"
       Runat="server">
       <asp:View ID="View1" runat="server">

Step 1

       <asp:Label
           id="lblFirstName"
           Text="Enter Your First Name:"
           AssociatedControlID="txtFirstName"
           Runat="server" />
       
<asp:TextBox id="txtFirstName" Runat="server" />

<asp:Button id="btnNext" Text="Next" CommandName="NextView" Runat="server" /> </asp:View> <asp:View ID="View2" runat="server">

Step 2

       <asp:Label
           id="Label1"
           Text="Enter Your Favorite Color:"
           AssociatedControlID="txtColor"
           Runat="server" />
       
<asp:TextBox id="txtColor" Runat="server" />

<asp:Button id="Button1" Text="Next" CommandName="NextView" Runat="server" /> </asp:View> <asp:View ID="View3" runat="server" OnActivate="View3_Activate">

Summary

       Your First Name:
       <asp:Label
           id="lblFirstNameResult"
           Runat="server" />
       

Your Favorite Color: <asp:Label id="lblColorResult" Runat="server" /> </asp:View> </asp:MultiView>
   </form>

</body> </html></source>


MultiView and View Controls

   <source lang="csharp">

<%@ 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">

MultiView & View Controls

    
<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>
Current Index: <asp:Label ID="lblCurrentIndex" runat="server"></asp:Label>
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0" OnActiveViewChanged="MultiView1_ActiveViewChanged"> <asp:View ID="vwFirst" runat="server" OnActivate="ActivateView" OnDeactivate="DeactivateView">

First View

          <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">

Second View

          <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">

Third View

         
<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">

Last View

          <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>
     

First TextBox: <asp:Label ID="lblFirstTextBox" runat="server" />
Second TextBox: <asp:Label ID="lblSecondTextBox" runat="server" />

View Activation History:
<asp:Label ID="lblViewActivation" runat="server" />
   </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 
"; lblViewActivation.Text = str; } protected void DeactivateView(object sender, EventArgs e) { string str = lblViewActivation.Text; View v = (View)sender; str += "View " + v.ID + " deactivated
"; lblViewActivation.Text = str; } }</source>

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

   <source lang="csharp">

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">
   <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>
   <asp:MultiView
       id="MultiView1"
       ActiveViewIndex="0"
       Runat="server">
       <asp:View ID="View1" runat="server">
           
This is the first view
This is the first view
This is the first view
This is the first view </asp:View> <asp:View ID="View2" runat="server">
This is the second view
This is the second view
This is the second view
This is the second view </asp:View> <asp:View ID="View3" runat="server">
This is the third view
This is the third view
This is the third view
This is the third view </asp:View> </asp:MultiView>
   </form>

</body> </html></source>


Use the MultiView control to dynamically switch views in a page

   <source lang="csharp">

<%@ 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>

       <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">

Employees

             </asp:View>
             <asp:View runat="server" id="Products">

Products

               </asp:View>
               <asp:View runat="server" id="Customers">

Customers

               </asp:View>
           </asp:MultiView>
           </td>
           </tr>
       </form>

</body> </html></source>


What is an asp:MultiView (C#)

   <source lang="csharp">

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">
           <tr>
               <td>
                   <asp:MultiView id="MultiView1" 
                                  runat="server" 
                                  ActiveViewIndex="0">
                       <asp:View ID="View1" 
                                 runat="server">
                                 Choose a foreground (text) color:
<asp:DropDownList ID="lstForeColor" runat="server" AutoPostBack="True" Height="22px" OnSelectedIndexChanged="ControlChanged" Width="194px"> </asp:DropDownList>

Choose a background color:
<asp:DropDownList ID="lstBackColor" runat="server" AutoPostBack="True" Height="22px" OnSelectedIndexChanged="ControlChanged" Width="194px"> </asp:DropDownList>
<asp:Button ID="cmdNext" runat="server" Text="Next >" CommandName="NextView" /> </asp:View> <asp:View ID="View2" runat="server"> Choose a border style:
<asp:RadioButtonList ID="lstBorder" runat="server" AutoPostBack="True" Height="59px" OnSelectedIndexChanged="ControlChanged" RepeatColumns="2" Width="177px"> </asp:RadioButtonList>

<asp:CheckBox ID="chkPicture" runat="server" AutoPostBack="True" OnCheckedChanged="ControlChanged" Text="Add the Default Picture" />
<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:
<asp:DropDownList ID="lstFontName" runat="server" AutoPostBack="True" Height="22px" OnSelectedIndexChanged="ControlChanged" Width="194px"> </asp:DropDownList>

Specify a font size:
<asp:TextBox ID="txtFontSize" runat="server" AutoPostBack="True" OnTextChanged="ControlChanged"></asp:TextBox>

Enter the greeting text below:
<asp:TextBox ID="txtGreeting" runat="server" Height="85px" OnTextChanged="ControlChanged" TextMode="MultiLine" Width="240px" AutoPostBack="True"></asp:TextBox>
<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">
  <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>
   </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;
   }

}</source>