Gewusst wie: Hinzufügen von MultiView-Webserversteuerelementen zu einer Web Forms-Seite (Visual Studio)

Artikel
10/22/2014

Aktualisiert: November 2007

Das MultiView-Webserversteuerelement und das View-Webserversteuerelement fungieren als Container für Steuerelemente und Markup und ermöglichen Ihnen, alternative Steuerelemente und alternatives Markup anzuzeigen. Das MultiView-Steuerelement und das View-Steuerelement wurden in erster Linie für die Verwendung mit Browsern auf mobilen Geräten konzipiert, werden aber in jeder ASP.NET-Seite unterstützt.

So fügen Sie ein MultiView-Webserversteuerelement zu einer Web Forms-Seite hinzu

Ziehen Sie von der Registerkarte Standard der Toolbox ein MultiView-Steuerelement auf die Seite.
Ziehen Sie von der Registerkarte Standard der Toolbox ein View-Steuerelement in das MultiView-Steuerelement.
Geben Sie einen statischen Text ein, den Sie dem View-Steuerelement hinzufügen möchten. Um dem View-Steuerelement Steuerelemente hinzuzufügen, ziehen Sie diese aus der Toolbox in das View-Steuerelement, und erstellen Sie so das gewünschte Layout.
Wiederholen Sie die Schritte 2 und 3 für jedes View-Steuerelement, das erstellt werden soll.
Legen Sie die ActiveViewIndex-Eigenschaft des MultiView-Steuerelements auf den Indexwert des View-Steuerelements fest, das angezeigt werden soll. Wenn keine View-Steuerelemente angezeigt werden sollen, legen Sie die Eigenschaft auf -1 fest.

Fügen Sie Code hinzu, um die ActiveViewIndex-Eigenschaft programmgesteuert festzulegen. Mit dieser Eigenschaft können Sie festlegen, welches View-Steuerelement angezeigt wird.

Das folgende Beispiel zeigt, wie ein MultiView-Steuerelement verwendet wird. Die Seite enthält zwei View-Steuerelemente. Der Benutzer klickt auf ein RadioButton-Steuerelement, und im CheckedChanged-Ereignishandler für die Schaltfläche wird durch Code die ActiveViewIndex-Eigenschaft so festgelegt, dass das entsprechende View-Steuerelement angezeigt wird. Wenn der Benutzer auf die Schaltfläche Suchen klickt, wird durch Code der Wert des TextBox-Steuerelements im entsprechenden View-Steuerelement abgerufen.

Sicherheitshinweis:
Dieses Beispiel enthält ein Textfeld, das eine Benutzereingabe akzeptiert. Diese stellt ein potenzielles Sicherheitsrisiko dar. Standardmäßig stellt die ASP.NET-Seite sicher, dass die Benutzereingabe keine Skript- oder HTML-Elemente enthält. Weitere Informationen finden Sie unter Übersicht über Skriptangriffe.

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

Siehe auch

Konzepte

Übersicht über die MultiView-Webserversteuerelemente und View-Webserversteuerelemente

Weitere Ressourcen

Exemplarische Vorgehensweise: Erstellen von Webseiten für mobile Geräte

Freigeben über

Gewusst wie: Hinzufügen von MultiView-Webserversteuerelementen zu einer Web Forms-Seite (Visual Studio)

So fügen Sie ein MultiView-Webserversteuerelement zu einer Web Forms-Seite hinzu

Siehe auch

Konzepte

Weitere Ressourcen

Zusätzliche Ressourcen