연습: 사용자 정의 컨트롤을 사용하여 웹 파트 개인 설정 구현

아티클
10/22/2014

업데이트: 2007년 11월

이 연습에서는 웹 파트 개인 설정을 사용하여 웹 페이지에서 사용자별 기본값을 제공하는 ASP.NET 사용자 정의 컨트롤을 만드는 방법을 보여 줍니다.

ASP.NET 웹 파트를 사용하면 사용자가 필요에 따라 모양과 콘텐츠를 수정할 수 있는 모듈식 레이아웃으로 웹 페이지를 만들 수 있습니다. 개인 설정이라는 중요한 웹 파트 기능을 사용하면 각 페이지의 사용자별 설정을 저장하고 나중에 브라우저 세션에서 이러한 설정을 다시 사용할 수 있습니다.

웹 파트와 개인 설정을 사용하면 많은 웹 응용 프로그램에서 유용한 기능, 즉 사용자별 기본값을 폼으로 제공하는 기능이 포함된 웹 페이지를 만들 수 있습니다. 이 연습에서는 개인 설정할 수 있는 웹 파트 컨트롤로 처리될 수 있는 사용자 정의 컨트롤을 구현하여 사용자별 기본값을 제공하는 방법을 보여 줍니다. 예를 들어, 고객 서비스 대리점에서 온라인 폼을 입력하기 위한 응용 프로그램 등을 만드는 경우에 이러한 개발 방식이 유용할 수 있습니다. 웹 파트 및 개인 설정 기능을 사용하면 페이지에서 각 대리점을 인식할 수 있습니다. 사용자 정의 컨트롤을 사용하여 각 대리점에서 폼에 있는 필드의 기본값을 저장하면 나중에 페이지를 방문할 때 기본값이 자동으로 입력될 수 있습니다.

참고:
이 연습에서 만드는 사용자 정의 컨트롤은 WebPart 클래스에서 상속되지 않습니다. 그러나 이 연습에서는 사용자 정의 컨트롤을 WebPart 컨트롤로 사용하는 방법을 설명합니다. 연습을 수행하는 동안 사용자 정의 컨트롤을 WebPartZoneBase 영역에 추가합니다. 이렇게 하면 ASP.NET에서 사용자 정의 컨트롤을 GenericWebPart 컨트롤에 래핑할 수 있습니다. 그러면 사용자 정의 컨트롤이 다른 WebPart 컨트롤과 같이 작동하므로 개인 설정을 연습해 볼 수 있습니다.

이 연습에서 만드는 사용자 정의 컨트롤은 WebPart 클래스에서 상속되지 않습니다. 그러나 이 연습에서는 사용자 정의 컨트롤을 WebPart 컨트롤로 사용하는 방법을 설명합니다. 연습을 수행하는 동안 사용자 정의 컨트롤을 WebPartZoneBase 영역에 추가합니다. 이렇게 하면 ASP.NET에서 사용자 정의 컨트롤을 GenericWebPart 컨트롤에 래핑할 수 있습니다. 그러면 사용자 정의 컨트롤이 다른 WebPart 컨트롤과 같이 작동하므로 개인 설정을 연습해 볼 수 있습니다.

이 연습을 통해 다음과 같은 작업 방법을 배웁니다.

값을 장기간 저장소에 저장할 수 있으며 개인 설정이 가능한 속성을 사용하여 사용자 정의 컨트롤을 만듭니다.
사용자별 기본값을 웹 페이지의 폼에 표시합니다.

사용자 정의 컨트롤을 영역에서 실제 WebPart 컨트롤처럼 사용합니다.

참고:
이러한 형식의 응용 프로그램은 ASP.NET 프로필을 사용하여 개발할 수 있습니다. 그러나 이 경우에는 장바구니 응용 프로그램에서처럼 사용자 정보를 전체 응용 프로그램에서 다시 사용할 수 있는 방식으로 저장하지 않습니다. 대신, 페이지 단위로 각 컨트롤에 대한 사용자별 기본 설정 또는 설정을 저장합니다. 프로필에 대한 자세한 내용은 ASP.NET 프로필 속성 개요를 참조하십시오.

이러한 형식의 응용 프로그램은 ASP.NET 프로필을 사용하여 개발할 수 있습니다. 그러나 이 경우에는 장바구니 응용 프로그램에서처럼 사용자 정보를 전체 응용 프로그램에서 다시 사용할 수 있는 방식으로 저장하지 않습니다. 대신, 페이지 단위로 각 컨트롤에 대한 사용자별 기본 설정 또는 설정을 저장합니다. 프로필에 대한 자세한 내용은 ASP.NET 프로필 속성 개요를 참조하십시오.

사전 요구 사항

이 연습을 완료하려면 다음과 같은 요건을 갖추어야 합니다.

사이트를 호스팅하는 컴퓨터에 IIS(인터넷 정보 서비스)가 설치 및 구성되어야 합니다. IIS 설치 및 구성에 대한 자세한 내용은 설치 프로그램에 포함된 IIS 도움말 문서를 참조하거나 Microsoft TechNet 사이트의 온라인 IIS 설명서(Internet Information Services 6.0 Technical Resources)를 참조하십시오.
개별 사용자를 식별할 수 있는 ASP.NET 웹 사이트가 있어야 합니다. 사이트가 이미 구성되어 있으면 이 연습의 시작 지점으로 해당 사이트를 사용할 수 있습니다. 사이트가 구성되지 않은 경우 가상 디렉터리 또는 사이트를 만드는 방법에 대한 자세한 내용은 방법: IIS 5.0 및 6.0에서 가상 디렉터리 만들기 및 구성을 참조하십시오.
개인 설정 공급자 및 데이터베이스가 구성되어야 합니다. 웹 파트 개인 설정은 기본적으로 사용되며, Microsoft SQL Server Standard Edition의 SQL 개인 설정 공급자(SqlPersonalizationProvider)를 사용하여 개인 설정 데이터를 저장합니다. 이 연습에서는 SSE와 기본 SQL 공급자를 사용합니다. SSE가 설치되어 있으면 구성이 필요하지 않습니다. SSE는 Microsoft Visual Studio 2005와 함께 설치 옵션으로 제공되거나 무료로 다운로드할 수 있습니다. 자세한 내용은 Microsoft SQL Server 2005 Express Edition 웹 사이트를 참조하십시오. SQL Server 정식 버전을 사용하려면 ASP.NET 응용 프로그램 서비스 데이터베이스를 설치 및 구성하고 SQL 개인 설정 공급자를 구성하여 해당 데이터베이스에 연결해야 합니다. 자세한 내용은 SQL Server용 응용 프로그램 서비스 데이터베이스 만들기 및 구성을 참조하십시오. SQL 이외의 데이터베이스나 저장소 솔루션에서 사용할 사용자 지정 공급자를 만들고 구성할 수도 있습니다. 자세한 내용 및 코드 예제를 보려면 멤버 자격 공급자 구현을 참조하십시오.

개인 설정할 수 있는 사용자 정의 컨트롤 만들기

이 연습 부분에서는 대리점 정보 폼의 UI(사용자 인터페이스)를 제공하는 사용자 정의 컨트롤을 만듭니다. 또한 이 컨트롤에서는 이름과 전화 정보에 대한 개인 설정할 수 있는 속성을 노출합니다.

참고:
웹 파트 개인 설정은 기본적으로 사용되므로 사용하도록 설정할 필요가 없습니다. 개인 설정에 대한 자세한 내용은 웹 파트 개인 설정 개요를 참조하십시오.

사용자 정의 컨트롤에 대해 개인 설정할 수 있는 속성을 만들려면

텍스트 편집기에서 새 파일을 만들고 파일 시작 부분에 다음과 같은 컨트롤 선언을 <script> 여는 태그 및 닫는 태그와 함께 추가합니다.
```
<%@ control language="VB" classname="AccountUserControl" %>
<script >
</script>
```
```
<%@ control language="C#" classname="AccountUserControl" %>
<script >
</script>
```

참고:
각 속성에는 Personalizable 특성이 있습니다. 이렇게 하면 웹 파트 개인 설정에서 속성 값을 데이터베이스에 저장할 수 있습니다.

  <Personalizable()> _
  Property UserName() As String

    Get
      If Textbox1.Text Is Nothing Or Textbox1.Text.Length < 0 Then
          Return String.Empty
      Else
          Return Textbox1.Text
      End If
    End Get

    Set(ByVal value As String)
      Textbox1.Text = value
    End Set

  End Property

  <Personalizable()> _
  Property Phone() As String

    Get
      If Textbox2.Text Is Nothing Or Textbox2.Text.Length < 0 Then
          Return String.Empty
      Else
          Return Textbox2.Text
      End If
    End Get

    Set(ByVal value As String)
      Textbox2.Text = value
    End Set

  End Property

  [Personalizable]
  public string UserName
  {
    get
    {
      if(Textbox1.Text == null | Textbox1.Text.Length < 0)
        return String.Empty;
      else
        return Textbox1.Text;
    }

    set
    {
      Textbox1.Text = value;
    }
  }

  [Personalizable]
  public string Phone
  {
    get
    {
      if(Textbox2.Text == null | Textbox2.Text.Length < 0)
        return String.Empty;
      else
        return Textbox2.Text;
    }

    set
    {
      Textbox2.Text = value;
    }
  }

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

파일의 이름을 사용하는 언어에 따라 AccountUserControlCS.ascx 또는 AccountUserControlVB.ascx로 지정하고 이 파일을 웹 사이트의 루트 디렉터리에 저장합니다.

기본값을 저장할 개인 설정할 수 있는 속성을 추가했으므로 이제 사용자 정의 컨트롤에 UI 컨트롤을 추가하여 사용자 이름과 전화 번호를 표시할 수 있습니다.

사용자 정의 컨트롤에 UI 컨트롤을 추가하려면

다음 코드 예제와 같이 <script> 태그 아래에 <div> 태그로 래핑한 TextBox 컨트롤과 Label 컨트롤을 추가하여 사용자 이름을 포함합니다.
```
<div>
<asp:label id="Label1" >Name</asp:label>
<asp:textbox id="Textbox1"  />
</div>
```
방금 추가한 컨트롤 아래에 다음 예제와 같이 <div> 태그로 래핑한 TextBox 컨트롤과 Label 컨트롤을 추가하여 사용자 전화 번호를 포함합니다.
```
<div>
<asp:label id="Label2" >Phone</asp:label>
<asp:textbox id="Textbox2"  />
</div>
```
방금 추가한 컨트롤 아래에 <div> 태그로 래핑한 <asp:button> 요소를 추가하여 포스트백 수행을 통해 사용자 정보를 저장합니다.
```
<div>
<asp:button id="Button1"  
  text="Save Form Values" />
</div>
```
파일을 저장합니다.

사용자 정의 컨트롤을 웹 파트 컨트롤로 참조

개인 설정할 수 있는 속성이 있는 사용자 정의 컨트롤을 만들었으므로 사용자 정의 컨트롤을 웹 파트 컨트롤로 호스팅하는 ASP.NET 웹 페이지를 만들 수 있습니다. 개인 설정 기능이 작동하려면 컨트롤을 웹 파트 컨트롤로 호스팅해야 합니다.

사용자 정의 컨트롤을 웹 파트 컨트롤로 참조하려면

텍스트 편집기에서 새 파일을 만든 후 다음 페이지 선언을 파일의 시작 부분에 추가합니다.
```
<%@ page language="VB" %>
```
```
<%@ page language="C#" %>
```

페이지 선언 아래에 다음 예제와 같이 앞서 만든 사용자 정의 컨트롤을 참조하는 선언을 추가합니다.

<%@ register tagprefix="uc1" 
    tagname="AccountUserControl" 
    src="AccountUserControlvb.ascx"%>

<%@ register tagprefix="uc1" 
    tagname="AccountUserControl" 
    src="AccountUserControlcs.ascx"%>

컨트롤 참조 아래에 사용자 정의 컨트롤을 웹 파트 컨트롤로 호스팅하는 다음과 같은 기본 페이지 구조를 추가합니다.

참고:
사용자 정의 컨트롤이 웹 파트 컨트롤로 작동하려면, 페이지에 <asp:webpartmanager> 요소가 있고 사용자 정의 컨트롤이 <asp:webpartzone> 요소 및 <zonetemplate> 요소 내에 포함되어야 합니다.

<html>
<head >
    <title>Personalizable User Control</title>
</head>
<body>
    <form id="form1" >
      <asp:webpartmanager id="WebPartManager1"   />
      <asp:webpartzone id="zone1"  headertext="Main">
        <zonetemplate>
          <uc1:AccountUserControl 

            id="accountwebpart"
            title="Agent Information" /> 
        </zonetemplate>
      </asp:webpartzone>
    </form>
</body>
</html>

파일 이름을 Hostaccountcontrol.aspx로 지정하고 이 파일을 사용자 정의 컨트롤과 같은 디렉터리에 저장합니다.

이제 개인 설정할 수 있는 사용자 정의 컨트롤을 만들고, 이를 Web Forms 페이지의 웹 파트 컨트롤로 참조했습니다. 마지막으로 사용자 정의 컨트롤을 테스트합니다.

개인 설정할 수 있는 사용자 정의 컨트롤을 테스트하려면

브라우저에서 Hostaccountcontrol.aspx 페이지를 로드합니다.
Name 및 Phone 필드에 값을 입력하고 Save Form Values 단추를 클릭합니다.
브라우저를 닫습니다.
브라우저에서 페이지를 다시 로드합니다.

앞에서 입력한 값이 폼에 나타납니다. 이 값은 개인 설정할 수 있는 속성에 저장한 값이므로 브라우저에서 페이지를 다시 로드할 때 데이터베이스에서 복원되었습니다.
폼에 새 값을 입력하되 저장하는 단추를 클릭하지 않습니다.
브라우저를 닫습니다.
브라우저에서 페이지를 다시 로드합니다.

새 값을 저장하지 않았으므로 사용자가 입력하여 개인 설정된 속성으로 저장한 원래 값이 폼에 다시 나타납니다.

다음 단계

이 연습에서는 개인 설정할 수 있는 속성이 있는 사용자 정의 컨트롤을 만드는 것과 관련된 기본 작업에 대해 설명했습니다. 특정 컨트롤과 페이지에 대한 사용자별 설정을 저장하고 사용자가 새 브라우저 세션에서 이 페이지를 다시 방문할 때 이러한 저장된 설정을 표시할 수 있는 컨트롤을 만들었습니다. 다음과 같은 제안을 따르는 것이 좋습니다.

웹 파트 페이지를 만드는 것과 관련된 다른 구성 요소를 조사합니다. 이에 대한 소개를 보려면 연습: 웹 파트 페이지 만들기를 참조하십시오.
사용자 정의 컨트롤 작업에 대해 좀 더 자세히 배웁니다. 자세한 내용은 ASP.NET 사용자 정의 컨트롤 개요를 참조하십시오.
사용자 정의 컨트롤보다 프로그래밍 방식으로 보다 잘 제어할 수 있고 모든 웹 파트 기능을 제공하는 사용자 지정 웹 파트 컨트롤을 만드는 방법을 배웁니다. 자세한 내용은 방법: 사용자 정의 컨트롤을 웹 파트 컨트롤로 처리를 참조하십시오.

참고 항목

개념

ASP.NET 웹 파트 개요

웹 파트 개인 설정 개요

다음을 통해 공유