방법: Web Forms 페이지에 MultiView 웹 서버 컨트롤 추가(Visual Studio)

  • 아티클

업데이트: 2007년 11월

MultiView 및 View 웹 서버 컨트롤은 다른 컨트롤 및 태그에 대한 컨테이너 역할을 하며 대체 컨트롤 및 태그 집합을 표시할 수 있는 방법을 제공합니다. MultiView 및 View 컨트롤은 주로 모바일 장치의 브라우저에서 사용하기 위해 디자인되었지만 ASP.NET 페이지에서는 지원되지 않습니다.

Web Forms 페이지에 MultiView 웹 서버 컨트롤을 추가하려면

  1. 도구 상자의 표준 탭에서 MultiView 컨트롤을 페이지로 끌어 옵니다.

  2. 도구 상자의 표준 탭에서 View 컨트롤을 MultiView 컨트롤로 끌어 옵니다.

  3. View 컨트롤에 추가할 정적 텍스트를 입력합니다. View 컨트롤에 컨트롤을 추가하려면 해당 컨트롤을 도구 상자에서 View 컨트롤로 끌어 원하는 레이아웃을 만듭니다.

  4. 만들려는 View 컨트롤 각각에 대해 2단계와 3단계를 반복합니다.

  5. MultiView 컨트롤의 ActiveViewIndex 속성을 표시할 View 컨트롤의 인덱스 값으로 설정합니다. View 컨트롤을 표시하지 않으려면 이 속성을 -1로 설정합니다.

  6. 코드를 추가하여 프로그래밍 방식으로 ActiveViewIndex 속성을 View 컨트롤이 표시되는 집합으로 설정합니다.

    다음 예제에서는 MultiView 컨트롤에 대한 작업 방법을 보여 줍니다. 예제 페이지에는 두 개의 View 컨트롤이 들어 있습니다. 사용자가 RadioButton 컨트롤을 클릭하면 해당 단추에 대한 CheckedChanged 이벤트 처리기의 코드에서 ActiveViewIndex 속성을 설정하여 적절한 View 컨트롤을 표시합니다. 사용자가 Search 단추를 클릭하면 코드에서 적절한 View 컨트롤에 있는 TextBox 컨트롤의 값을 가져옵니다.

    보안 정보:

    이 예제에는 사용자 입력을 허용하는 텍스트 상자가 있으므로 보안상 위험할 수 있습니다. 기본적으로 ASP.NET 페이지에서는 사용자 입력 내용에 스크립트나 HTML 요소가 포함되어 있지 않은지 유효성을 검사합니다. 자세한 내용은 스크립트 악용 개요를 참조하십시오.

    		 
    <%@ 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" />
         
        <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> <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" />
         
        <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> <br />
        <br />
        <asp:Button ID="btnSearch" 
           OnClick="Button1_Click" 
            Text="Search" />
     </div>
    </form>
</body>
</html>

참고 항목

개념

MultiView 및 View 웹 서버 컨트롤 개요

기타 리소스

연습: 모바일 장치용 웹 페이지 만들기