Condividi tramite


Procedura: aggiungere controlli server Web MultiView a una pagina Web Form (Visual Studio)

Aggiornamento: novembre 2007

I controlli server Web MultiView e View fungono da contenitori per altri controlli e tag e consentono di visualizzare set alternativi di controlli e tag. Sebbene siano stati progettati principalmente per essere utilizzati con browser su dispositivi portatili, i controlli MultiView e View sono supportati in qualsiasi pagina ASP.NET.

Per aggiungere un controllo server Web MultiView a una pagina Web Form

  1. Dalla scheda Standard della Casella degli strumenti trascinare un controllo MultiView nella pagina.

  2. Dalla scheda Standard della Casella degli strumenti trascinare un controllo View nel controllo MultiView.

  3. Digitare il testo statico che si desidera aggiungere nel controllo View. Per aggiungere controlli al controllo View, trascinarli nel controllo View dalla Casella degli strumenti e creare il layout desiderato.

  4. Ripetere i passaggi 2 e 3 per ogni controllo View da creare.

  5. Impostare la proprietà ActiveViewIndex del controllo MultiView sul valore di indice del controllo View da visualizzare. Se non si desidera visualizzare alcun controllo View, impostare la proprietà su -1.

  6. Aggiungere il codice appropriato per impostare la proprietà ActiveViewIndex in modo da specificare quale controllo View deve essere visualizzato.

    Nell'esempio riportato di seguito viene illustrato come utilizzare un controllo MultiView. Nella pagina sono presenti due controlli View. Quando l'utente fa clic su un controllo RadioButton, il codice nel gestore eventi CheckedChanged relativo al pulsante visualizza il controllo View appropriato impostando la proprietà ActiveViewIndex. Quando l'utente fa clic sul pulsante Search, il codice ottiene il valore del controllo TextBox nel controllo View appropriato.

    <%@ Page Language="VB" %>
    <script >
        Protected Enum SearchType As Integer
            NotSet = -1
            Products = 0
            Category = 1
        End Enum
    
        Protected Sub Button1_Click(ByVal sender As Object, _
                 ByVal e As System.EventArgs)
            If MultiView1.ActiveViewIndex > -1 Then
                Dim searchTerm As String = ""
                Select Case MultiView1.ActiveViewIndex
                    Case SearchType.Products
                        DoSearch(textProductName.Text, _
                            MultiView1.ActiveViewIndex)
                    Case SearchType.Category
                        DoSearch(textCategory.Text, _
                            MultiView1.ActiveViewIndex)
                    Case SearchType.NotSet
                End Select
            End If
        End Sub
    
        Protected Sub DoSearch(ByVal searchTerm As String, _
                ByVal type As SearchType)
            ' Code here to perform a search.
        End Sub
    
        Protected Sub radioButton_CheckedChanged(ByVal sender As _
                  Object, ByVal e As System.EventArgs)
            If radioProduct.Checked Then
                MultiView1.ActiveViewIndex = SearchType.Products
            ElseIf radioCategory.Checked Then
                MultiView1.ActiveViewIndex = SearchType.Category
            End If
        End Sub
    </script>
    
    <html>
    <head ></head>
    <body>
        <form id="form1" >
        <div>
            Search by product or by category?
            <br />
            <asp:RadioButton ID="radioProduct" 
    
                autopostback="true" 
                GroupName="SearchType" 
                Text="Product" 
                OnCheckedChanged="radioButton_CheckedChanged" />
            &nbsp;
            <asp:RadioButton ID="radioCategory" 
    
                autopostback="true" 
                GroupName="SearchType" 
                Text="Category" 
                OnCheckedChanged="radioButton_CheckedChanged" />
            <br />
            <br />
            <asp:MultiView ID="MultiView1" >
                <asp:View ID="viewProductSearch" >
                    Enter product name: 
                    <asp:TextBox ID="textProductName" 
                       ></asp:TextBox>
                </asp:View>
                <asp:View ID="viewCategorySearch" >
                    Enter category: 
                    <asp:TextBox ID="textCategory" 
                       ></asp:TextBox>
                </asp:View>
            </asp:MultiView>&nbsp;<br />
            <br />
            <asp:Button ID="btnSearch" OnClick="Button1_Click" 
                       Text="Search" />
         </div>
        </form>
    </body>
    </html>
    
    <%@ Page Language="C#" %>
    
    <script >
        public enum SearchType
        {
            NotSet = -1,
            Products = 0,
            Category = 1
        }
    
        protected void Button1_Click(Object sender, System.EventArgs e)
        {
            if(MultiView1.ActiveViewIndex > -1)
            {
                String searchTerm = "";
                SearchType mSearchType = 
                     (SearchType) MultiView1.ActiveViewIndex;
                switch(mSearchType)
                {
                case SearchType.Products:
                    DoSearch(textProductName.Text, mSearchType);
                    break;
                case SearchType.Category:
                    DoSearch(textCategory.Text, mSearchType);
                    break;
                case SearchType.NotSet:
                    break;
                }
            }
        }
    
        protected void DoSearch(String searchTerm, SearchType type)
        {
            // Code here to perform a search.
        }
    
        protected void radioButton_CheckedChanged(Object sender, 
            System.EventArgs e)
        {
            if(radioProduct.Checked)
            {
                MultiView1.ActiveViewIndex = (int) SearchType.Products;
            }
            else if(radioCategory.Checked)
            {
                MultiView1.ActiveViewIndex = (int) SearchType.Category;
            }
        }
    </script>
    
    <html>
    <head id="Head1" ></head>
    <body>
        <form id="form1" >
        <div>
            Search by product or by category?
            <br />
            <asp:RadioButton ID="radioProduct" 
    
                autopostback="true" 
                GroupName="SearchType" 
                Text="Product" 
                OnCheckedChanged="radioButton_CheckedChanged" />
            &nbsp;
            <asp:RadioButton ID="radioCategory" 
    
                autopostback="true" 
                GroupName="SearchType" 
                Text="Category" 
                OnCheckedChanged="radioButton_CheckedChanged" />
            <br />
            <br />
            <asp:MultiView ID="MultiView1" >
                <asp:View ID="viewProductSearch" >
                    Enter product name: 
                    <asp:TextBox ID="textProductName" >
                    </asp:TextBox>
                </asp:View>
                <asp:View ID="viewCategorySearch" >
                    Enter category: 
                    <asp:TextBox ID="textCategory" >
                    </asp:TextBox>
                </asp:View>
            </asp:MultiView>&nbsp;<br />
            <br />
            <asp:Button ID="btnSearch" 
               OnClick="Button1_Click" 
                Text="Search" />
         </div>
        </form>
    </body>
    </html>
    

Vedere anche

Concetti

Cenni preliminari sui controlli server Web MultiView e View

Altre risorse

Procedura dettagliata: creazione di pagine Web per dispositivi mobili