연습: JavaScript에서 웹 사용자 컨트롤에 있는 컨트롤에 더 쉽게 액세스할 수 있도록 만들기

이 연습에서는 DropDownList 컨트롤과 Label 컨트롤을 표시하는 웹 사용자 정의 컨트롤을 만듭니다. 드롭다운 목록의 4계절 중 하나를 선택하면 클라이언트 스크립트가 레이블 텍스트를 해당 계절의 대표적인 스포츠 이름으로 설정합니다.

Label 컨트롤은 HTML의 span 요소로 렌더링되며 클라이언트 스크립트에서 id 특성을 사용하여 span 요소에 대한 참조를 가져옵니다. 페이지 내에서 사용자 정의 컨트롤의 위치에 관계없이 ID를 동일하게 유지하고 클라이언트 스크립트가 작동하도록 하기 위해 Label 컨트롤의 ClientIDModeStatic으로 설정합니다.

예측 가능한 HTML id 특성을 생성하는 Label 컨트롤을 사용하여 웹 사용자 정의 컨트롤을 만들려면 Label 컨트롤의 ClientIDMode 속성을 Static으로 설정합니다.

사용자 정의 컨트롤을 만들려면

  1. Visual Studio에서 Seasons.ascx라는 새 웹 사용자 정의 컨트롤을 만듭니다.

  2. 사용자 정의 컨트롤에 DropDownList 컨트롤을 추가합니다.

  3. 디자인 뷰에 있지 않다면 디자인 뷰로 전환합니다.

  4. DropDownList 작업 메뉴를 열고 항목 편집을 클릭합니다.

  5. 다음 값을 사용하여 항목을 추가합니다.

    • Select a season

    • Spring

    • Summer

    • Autumn

    • Winter

  6. 사용자 정의 컨트롤에서 DropDownList 컨트롤 뒤에 Label 컨트롤을 추가합니다.

  7. Label 컨트롤의 속성 창에서 IDSelectedSport로 설정하고 ClientIDMode를 Static으로 설정한 다음 텍스트 필드를 지웁니다.

  8. 소스 뷰로 전환합니다.

  9. 두 컨트롤 사이에 줄 바꿈(<br />)을 삽입합니다.

  10. asp:DropDownList 요소 앞에 다음 클라이언트 스크립트를 추가합니다.

    
    
    <script type="text/javascript">
      var seasonalSports = new Array("None selected",
                                     "Tennis",
                                     "Volleyball",
                                     "Baseball",
                                     "Skiing");
    
      function DisplaySport(x) {
          document.getElementById("SelectedSport").innerHTML
          = seasonalSports[x];
      }    
    </script>
    
    
    
    

    이 스크립트는 DropDownList 서버 컨트롤에 대해 렌더링되는 HTML select 요소의 selectedIndex 속성을 사용하여 선택한 계절 이름에 해당하는 스포츠 이름을 선택합니다. 그런 다음 Label 컨트롤에 대해 렌더링되는 span 요소의 innerHTML 속성을 해당 이름으로 설정합니다.

  11. onChange 특성을 asp:DropDownList 요소에 추가합니다. 이렇게 하면 DropDownList 선택이 변경될 때마다 DisplaySport 함수가 실행됩니다. 그런 다음 DropDownList가 HTML select 요소로 렌더링되면서 select 요소의 selectedIndex 속성 값이 DisplaySport 함수에 전달됩니다.

    
    <asp:DropDownList ID="DropDownList1" runat="server" 
                      onchange="DisplaySport(this.selectedIndex);">
    
    
    

    완성된 서버 컨트롤의 태그는 다음과 유사합니다.

    
    <%@ Control AutoEventWireup="true" %>
    
    <script type="text/javascript">
      var seasonalSports = new Array("None selected",
                                     "Tennis",
                                     "Volleyball",
                                     "Baseball",
                                     "Skiing");
    
      function DisplaySport(x) {
          document.getElementById("SelectedSport").innerHTML
          = seasonalSports[x];
      }    
    </script>
    
    <asp:DropDownList ID="DropDownList1" runat="server" 
                      onchange="DisplaySport(this.selectedIndex);">
      <asp:ListItem Value="Select a season"></asp:ListItem>
      <asp:ListItem Value="Spring"></asp:ListItem>
      <asp:ListItem Value="Summer"></asp:ListItem>
      <asp:ListItem Value="Autumn"></asp:ListItem>
      <asp:ListItem Value="Winter"></asp:ListItem>
    </asp:DropDownList>
    <br />
    <asp:Label ID="SelectedSport" runat="server" ClientIDMode="Static">
    </asp:Label>
    
    
    

명명 컨테이너의 계층 구조 내에서 사용자 정의 컨트롤을 찾으려면 마스터 페이지와 콘텐츠 페이지를 만든 다음 콘텐츠 페이지에서 사용자 정의 컨트롤을 찾아야 합니다.

콘텐츠 페이지에 사용자 정의 컨트롤을 추가하려면

  1. Seasons.master라는 새 마스터 페이지를 만듭니다.

  2. Seasons.aspx라는 새 Web Form을 만들고 Seasons.master를 마스터 페이지로 선택합니다.

  3. Seasons.aspx가 열린 상태에서 디자인 뷰로 전환합니다.

  4. 솔루션 탐색기에서 사용자 정의 컨트롤 Seasons.ascx를 디자인 화면으로 끌어옵니다.

    마스터 페이지 Seasons.master의 태그는 다음과 유사합니다.

    
    <%@ Master AutoEventWireup="true" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <asp:ContentPlaceHolder id="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
    
            </asp:ContentPlaceHolder>
        </div>
        </form>
    </body>
    </html>
    
    
    

    그리고 콘텐츠 페이지 Seasons.aspx의 태그는 다음과 유사합니다.

    
    <%@ Page Title="" MasterPageFile="~/Seasons.master" AutoEventWireup="true" %>
    
    <%@ Register Src="Seasons.ascx" TagName="Seasons" TagPrefix="uc1" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
      <uc1:Seasons ID="Seasons1" runat="server" />
    </asp:Content>
    
    
    
  5. 솔루션 탐색기에서 마우스 오른쪽 단추로 Seasons.aspx를 클릭하고 브라우저에서 보기를 선택합니다.

    Select a season이 표시된 드롭다운 상자가 나타납니다.

    Seasons.ascx 드롭다운 상자
  6. Spring을 선택합니다.

    드롭다운 상자 아래에 Tennis가 표시됩니다.

  7. 브라우저에서 페이지 소스를 봅니다.

    Label 컨트롤이 span 요소로 렌더링되었음을 알 수 있습니다.

    <span id="SelectedSport"></span>
    

    Label 컨트롤의 ClientIDMode 속성을 설정하지 않았다면 id 특성이 ctl00_ContentPlaceHolder1_Seasons1_SelectedSport로 렌더링될 수 있습니다. 사용자 정의 컨트롤이 다른 명명 컨테이너(다른 마스터 페이지, 콘텐츠 페이지 또는 페이지의 컨테이너 컨트롤)에 있는 경우 id가 변경될 수 있기 때문에 사용자 정의 컨트롤의 사용 방법이나 사용 위치에 관계없이 항상 작동할 수 있는 클라이언트 스크립트를 작성하기가 어렵습니다.

이 연습에서는 클라이언트 스크립트를 사용하여 웹 사용자 정의 컨트롤에 있는 컨트롤에 액세스하는 방법을 살펴보았습니다. 이제부터는 ASP.NET에서 ClientID 값을 생성하는 방법 및 데이터 바인딩된 컨트롤에 대한 특별한 고려 사항에 대해 더 자세히 알아볼 수 있습니다. 다음 목록에서는 추가로 배울 수 있는 항목을 제안합니다.

표시: