다음을 통해 공유

데이터 바인딩 컨트롤

  • 아티클

작성자: Microsoft

대부분의 ASP.NET 애플리케이션은 백 엔드 데이터 원본에서 어느 정도의 데이터 프레젠테이션을 사용합니다. 데이터 바인딩된 컨트롤은 동적 웹 애플리케이션에서 데이터와 상호 작용하는 데 중요한 부분이었습니다. ASP.NET 2.0에서는 새 BaseDataBoundControl 클래스 및 선언적 구문을 포함하여 데이터 바인딩된 컨트롤이 크게 개선되었습니다.

대부분의 ASP.NET 애플리케이션은 백 엔드 데이터 원본에서 어느 정도의 데이터 프레젠테이션을 사용합니다. 데이터 바인딩된 컨트롤은 동적 웹 애플리케이션에서 데이터와 상호 작용하는 데 중요한 부분이었습니다. ASP.NET 2.0에서는 새 BaseDataBoundControl 클래스 및 선언적 구문을 포함하여 데이터 바인딩된 컨트롤이 크게 개선되었습니다.

BaseDataBoundControl은 DataBoundControl 클래스 및 HierarchicalDataBoundControl 클래스의 기본 클래스 역할을 합니다. 이 모듈에서는 DataBoundControl에서 파생되는 다음 클래스에 대해 설명합니다.

  • Adrotator
  • 컨트롤 나열
  • GridView
  • Formview
  • Detailsview

HierarchicalDataBoundControl 클래스에서 파생되는 다음 클래스에 대해서도 설명합니다.

  • TreeView
  • 메뉴
  • Sitemappath

DataBoundControl 클래스

DataBoundControl 클래스는 테이블 형식 또는 목록 스타일 데이터와 상호 작용하는 데 사용되는 추상 클래스(VB에서 MustInherit로 표시됨)입니다. 다음 컨트롤은 DataBoundControl에서 파생되는 몇 가지 컨트롤입니다.

Adrotator

AdRotator 컨트롤을 사용하면 특정 URL에 연결된 그래픽 배너를 웹 페이지에 표시할 수 있습니다. 표시되는 그래픽은 컨트롤의 속성을 사용하여 회전됩니다. 페이지에 표시되는 특정 광고의 빈도는 Impressions 속성을 사용하여 구성할 수 있으며 키워드(keyword) 필터링을 사용하여 광고를 필터링할 수 있습니다.

AdRotator 컨트롤은 데이터에 대해 데이터베이스의 XML 파일 또는 테이블을 사용합니다. 다음 특성은 XML 파일에서 AdRotator 컨트롤을 구성하는 데 사용됩니다.

ImageUrl

광고용으로 표시할 이미지의 URL입니다.

광고 클릭 시 사용자가 이동해야 하는 URL입니다. URL로 인코딩되어야 합니다.

AlternateText

도구 설명에 표시되고 화면 읽기 프로그램에서 읽는 대체 텍스트입니다. ImageUrl에서 지정한 이미지를 사용할 수 없는 경우에도 표시됩니다.

키워드

키워드(keyword) 필터링을 사용할 때 사용할 수 있는 키워드(keyword) 정의합니다. 지정된 경우 키워드(keyword) 필터와 일치하는 키워드(keyword) 있는 광고만 표시됩니다.

Impressions

특정 광고의 표시 빈도를 결정하는 가중치 숫자입니다. 동일한 파일에 있는 다른 광고의 노출과 상대적입니다. XML 파일의 모든 광고에 대한 총 노출의 최대값은 2,048,000,000 1입니다.

높이

광고의 높이(픽셀)입니다.

너비

광고 너비(픽셀)입니다.

참고

Height 및 Width 특성은 AdRotator 컨트롤 자체의 높이와 너비를 재정의합니다.

일반적인 XML 파일은 다음과 같을 수 있습니다.

<?xml version="1.0" encoding="utf-8" ?> <Advertisements xmlns="http://schemas.microsoft.com/AspNet/AdRotator-Schedule-File"> <Ad> <ImageUrl>~/images/Contoso_ad.gif</ImageUrl> <NavigateUrl>http://www.contoso-ltd.com</NavigateUrl> <AlternateText>Ad for Contoso, Ltd. Web site</AlternateText> <Impressions>100</Impressions> </Ad> <Ad> <ImageUrl>~/images/Aspnet_ad.gif</ImageUrl> <NavigateUrl>http://www.asp.net</NavigateUrl> <AlternateText>Ad for ASP.NET Web site</AlternateText> <Impressions>50</Impressions> </Ad> </Advertisements>

위의 예제에서 Contoso에 대한 광고의 경우 Impressions 특성 값 때문에 ASP.NET 웹 사이트의 광고보다 두 배 더 많이 표시될 가능성이 높습니다.

위의 XML 파일에서 광고를 표시하려면 페이지에 AdRotator 컨트롤을 추가하고 아래와 같이 AdsFile 속성을 XML 파일을 가리키도록 설정합니다.

<asp:AdRotator ID="AdRotator1" runat="server" AdvertisementFile="App_Data/Ads.xml" />

데이터베이스 테이블을 AdRotator 컨트롤의 데이터 원본으로 사용하도록 선택하는 경우 먼저 다음 스키마를 사용하여 데이터베이스를 설정해야 합니다.

열 이름 데이터 형식 설명
ID Int 기본 키입니다. 이 열에는 이름이 있을 수 있습니다.
ImageUrl nvarchar(length) 광고에서 표시할 이미지의 상대 또는 절대 URL입니다.
Navigateurl nvarchar(length) 광고의 대상 URL입니다. 값을 제공하지 않으면 광고의 하이퍼링크가 아닙니다.
AlternateText nvarchar(length) 이미지를 찾을 수 없는 경우 표시되는 텍스트입니다. 일부 브라우저에서는 텍스트가 도구 설명으로 표시됩니다. 그래픽을 볼 수 없는 사용자가 설명을 크게 읽을 수 있도록 접근성에도 대체 텍스트가 사용됩니다.
키워드 nvarchar(length) 페이지가 필터링할 수 있는 광고의 범주입니다.
Impressions int(4) 광고 표시 빈도를 나타내는 숫자입니다. 숫자가 클수록 광고 표시 빈도를 높입니다. XML 파일의 모든 노출 값은 2,048,000,000 -1을 초과하지 않을 수 있습니다.
너비 int(4) 이미지 너비(픽셀)입니다.
높이 int(4) 이미지의 높이(픽셀)입니다.

다른 스키마를 가진 데이터베이스가 이미 있는 경우 AlternateTextField, ImageUrlField 및 NavigateUrlField 속성을 사용하여 AdRotator 특성을 기존 데이터베이스에 매핑할 수 있습니다. AdRotator 컨트롤에서 데이터베이스의 데이터를 표시하려면 페이지에 데이터 원본 컨트롤을 추가하고, 데이터베이스를 가리키도록 데이터 원본 컨트롤에 대한 연결 문자열을 구성하고, AdRotator 컨트롤의 DataSourceID 속성을 데이터 원본 컨트롤의 ID로 설정합니다. 프로그래밍 방식으로 AdRotator 광고를 구성해야 하는 경우 AdCreated 이벤트를 사용합니다. AdCreated 이벤트는 두 개의 매개 변수를 사용합니다. 하나는 개체이고 다른 하나는 AdCreatedEventArgs의 instance. AdCreatedEventArgs는 생성되는 광고의 참조입니다.

다음 코드 조각은 프로그래밍 방식으로 광고의 ImageUrl, NavigateUrl 및 AlternateText를 설정합니다.

protected void AdRotator1_AdCreated(object sender, System.Web.UI.WebControls.AdCreatedEventArgs e) { e.ImageUrl = "images/contoso_ad.gif"; e.NavigateUrl = "http://www.contoso-ltd.com/"; e.AlternateText = "Ad for Contoso, Ltd Web site"; }

목록 컨트롤

목록 컨트롤에는 ListBox, DropDownList, CheckBoxList, RadioButtonList 및 BulletedList가 포함됩니다. 이러한 각 컨트롤은 데이터 원본에 바인딩된 데이터일 수 있습니다. 데이터 원본의 한 필드를 표시 텍스트로 사용하고 필요에 따라 두 번째 필드를 항목 값으로 사용할 수 있습니다. 디자인 타임에 항목을 정적으로 추가할 수도 있으며 정적 항목과 데이터 원본에서 추가된 동적 항목을 혼합할 수 있습니다.

목록 컨트롤을 데이터 바인딩하려면 페이지에 데이터 원본 컨트롤을 추가합니다. 데이터 원본 컨트롤에 대해 SELECT 명령을 지정한 다음 목록 컨트롤의 DataSourceID 속성을 데이터 소스 컨트롤의 ID로 설정합니다. DataTextField 및 DataValueField 속성을 사용하여 컨트롤의 표시 텍스트와 값을 정의합니다. 또한 DataTextFormatString 속성을 사용하여 다음과 같이 표시 텍스트의 모양을 제어할 수 있습니다.

식 설명
가격: {0:C} 숫자/10진수 데이터의 경우. 리터럴 "Price:" 뒤에 통화 형식의 숫자를 표시합니다. 통화 형식은 Page 지시문 또는 Web.config 파일의 culture 특성에 지정된 문화권 설정에 따라 달라집니다.
{0:D4} 정수 데이터의 경우. 10진수와 함께 사용할 수 없습니다. 정수는 너비가 4자인 0패딩 필드에 표시됩니다.
{0:N2}% 숫자 데이터의 경우. 소수 자릿수가 2인 숫자와 리터럴 "%"을(를) 표시합니다.
{0:000.0} 숫자/10진수 데이터의 경우. 숫자는 10진수로 반올림됩니다. 세 자리보다 작은 숫자는 0으로 채워집니다.
{0:D} 날짜/시간 데이터의 경우. 긴 날짜 형식("1996년 8월 6일 목요일")을 표시합니다. 날짜 형식은 page 지시문 또는 Web.config 파일의 문화권 설정에 따라 달라집니다.
{0:d} 날짜/시간 데이터의 경우. 짧은 날짜 형식("12/31/99")을 표시합니다.
{0:yy-MM-dd} 날짜/시간 데이터의 경우. 날짜를 숫자 연도-월-일 형식으로 표시합니다(96-08-06).

GridView

GridView 컨트롤은 선언적 접근 방식을 사용하여 테이블 형식 데이터 표시 및 편집을 허용하며 DataGrid 컨트롤의 후속 작업입니다. GridView 컨트롤에서 사용할 수 있는 기능은 다음과 같습니다.

  • SqlDataSource와 같은 데이터 원본 컨트롤에 바인딩합니다.
  • 기본 제공 정렬 기능.
  • 기본 제공 업데이트 및 삭제 기능.
  • 기본 제공 페이징 기능.
  • 기본 제공 행 선택 기능.
  • 속성을 동적으로 설정하고 이벤트를 처리하는 GridView 개체 모델에 프로그래밍 방식으로 액세스합니다.
  • 여러 키 필드.
  • 하이퍼링크 열에 대한 여러 데이터 필드입니다.
  • 테마 및 스타일을 통해 사용자 지정할 수 있는 모양입니다.

열 필드

GridView 컨트롤의 각 열은 DataControlField 개체로 표시됩니다. 기본적으로 AutoGenerateColumns 속성은 true로 설정되어 데이터 원본의 각 필드에 대해 AutoGeneratedField 개체를 만듭니다. 그런 다음 각 필드가 데이터 원본에 표시되는 순서대로 GridView 컨트롤의 열로 렌더링됩니다. AutoGenerateColumns 속성을 false로 설정한 다음 고유한 열 필드 컬렉션을 정의하여 GridView 컨트롤에 표시되는 열 필드를 수동으로 제어할 수도 있습니다. 서로 다른 열 필드 형식은 컨트롤에 있는 열의 동작을 결정합니다.

다음 표에는 사용할 수 있는 다양한 열 필드 형식이 나와 있습니다.

열 필드 형식 설명
BoundField 데이터 원본의 필드 값을 표시합니다. GridView 컨트롤의 기본 열 형식입니다.
ButtonField GridView 컨트롤의 각 항목에 대한 명령 단추를 표시합니다. 이렇게 하면 추가 또는 제거 단추와 같은 사용자 지정 단추 컨트롤의 열을 만들 수 있습니다.
CheckBoxField GridView 컨트롤의 각 항목에 대한 검사 상자를 표시합니다. 이 열 필드 형식은 일반적으로 부울 값이 있는 필드를 표시하는 데 사용됩니다.
CommandField 선택, 편집 또는 삭제 작업을 수행하기 위해 미리 정의된 명령 단추를 표시합니다.
HyperLinkField 하이퍼링크로 데이터 원본의 필드의 값을 표시합니다. 이 열 필드 형식을 사용하면 하이퍼링크의 URL에 두 번째 필드를 바인딩할 수 있습니다.
ImageField GridView 컨트롤의 각 항목에 대한 이미지를 표시합니다.
Templatefield 지정한 템플릿에 따라 GridView 컨트롤의 각 항목에 대한 사용자 정의 콘텐츠를 표시합니다. 이 열 필드 형식을 사용하면 사용자 지정 열 필드를 만들 수 있습니다.

열 필드 컬렉션을 선언적으로 정의하려면 먼저 GridView 컨트롤의 여는 태그와 닫는 <태그 사이에 열 열기 및 닫는 열> 태그를 추가합니다. 다음으로 열 열기 태그와 닫 <는 열 태그 사이에 포함할 열> 필드를 나열합니다. 지정된 열은 열 컬렉션에 나열된 순서대로 추가됩니다. Columns 컬렉션은 컨트롤의 모든 열 필드를 저장하고 GridView 컨트롤에서 열 필드를 프로그래밍 방식으로 관리할 수 있도록 합니다.

명시적으로 선언된 열 필드는 자동으로 생성된 열 필드와 함께 표시될 수 있습니다. 둘 다 사용되면 명시적으로 선언된 열 필드가 먼저 렌더링되고 그 뒤에 자동으로 생성된 열 필드가 표시됩니다.

데이터 소스 컨트롤에 바인딩

GridView 컨트롤은 데이터 원본 컨트롤(예: SqlDataSource, ObjectDataSource 등)과 System.Collections.IEnumerable 인터페이스를 구현하는 모든 데이터 원본(예: System.Data.DataView, System.Collections.ArrayList 또는 System.Collections.Hashtable)에 바인딩될 수 있습니다. 다음 방법 중 하나를 사용하여 GridView 컨트롤을 적절한 데이터 원본 형식에 바인딩합니다.

  • 데이터 원본 컨트롤에 바인딩하려면 GridView 컨트롤의 DataSourceID 속성을 데이터 소스 컨트롤의 ID 값으로 설정합니다. GridView 컨트롤은 지정된 데이터 원본 컨트롤에 자동으로 바인딩되며 데이터 원본 컨트롤의 기능을 활용하여 정렬, 업데이트, 삭제 및 페이징 기능을 수행할 수 있습니다. 이것은 데이터 바인딩할 기본 방법입니다.
  • System.Collections.IEnumerable 인터페이스를 구현하는 데이터 원본에 바인딩하려면 프로그래밍 방식으로 GridView 컨트롤의 DataSource 속성을 데이터 원본으로 설정한 다음 DataBind 메서드를 호출합니다. 이 메서드를 사용하는 경우 GridView 컨트롤은 기본 제공 정렬, 업데이트, 삭제 및 페이징 기능을 제공하지 않습니다. 이 기능을 직접 제공해야 합니다.

GridView 컨트롤 작업

GridView 컨트롤은 사용자가 컨트롤의 항목을 정렬, 업데이트, 삭제, 선택 및 페이지를 만들 수 있는 많은 기본 제공 기능을 제공합니다. GridView 컨트롤이 데이터 원본 컨트롤에 바인딩된 경우 GridView 컨트롤은 데이터 원본 컨트롤의 기능을 활용하고 자동 정렬, 업데이트 및 삭제 기능을 제공할 수 있습니다.

참고

GridView 컨트롤은 다른 유형의 데이터 원본을 사용하여 정렬, 업데이트 및 삭제를 지원할 수 있습니다. 그러나 이러한 작업에 대한 구현과 함께 적절한 이벤트 처리기를 제공해야 합니다.

정렬을 사용하면 사용자가 열의 머리글을 클릭하여 특정 열과 관련하여 GridView 컨트롤의 항목을 정렬할 수 있습니다. 정렬을 사용하도록 설정하려면 AllowSorting 속성을 true로 설정합니다.

ButtonField 또는 TemplateField 열 필드에 각각 "편집", "삭제" 및 "선택"이라는 명령 이름이 있는 단추를 클릭하면 자동 업데이트, 삭제 및 선택 기능이 활성화됩니다. AutoGenerateEditButton, AutoGenerateDeleteButton 또는 AutoGenerateSelectButton 속성이 각각 true로 설정된 경우 GridView 컨트롤은 편집, 삭제 또는 선택 단추가 있는 CommandField 열 필드를 자동으로 추가할 수 있습니다.

참고

데이터 원본에 레코드를 삽입하는 것은 GridView 컨트롤에서 직접 지원되지 않습니다. 그러나 DetailsView 또는 FormView 컨트롤과 함께 GridView 컨트롤을 사용하여 레코드를 삽입할 수 있습니다.

GridView 컨트롤은 데이터 원본의 모든 레코드를 동시에 표시하는 대신 자동으로 레코드를 페이지로 분리할 수 있습니다. 페이징을 사용하도록 설정하려면 AllowPaging 속성을 true로 설정합니다.

GridView의 모양 사용자 지정

컨트롤의 여러 부분에 대한 스타일 속성을 설정하여 GridView 컨트롤의 모양을 사용자 지정할 수 있습니다. 다음 표에서 다양 한 스타일 속성을 나열합니다.

스타일 속성 설명
AlternatingRowStyle GridView 컨트롤의 번갈아 데이터 행에 대한 스타일 설정입니다. 이 속성을 설정하면 RowStyle 설정과 AlternatingRowStyle 설정 간에 데이터 행이 번갈아 표시됩니다.
EditRowStyle GridView 컨트롤에서 편집 중인 행에 대한 스타일 설정입니다.
EmptyDataRowStyle 데이터 원본에 레코드가 없는 경우 GridView 컨트롤에 표시되는 빈 데이터 행에 대한 스타일 설정입니다.
FooterStyle GridView 컨트롤의 바닥글 행에 대한 스타일 설정입니다.
HeaderStyle GridView 컨트롤의 머리글 행에 대한 스타일 설정입니다.
PagerStyle GridView 컨트롤의 호출기 행에 대한 스타일 설정입니다.
RowStyle GridView 컨트롤의 데이터 행에 대한 스타일 설정입니다. AlternatingRowStyle 속성도 설정되면 RowStyle 설정과 AlternatingRowStyle 설정 간에 데이터 행이 교대로 표시됩니다.
SelectedRowStyle GridView 컨트롤에서 선택한 행에 대한 스타일 설정입니다.

또한 표시 하거나 컨트롤의 다른 파트를 숨길 수 있습니다. 다음 표에서 표시 하거나 숨길는 부분을 제어 하는 속성을 보여 줍니다.

속성 설명
ShowFooter GridView 컨트롤의 바닥글 섹션을 표시하거나 숨깁니다.
Showheader GridView 컨트롤의 헤더 섹션을 표시하거나 숨깁니다.

이벤트

GridView 컨트롤은 프로그래밍할 수 있는 여러 이벤트를 제공합니다. 이렇게 하면 이벤트가 발생할 때마다 사용자 지정 루틴을 실행할 수 있습니다. 다음 표에서는 GridView 컨트롤에서 지원하는 이벤트를 나열합니다.

이벤트 설명
PageIndexChanged 호출기 단추 중 하나를 클릭하지만 GridView 컨트롤이 페이징 작업을 처리한 후에 발생합니다. 이 이벤트는 사용자가 컨트롤의 다른 페이지로 이동한 후 작업을 수행해야 하는 경우에 일반적으로 사용됩니다.
PageIndexChanging 호출기 단추 중 하나를 클릭하지만 GridView 컨트롤이 페이징 작업을 처리하기 전에 발생합니다. 이 이벤트는 페이징 작업을 취소하는 데 자주 사용됩니다.
RowCancelingEdit 행의 취소 단추를 클릭하지만 GridView 컨트롤이 편집 모드를 종료하기 전에 발생합니다. 이 이벤트는 취소 작업을 중지하는 데 자주 사용됩니다.
Rowcommand GridView 컨트롤에서 단추를 클릭할 때 발생합니다. 이 이벤트는 컨트롤에서 단추를 클릭할 때 작업을 수행하는 데 자주 사용됩니다.
RowCreated GridView 컨트롤에서 새 행을 만들 때 발생합니다. 이 이벤트는 행을 만들 때 행의 내용을 수정하는 데 자주 사용됩니다.
RowDataBound 데이터 행이 GridView 컨트롤의 데이터에 바인딩되는 경우에 발생합니다. 이 이벤트는 행이 데이터에 바인딩된 경우 행의 내용을 수정하는 데 자주 사용됩니다.
RowDeleted 행의 삭제 단추를 클릭하지만 GridView 컨트롤이 데이터 원본에서 레코드를 삭제한 후에 발생합니다. 이 이벤트는 종종 삭제 작업의 결과를 검사 데 사용됩니다.
RowDeleting 행의 삭제 단추를 클릭하지만 GridView 컨트롤이 데이터 원본에서 레코드를 삭제하기 전에 발생합니다. 이 이벤트는 삭제 작업을 취소하는 데 자주 사용됩니다.
RowEditing 행의 편집 단추를 클릭하지만 GridView 컨트롤이 편집 모드로 전환되기 전에 발생합니다. 이 이벤트는 편집 작업을 취소하는 데 자주 사용됩니다.
Rowupdated 행의 업데이트 단추를 클릭하지만 GridView 컨트롤이 행을 업데이트한 후에 발생합니다. 이 이벤트는 업데이트 작업의 결과를 검사 데 자주 사용됩니다.
RowUpdating 행의 업데이트 단추를 클릭하지만 GridView 컨트롤이 행을 업데이트하기 전에 발생합니다. 이 이벤트는 업데이트 작업을 취소하는 데 자주 사용됩니다.
SelectedIndexChanged 행의 선택 단추를 클릭하지만 GridView 컨트롤이 선택 작업을 처리한 후에 발생합니다. 이 이벤트는 컨트롤에서 행을 선택한 후 작업을 수행하는 데 자주 사용됩니다.
SelectedIndexChanging 행의 선택 단추를 클릭하지만 GridView 컨트롤이 선택 작업을 처리하기 전에 발생합니다. 이 이벤트는 선택 작업을 취소하는 데 자주 사용됩니다.
정렬 열을 정렬하는 하이퍼링크를 클릭하지만 GridView 컨트롤이 정렬 작업을 처리한 후에 발생합니다. 이 이벤트는 일반적으로 사용자가 하이퍼링크를 클릭하여 열을 정렬한 후 작업을 수행하는 데 사용됩니다.
정렬 열을 정렬하는 하이퍼링크를 클릭하지만 GridView 컨트롤이 정렬 작업을 처리하기 전에 발생합니다. 이 이벤트는 정렬 작업을 취소하거나 사용자 지정 정렬 루틴을 수행하는 데 자주 사용됩니다.

Formview

FormView 컨트롤은 데이터 원본의 단일 레코드를 표시하는 데 사용됩니다. 행 필드 대신 사용자 정의 템플릿을 표시하는 것을 제외하고 DetailsView 컨트롤과 비슷합니다. 고유한 템플릿을 만들면 데이터가 표시되는 방식을 보다 유연하게 제어할 수 있습니다. FormView 컨트롤은 다음 기능을 지원합니다.

  • SqlDataSource 및 ObjectDataSource와 같은 데이터 원본 컨트롤에 바인딩합니다.
  • 기본 제공 삽입 기능.
  • 기본 제공 업데이트 및 삭제 기능.
  • 기본 제공 페이징 기능.
  • 속성을 동적으로 설정하고 이벤트를 처리하는 FormView 개체 모델에 프로그래밍 방식으로 액세스합니다.
  • 사용자 정의 템플릿, 테마 및 스타일을 통해 사용자 지정 가능한 모양입니다.

템플릿

FormView 컨트롤에서 콘텐츠를 표시하려면 컨트롤의 여러 부분에 대한 템플릿을 만들어야 합니다. 대부분의 템플릿은 선택 사항입니다. 그러나 컨트롤이 구성된 모드에 대한 템플릿을 만들어야 합니다. 예를 들어 레코드 삽입을 지원하는 FormView 컨트롤에는 삽입 항목 템플릿이 정의되어 있어야 합니다. 다음 표에서는 만들 수 있는 다양한 템플릿을 나열합니다.

템플릿 형식 설명
EditItemTemplate FormView 컨트롤이 편집 모드에 있을 때 데이터 행의 콘텐츠를 정의합니다. 이 템플릿에는 일반적으로 사용자가 기존 레코드를 편집할 수 있는 입력 컨트롤 및 명령 단추가 포함되어 있습니다.
EmptyDataTemplate FormView 컨트롤이 레코드를 포함하지 않는 데이터 원본에 바인딩될 때 표시되는 빈 데이터 행의 콘텐츠를 정의합니다. 이 템플릿에는 일반적으로 데이터 원본에 레코드가 포함되지 않음을 사용자에게 알리는 콘텐츠가 포함되어 있습니다.
FooterTemplate 바닥글 행의 콘텐츠를 정의합니다. 이 템플릿에는 일반적으로 바닥글 행에 표시하려는 추가 콘텐츠가 포함됩니다. 또는 FooterText 속성을 설정하여 바닥글 행에 표시할 텍스트를 지정할 수 있습니다.
HeaderTemplate 헤더 행의 콘텐츠를 정의합니다. 이 템플릿에는 일반적으로 머리글 행에 표시하려는 추가 콘텐츠가 포함됩니다. 또는 HeaderText 속성을 설정하여 머리글 행에 표시할 텍스트를 지정할 수 있습니다.
ItemTemplate FormView 컨트롤이 읽기 전용 모드인 경우 데이터 행의 콘텐츠를 정의합니다. 이 템플릿에는 일반적으로 기존 레코드의 값을 표시하는 콘텐츠가 포함되어 있습니다.
InsertItemTemplate FormView 컨트롤이 삽입 모드에 있을 때 데이터 행의 콘텐츠를 정의합니다. 이 템플릿에는 일반적으로 사용자가 새 레코드를 추가할 수 있는 입력 컨트롤 및 명령 단추가 포함되어 있습니다.
PagerTemplate 페이징 기능을 사용할 때 표시되는 호출기 행의 콘텐츠를 정의합니다(AllowPaging 속성이 true로 설정된 경우). 이 템플릿에는 일반적으로 사용자가 다른 레코드로 이동할 수 있는 컨트롤이 포함되어 있습니다.

항목 편집 템플릿 및 삽입 항목 템플릿의 입력 컨트롤은 양방향 바인딩 식을 사용하여 데이터 원본의 필드에 바인딩할 수 있습니다. 이렇게 하면 FormView 컨트롤이 업데이트 또는 삽입 작업에 대한 입력 컨트롤의 값을 자동으로 추출할 수 있습니다. 양방향 바인딩 식을 사용하면 항목 편집 템플릿의 입력 컨트롤이 원래 필드 값을 자동으로 표시할 수도 있습니다.

데이터 바인딩

FormView 컨트롤은 데이터 원본 컨트롤(예: SqlDataSource, AccessDataSource, ObjectDataSource 등) 또는 System.Collections.IEnumerable 인터페이스를 구현하는 모든 데이터 원본(예: System.Data.DataView, System.Collections.ArrayList 및 System.Collections.Hashtable)에 바인딩할 수 있습니다. 다음 방법 중 하나를 사용하여 FormView 컨트롤을 적절한 데이터 원본 형식에 바인딩합니다.

  • 데이터 원본 컨트롤에 바인딩하려면 FormView 컨트롤의 DataSourceID 속성을 데이터 소스 컨트롤의 ID 값으로 설정합니다. FormView 컨트롤은 지정된 데이터 원본 컨트롤에 자동으로 바인딩되며 데이터 원본 컨트롤의 기능을 활용하여 삽입, 업데이트, 삭제 및 페이징 기능을 수행할 수 있습니다. 이것은 데이터 바인딩할 기본 방법입니다.
  • System.Collections.IEnumerable 인터페이스를 구현하는 데이터 원본에 바인딩하려면 프로그래밍 방식으로 FormView 컨트롤의 DataSource 속성을 데이터 원본으로 설정한 다음 DataBind 메서드를 호출합니다. 이 메서드를 사용하는 경우 FormView 컨트롤은 기본 제공 삽입, 업데이트, 삭제 및 페이징 기능을 제공하지 않습니다. 적절한 이벤트를 사용하여 이 기능을 제공해야 합니다.

FormView 컨트롤 작업

FormView 컨트롤은 사용자가 컨트롤의 항목을 업데이트, 삭제, 삽입 및 페이지할 수 있는 많은 기본 제공 기능을 제공합니다. FormView 컨트롤이 데이터 원본 컨트롤에 바인딩된 경우 FormView 컨트롤은 데이터 원본 컨트롤의 기능을 활용하고 자동 업데이트, 삭제, 삽입 및 페이징 기능을 제공할 수 있습니다. FormView 컨트롤은 다른 유형의 데이터 원본을 사용하여 업데이트, 삭제, 삽입 및 페이징 작업을 지원할 수 있습니다. 그러나 이러한 작업에 대한 구현과 함께 적절한 이벤트 처리기를 제공해야 합니다.

FormView 컨트롤은 템플릿을 사용하므로 명령 단추를 자동으로 생성하여 업데이트, 삭제 또는 삽입 작업을 수행하는 방법을 제공하지 않습니다. 이러한 명령 단추를 적절한 템플릿에 수동으로 포함해야 합니다. FormView 컨트롤은 CommandName 속성이 특정 값으로 설정된 특정 단추를 인식합니다. 다음 표에서는 FormView 컨트롤이 인식하는 명령 단추를 나열합니다.

단추 Commandname 값 설명
취소 "취소" 작업을 업데이트하거나 삽입하여 작업을 취소하고 사용자가 입력한 값을 삭제하는 데 사용됩니다. 그런 다음 FormView 컨트롤이 DefaultMode 속성에 지정된 모드로 돌아갑니다.
삭제 "Delete" 데이터 원본에서 표시된 레코드를 삭제하는 작업을 삭제하는 데 사용됩니다. ItemDeleting 및 ItemDeleted 이벤트를 발생합니다.
편집 "Edit" FormView 컨트롤을 편집 모드로 전환하기 위한 업데이트 작업에 사용됩니다. EditItemTemplate 속성에 지정된 콘텐츠가 데이터 행에 대해 표시됩니다.
삽입 "Insert" 사용자가 제공한 값을 사용하여 데이터 원본에 새 레코드를 삽입하는 작업을 삽입하는 데 사용됩니다. ItemInserting 및 ItemInserted 이벤트를 발생합니다.
새로 만들기 "New" 삽입 작업에서 FormView 컨트롤을 삽입 모드로 배치하는 데 사용됩니다. InsertItemTemplate 속성에 지정된 콘텐츠가 데이터 행에 대해 표시됩니다.
페이지 "Page" 페이징 작업에서 페이징을 수행하는 호출기 행의 단추를 나타내는 데 사용됩니다. 페이징 작업을 지정하려면 단추의 CommandArgument 속성을 "다음", "Prev", "First", "Last" 또는 탐색할 페이지의 인덱스로 설정합니다. PageIndexChanging 및 PageIndexChanged 이벤트를 발생합니다.
업데이트 "업데이트" 업데이트 작업에서 사용자가 제공한 값으로 데이터 원본에 표시된 레코드를 업데이트하는 데 사용됩니다. ItemUpdating 및 ItemUpdated 이벤트를 발생합니다.

표시된 레코드를 즉시 삭제하는 삭제 단추와 달리 편집 또는 새로 만들기 단추를 클릭하면 FormView 컨트롤이 각각 편집 또는 삽입 모드로 전환됩니다. 편집 모드에서는 EditItemTemplate 속성에 포함된 콘텐츠가 현재 데이터 항목에 대해 표시됩니다. 일반적으로 편집 단추가 업데이트 및 취소 단추로 대체되도록 항목 편집 템플릿이 정의됩니다. 필드의 데이터 형식(예: TextBox 또는 CheckBox 컨트롤)에 적합한 입력 컨트롤도 일반적으로 사용자가 수정할 필드 값과 함께 표시됩니다. 업데이트 단추를 클릭하면 데이터 원본의 레코드가 업데이트되며 취소 단추를 클릭하면 변경 내용이 중단됩니다.

마찬가지로 InsertItemTemplate 속성에 포함된 콘텐츠는 컨트롤이 삽입 모드에 있을 때 데이터 항목에 대해 표시됩니다. 삽입 항목 템플릿은 일반적으로 새로 만들기 단추가 삽입 및 취소 단추로 대체되고 사용자가 새 레코드의 값을 입력할 수 있도록 빈 입력 컨트롤이 표시되도록 정의됩니다. 삽입 단추를 클릭하면 데이터 원본에 레코드가 삽입되며 취소 단추를 클릭하면 변경 내용이 중단됩니다.

FormView 컨트롤은 사용자가 데이터 원본의 다른 레코드로 이동할 수 있는 페이징 기능을 제공합니다. 사용하도록 설정하면 페이지 탐색 컨트롤이 포함된 FormView 컨트롤에 호출기 행이 표시됩니다. 페이징을 사용하도록 설정하려면 AllowPaging 속성을 true로 설정합니다. PagerStyle 및 PagerSettings 속성에 포함된 개체의 속성을 설정하여 호출기 행을 사용자 지정할 수 있습니다. 기본 제공 호출기 행 UI를 사용하는 대신 PagerTemplate 속성을 사용하여 고유한 UI를 만들 수 있습니다.

FormView의 모양 사용자 지정

컨트롤의 여러 부분에 대한 스타일 속성을 설정하여 FormView 컨트롤의 모양을 사용자 지정할 수 있습니다. 다음 표에서 다양 한 스타일 속성을 나열합니다.

스타일 속성 설명
EditRowStyle FormView 컨트롤이 편집 모드에 있을 때 데이터 행에 대한 스타일 설정입니다.
EmptyDataRowStyle 데이터 원본에 레코드가 없는 경우 FormView 컨트롤에 표시되는 빈 데이터 행에 대한 스타일 설정입니다.
FooterStyle FormView 컨트롤의 바닥글 행에 대한 스타일 설정입니다.
HeaderStyle FormView 컨트롤의 머리글 행에 대한 스타일 설정입니다.
InsertRowStyle FormView 컨트롤이 삽입 모드에 있을 때 데이터 행에 대한 스타일 설정입니다.
PagerStyle 페이징 기능을 사용할 때 FormView 컨트롤에 표시되는 호출기 행의 스타일 설정입니다.
RowStyle FormView 컨트롤이 읽기 전용 모드인 경우 데이터 행에 대한 스타일 설정입니다.

FormView 이벤트

FormView 컨트롤은 프로그래밍할 수 있는 여러 이벤트를 제공합니다. 이렇게 하면 이벤트가 발생할 때마다 사용자 지정 루틴을 실행할 수 있습니다. 다음 표에서는 FormView 컨트롤에서 지원하는 이벤트를 나열합니다.

이벤트 설명
Itemcommand FormView 컨트롤 내의 단추를 클릭할 때 발생합니다. 이 이벤트는 컨트롤에서 단추를 클릭할 때 작업을 수행하는 데 자주 사용됩니다.
Itemcreated FormView 컨트롤에서 모든 FormViewRow 개체를 만든 후에 발생합니다. 이 이벤트는 레코드가 표시되기 전에 레코드 값을 수정하는 데 자주 사용됩니다.
ItemDeleted 삭제 단추( CommandName 속성이 "삭제"로 설정된 단추)를 클릭하지만 FormView 컨트롤이 데이터 원본에서 레코드를 삭제하면 발생합니다. 이 이벤트는 종종 삭제 작업의 결과를 검사 데 사용됩니다.
ItemDeleting 삭제 단추를 클릭하지만 FormView 컨트롤이 데이터 원본에서 레코드를 삭제하기 전에 발생합니다. 이 이벤트는 종종 삭제 작업을 취소하는 데 사용됩니다.
ItemInserted 삽입 단추( CommandName 속성이 "삽입"으로 설정된 단추)를 클릭하지만 FormView 컨트롤이 레코드를 삽입한 후에 발생합니다. 이 이벤트는 삽입 작업의 결과를 검사 데 자주 사용됩니다.
ItemInserting 삽입 단추를 클릭하지만 FormView 컨트롤이 레코드를 삽입하기 전에 발생합니다. 이 이벤트는 삽입 작업을 취소하는 데 자주 사용됩니다.
ItemUpdated 업데이트 단추( CommandName 속성이 "업데이트"로 설정된 단추)를 클릭하지만 FormView 컨트롤이 행을 업데이트한 후에 발생합니다. 이 이벤트는 업데이트 작업의 결과를 검사 데 자주 사용됩니다.
ItemUpdating 업데이트 단추를 클릭하지만 FormView 컨트롤이 레코드를 업데이트하기 전에 발생합니다. 이 이벤트는 업데이트 작업을 취소하는 데 자주 사용됩니다.
ModeChanged FormView 컨트롤이 모드를 변경한 후에 발생합니다(편집, 삽입 또는 읽기 전용 모드). 이 이벤트는 FormView 컨트롤이 모드를 변경할 때 작업을 수행하는 데 자주 사용됩니다.
ModeChanging FormView 컨트롤이 모드를 변경하기 전에 발생합니다(편집, 삽입 또는 읽기 전용 모드). 이 이벤트는 종종 모드 변경을 취소 하려면 사용 합니다.
PageIndexChanged 호출기 단추 중 하나를 클릭하지만 FormView 컨트롤이 페이징 작업을 처리한 후에 발생합니다. 이 이벤트는 사용자가 컨트롤의 다른 레코드로 이동한 후 작업을 수행해야 하는 경우에 일반적으로 사용됩니다.
PageIndexChanging 호출기 단추 중 하나를 클릭하지만 FormView 컨트롤이 페이징 작업을 처리하기 전에 발생합니다. 이 이벤트는 페이징 작업을 취소하는 데 자주 사용됩니다.

Detailsview

DetailsView 컨트롤은 테이블의 데이터 원본에서 단일 레코드를 표시하는 데 사용되며, 여기서 레코드의 각 필드가 테이블의 행에 표시됩니다. master 세부 시나리오에 GridView 컨트롤과 함께 사용할 수 있습니다. DetailsView 컨트롤은 다음 기능을 지원합니다.

  • SqlDataSource와 같은 데이터 원본 컨트롤에 바인딩합니다.
  • 기본 제공 삽입 기능.
  • 기본 제공 업데이트 및 삭제 기능.
  • 기본 제공 페이징 기능.
  • DetailsView 개체 모델에 프로그래밍 방식으로 액세스하여 속성을 동적으로 설정하고 이벤트를 처리하는 등의 작업을 수행합니다.
  • 테마 및 스타일을 통해 사용자 지정할 수 있는 모양입니다.

행 필드

DetailsView 컨트롤의 각 데이터 행은 필드 컨트롤을 선언하여 만들어집니다. 여러 행 필드 형식은 컨트롤에 있는 행의 동작을 결정합니다. 필드 컨트롤은 DataControlField에서 파생됩니다. 다음 표에서는 사용할 수 있는 다양한 행 필드 형식을 나열합니다.

열 필드 형식 설명
BoundField 데이터 원본에서 필드의 값을 텍스트로 표시합니다.
ButtonField DetailsView 컨트롤에 명령 단추를 표시합니다. 이렇게 하면 추가 또는 제거 단추와 같은 사용자 지정 단추 컨트롤이 있는 행을 표시할 수 있습니다.
CheckBoxField DetailsView 컨트롤에 검사 상자를 표시합니다. 이 행 필드 형식은 일반적으로 부울 값이 있는 필드를 표시하는 데 사용됩니다.
CommandField DetailsView 컨트롤에서 편집, 삽입 또는 삭제 작업을 수행하는 기본 제공 명령 단추를 표시합니다.
HyperLinkField 하이퍼링크로 데이터 원본의 필드의 값을 표시합니다. 이 행 필드 형식을 사용하면 하이퍼링크의 URL에 두 번째 필드를 바인딩할 수 있습니다.
ImageField DetailsView 컨트롤에 이미지를 표시합니다.
Templatefield 지정한 템플릿에 따라 DetailsView 컨트롤의 행에 대한 사용자 정의 콘텐츠를 표시합니다. 이 행 필드 형식을 사용하면 사용자 지정 행 필드를 만들 수 있습니다.

기본적으로 AutoGenerateRows 속성은 true로 설정되며, 데이터 원본에서 바인딩 가능한 형식의 각 필드에 대해 바인딩된 행 필드 개체를 자동으로 생성합니다. 유효한 바인딩 가능한 형식은 String, DateTime, Decimal, Guid 및 기본 형식 집합입니다. 그런 다음 각 필드가 데이터 원본에 표시되는 순서대로 행에 텍스트로 표시됩니다.

행을 자동으로 생성하면 레코드의 모든 필드를 빠르고 쉽게 표시할 수 있습니다. 그러나 DetailsView 컨트롤의 고급 기능을 사용하려면 DetailsView 컨트롤에 포함할 행 필드를 명시적으로 선언해야 합니다. 행 필드를 선언하려면 먼저 AutoGenerateRows 속성을 false로 설정합니다. 다음으로 DetailsView 컨트롤의 여는 태그와 닫 <는 태그 사이에 열기 및 닫기 필드> 태그를 추가합니다. 마지막으로 여는 필드 태그와 닫 <는 필드 태그 사이에 포함할 행 필드를> 나열합니다. 지정된 행 필드가 나열된 순서대로 Fields 컬렉션에 추가됩니다. Fields 컬렉션을 사용하면 DetailsView 컨트롤에서 행 필드를 프로그래밍 방식으로 관리할 수 있습니다.

참고

자동으로 생성된 행 필드는 Fields 컬렉션에 추가되지 않습니다.

DetailsView를 사용하여 데이터에 바인딩

DetailsView 컨트롤은 SqlDataSource 또는 AccessDataSource 와 같은 데이터 원본 컨트롤 또는 System.Data.DataView, System.Collections.ArrayList 및 System.Collections.Hashtable과 같은 System.Collections.IEnumerable 인터페이스를 구현하는 모든 데이터 원본에 바인딩할 수 있습니다.

다음 방법 중 하나를 사용하여 DetailsView 컨트롤을 적절한 데이터 원본 형식에 바인딩합니다.

  • 데이터 원본 컨트롤에 바인딩하려면 DetailsView 컨트롤의 DataSourceID 속성을 데이터 원본 컨트롤의 ID 값으로 설정합니다. DetailsView 컨트롤은 지정된 데이터 원본 컨트롤에 자동으로 바인딩됩니다. 이것은 데이터 바인딩할 기본 방법입니다.
  • System.Collections.IEnumerable 인터페이스를 구현하는 데이터 원본에 바인딩하려면 DetailsView 컨트롤의 DataSource 속성을 데이터 원본으로 프로그래밍 방식으로 설정한 다음 DataBind 메서드를 호출합니다.

보안

악성 클라이언트 스크립트 포함 될 수 있는 사용자 입력을 표시 하려면이 제어를 사용할 수 있습니다. 애플리케이션에서 표시 하기 전에 실행 스크립트, SQL 문 또는 다른 코드에 대 한 클라이언트에서 전송 되는 모든 정보를 확인 합니다. ASP.NET에서는 사용자 입력에서 차단 스크립트를 HTML 입력된 요청 유효성 검사 기능을 제공 합니다.

DetailsView의 데이터 작업

DetailsView 컨트롤은 사용자가 컨트롤의 항목을 업데이트, 삭제, 삽입 및 페이지를 만들 수 있는 기본 제공 기능을 제공합니다. DetailsView 컨트롤이 데이터 원본 컨트롤에 바인딩된 경우 DetailsView 컨트롤은 데이터 원본 컨트롤의 기능을 활용하고 자동 업데이트, 삭제, 삽입 및 페이징 기능을 제공할 수 있습니다.

DetailsView 컨트롤은 다른 유형의 데이터 원본을 사용하여 업데이트, 삭제, 삽입 및 페이징 작업을 지원할 수 있습니다. 그러나 적절한 이벤트 처리기에서 이러한 작업에 대한 구현을 제공해야 합니다.

DetailsView 컨트롤은 AutoGenerateEditButton, AutoGenerateDeleteButton 또는 AutoGenerateInsertButton 속성을 각각 true로 설정하여 편집, 삭제 또는 새로 만들기 단추가 있는 CommandField 행 필드를 자동으로 추가할 수 있습니다. 선택한 레코드를 즉시 삭제하는 삭제 단추와 달리 편집 또는 새로 만들기 단추를 클릭하면 DetailsView 컨트롤이 각각 편집 또는 삽입 모드로 전환됩니다. 편집 모드에서 편집 단추는 업데이트 및 취소 단추로 바뀝니다. 필드의 데이터 형식(예: TextBox 또는 CheckBox 컨트롤)에 적합한 입력 컨트롤은 사용자가 수정할 필드 값과 함께 표시됩니다. 업데이트 단추를 클릭하면 데이터 원본의 레코드가 업데이트되며 취소 단추를 클릭하면 변경 내용이 중단됩니다. 마찬가지로 삽입 모드에서는 새로 만들기 단추가 삽입 및 취소 단추로 대체되고 사용자가 새 레코드의 값을 입력할 수 있도록 빈 입력 컨트롤이 표시됩니다.

DetailsView 컨트롤은 사용자가 데이터 원본의 다른 레코드로 이동할 수 있는 페이징 기능을 제공합니다. 사용하도록 설정하면 페이지 탐색 컨트롤이 호출기 행에 표시됩니다. 페이징을 사용하도록 설정하려면 AllowPaging 속성을 true로 설정합니다. PagerStyle 및 PagerSettings 속성을 사용하여 호출기 행을 사용자 지정할 수 있습니다.

DetailsView의 모양 사용자 지정

컨트롤의 여러 부분에 대한 스타일 속성을 설정하여 DetailsView 컨트롤의 모양을 사용자 지정할 수 있습니다. 다음 표에서 다양 한 스타일 속성을 나열합니다.

스타일 속성 설명
AlternatingRowStyle DetailsView 컨트롤의 번갈아 데이터 행에 대한 스타일 설정입니다. 이 속성을 설정하면 RowStyle 설정과 AlternatingRowStyle 설정 간에 데이터 행이 번갈아 표시됩니다.
CommandRowStyle DetailsView 컨트롤의 기본 제공 명령 단추가 포함된 행의 스타일 설정입니다.
EditRowStyle DetailsView 컨트롤이 편집 모드인 경우 데이터 행에 대한 스타일 설정입니다.
EmptyDataRowStyle 데이터 원본에 레코드가 없는 경우 DetailsView 컨트롤에 표시되는 빈 데이터 행에 대한 스타일 설정입니다.
FooterStyle DetailsView 컨트롤의 바닥글 행에 대한 스타일 설정입니다.
HeaderStyle DetailsView 컨트롤의 머리글 행에 대한 스타일 설정입니다.
InsertRowStyle DetailsView 컨트롤이 삽입 모드인 경우 데이터 행에 대한 스타일 설정입니다.
PagerStyle DetailsView 컨트롤의 호출기 행에 대한 스타일 설정입니다.
RowStyle DetailsView 컨트롤의 데이터 행에 대한 스타일 설정입니다. AlternatingRowStyle 속성도 설정되면 RowStyle 설정과 AlternatingRowStyle 설정 간에 데이터 행이 교대로 표시됩니다.
FieldHeaderStyle DetailsView 컨트롤의 머리글 열에 대한 스타일 설정입니다.

DetailsView의 이벤트

DetailsView 컨트롤은 프로그래밍할 수 있는 여러 이벤트를 제공합니다. 이렇게 하면 이벤트가 발생할 때마다 사용자 지정 루틴을 실행할 수 있습니다. 다음 표에서는 DetailsView 컨트롤에서 지원하는 이벤트를 나열합니다. DetailsView 컨트롤은 기본 클래스인 DataBinding, DataBound, Disposed, Init, Load, PreRender 및 Render에서도 이러한 이벤트를 상속합니다.

이벤트 설명
Itemcommand DetailsView 컨트롤에서 단추를 클릭할 때 발생합니다.
Itemcreated DetailsView 컨트롤에서 모든 DetailsViewRow 개체를 만든 후에 발생합니다. 이 이벤트는 레코드가 표시되기 전에 레코드 값을 수정하는 데 자주 사용됩니다.
ItemDeleted 삭제 단추를 클릭하지만 DetailsView 컨트롤이 데이터 원본에서 레코드를 삭제한 후에 발생합니다. 이 이벤트는 종종 삭제 작업의 결과를 검사 데 사용됩니다.
ItemDeleting 삭제 단추를 클릭하지만 DetailsView 컨트롤이 데이터 원본에서 레코드를 삭제하기 전에 발생합니다. 이 이벤트는 종종 삭제 작업을 취소하는 데 사용됩니다.
ItemInserted 삽입 단추를 클릭하지만 DetailsView 컨트롤이 레코드를 삽입한 후에 발생합니다. 이 이벤트는 삽입 작업의 결과를 검사 데 자주 사용됩니다.
ItemInserting 삽입 단추를 클릭하지만 DetailsView 컨트롤이 레코드를 삽입하기 전에 발생합니다. 이 이벤트는 삽입 작업을 취소하는 데 자주 사용됩니다.
ItemUpdated 업데이트 단추를 클릭하지만 DetailsView 컨트롤이 행을 업데이트한 후에 발생합니다. 이 이벤트는 업데이트 작업의 결과를 검사 데 자주 사용됩니다.
ItemUpdating 업데이트 단추를 클릭하지만 DetailsView 컨트롤이 레코드를 업데이트하기 전에 발생합니다. 이 이벤트는 업데이트 작업을 취소하는 데 자주 사용됩니다.
ModeChanged DetailsView 컨트롤이 모드를 변경한 후 발생합니다(편집, 삽입 또는 읽기 전용 모드). 이 이벤트는 DetailsView 컨트롤이 모드를 변경할 때 작업을 수행하는 데 자주 사용됩니다.
ModeChanging DetailsView 컨트롤이 모드를 변경하기 전에 발생합니다(편집, 삽입 또는 읽기 전용 모드). 이 이벤트는 종종 모드 변경을 취소 하려면 사용 합니다.
PageIndexChanged 호출기 단추 중 하나를 클릭하지만 DetailsView 컨트롤이 페이징 작업을 처리한 후에 발생합니다. 이 이벤트는 사용자가 컨트롤의 다른 레코드로 이동한 후 작업을 수행해야 하는 경우에 일반적으로 사용됩니다.
PageIndexChanging 호출기 단추 중 하나를 클릭하지만 DetailsView 컨트롤이 페이징 작업을 처리하기 전에 발생합니다. 이 이벤트는 페이징 작업을 취소하는 데 자주 사용됩니다.

메뉴 컨트롤

ASP.NET 2.0의 메뉴 컨트롤은 완전한 기능을 갖춘 탐색 시스템으로 설계되었습니다. SiteMapDataSource와 같은 계층적 데이터 원본에 쉽게 데이터 바인딩될 수 있습니다.

Menu 컨트롤 구조체는 선언적 또는 동적으로 정의할 수 있으며 단일 루트 노드와 임의의 수의 하위 노드로 구성됩니다. 다음 코드는 메뉴 컨트롤에 대한 메뉴를 선언적으로 정의합니다.

<asp:menu id="NavigationMenu" disappearafter="2000" staticdisplaylevels="2" staticsubmenuindent="10" orientation="Vertical" font-names="Arial" target="_blank" runat="server"> <staticmenuitemstyle backcolor="LightSteelBlue" forecolor="Black"/> <statichoverstyle backcolor="LightSkyBlue"/> <dynamicmenuitemstyle backcolor="Black" forecolor="Silver"/> <dynamichoverstyle backcolor="LightSkyBlue" forecolor="Black"/> <items> <asp:menuitem navigateurl="Home.aspx" text="Home" tooltip="Home"> <asp:menuitem navigateurl="Music.aspx" text="Music" tooltip="Music"> <asp:menuitem navigateurl="Classical.aspx" text="Classical" tooltip="Classical"/> <asp:menuitem navigateurl="Rock.aspx" text="Rock" tooltip="Rock"/> <asp:menuitem navigateurl="Jazz.aspx" text="Jazz" tooltip="Jazz"/> </asp:menuitem> <asp:menuitem navigateurl="Movies.aspx" text="Movies" tooltip="Movies"> <asp:menuitem navigateurl="Action.aspx" text="Action" tooltip="Action"/> <asp:menuitem navigateurl="Drama.aspx" text="Drama" tooltip="Drama"/> <asp:menuitem navigateurl="Musical.aspx" text="Musical" tooltip="Musical"/> </asp:menuitem> </asp:menuitem> </items> </asp:menu>

위의 예제에서 Home.aspx 노드는 루트 노드입니다. 다른 모든 노드는 다양한 수준에서 루트 노드 내에 중첩됩니다.

메뉴 컨트롤이 렌더링할 수 있는 메뉴에는 두 가지 유형이 있습니다. 정적 메뉴 및 동적 메뉴. 정적 메뉴는 항상 표시되는 메뉴 항목으로 구성됩니다. 동적 메뉴는 사용자가 마우스로 마우스를 가리킨 경우에만 표시되는 메뉴 항목으로 구성됩니다. 고객은 종종 정적 메뉴를 선언적으로 정의된 메뉴와 런타임에 데이터가 바인딩된 메뉴와 동적 메뉴를 혼동할 수 있습니다. 실제로 동적 및 정적 메뉴는 모집단의 방법과 관련이 없습니다. 정적 및 동적 용어는 메뉴가 기본적으로 정적으로 표시되는지 아니면 사용자가 작업을 수행할 때만 표시되는지 여부만 나타냅니다.

StaticDisplayLevels 속성은 메뉴의 정적 수준 수를 구성하는 데 사용되므로 기본적으로 표시됩니다. 위의 예제에서 StaticDisplayLevels 속성을 값 2로 설정하면 메뉴가 홈 노드, 음악 노드 및 영화 노드를 정적으로 표시합니다. 사용자가 부모 노드를 가리키면 다른 모든 노드가 동적으로 표시됩니다.

MaximumDynamicDisplayLevels 속성은 메뉴가 표시할 수 있는 최대 동적 수준 수를 구성합니다. MaximumDynamicDisplayLevels 속성에 지정된 값보다 높은 수준의 동적 메뉴는 모두 삭제됩니다.

참고

MaximumDynamicDisplayLevels 속성으로 인해 메뉴가 렌더링되지 않는 상황이 발생할 수 있습니다. 이러한 경우 고객 메뉴를 표시할 수 있도록 속성이 충분히 설정되어 있는지 확인합니다.

메뉴 컨트롤 데이터 바인딩

메뉴 컨트롤은 SiteMapDataSource 또는 XMLDataSource와 같은 모든 계층적 데이터 원본에 바인딩할 수 있습니다. SiteMapDataSource는 Web.sitemap 파일을 피드오프하고 해당 스키마가 메뉴 컨트롤에 알려진 API를 제공하기 때문에 Menu 컨트롤에 대한 데이터 바인딩에 가장 일반적으로 사용되는 방법입니다. 아래 목록에서는 간단한 Web.sitemap 파일을 보여 줍니다.

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode url="~/default.aspx" description="Our Home Page" title="Home"> <siteMapNode url="~/products/default.aspx" title="Products" description="Our Products"> <siteMapNode url="~/products/winprods.aspx" title="Windows Products" description="Windows Products" /> <siteMapNode url="~/products/webprods.aspx" title="Web Products" description="Web Products" /> </siteMapNode> <siteMapNode url="~/services/default.aspx" title="Services" description="Our Services"> <siteMapNode url="~/services/consulting.aspx" title="Consulting Services" description="Consulting Services" /> <siteMapNode url="~/services/develop.aspx" title="Development Services" description="Development Services" /> </siteMapNode> </siteMapNode> </siteMap>

루트 siteMapNode 요소(이 경우 Home 요소)가 하나만 있습니다. 각 siteMapNode에 대해 여러 특성을 구성할 수 있습니다. 가장 일반적으로 사용되는 특성은 다음과 같습니다.

  • Url 사용자가 메뉴 항목을 클릭할 때 표시할 URL을 지정합니다. 이 특성이 없으면 클릭하면 노드가 단순히 다시 게시됩니다.
  • 제목 메뉴 항목에 표시되는 텍스트를 지정합니다.
  • 설명 노드에 대한 설명서로 사용됩니다. 마우스를 노드 위로 마우스로 가리키면 도구 설명으로도 표시됩니다.
  • siteMapFile 중첩된 사이트맵을 허용합니다. 이 특성은 잘 구성된 ASP.NET 사이트맵 파일을 가리킵니다.
  • 역할 ASP.NET 보안 트리밍을 통해 노드 모양을 제어할 수 있습니다.

이러한 특성은 모두 선택 사항이지만 메뉴 동작이 지정되지 않은 경우 예상되는 동작이 아닐 수 있습니다. 예를 들어 url 특성이 지정되었지만 설명 특성이 아닌 경우 노드가 표시되지 않으며 지정된 URL로 이동할 방법이 없습니다.

메뉴 작업 제어

ASP.NET 메뉴 컨트롤의 작업에 영향을 주는 몇 가지 속성이 있습니다. Orientation 속성, DisappearAfter 속성, StaticItemFormatString 속성 및 StaticPopoutImageUrl 속성은 이들 중 몇 가지에 불과합니다.

  • 방향은 가로 또는 세로로 설정할 수 있으며 정적 메뉴 항목이 행 또는 세로로 가로로 배치되고 서로 겹쳐지는지 여부를 제어합니다. 이 속성은 동적 메뉴에 영향을 주지 않습니다.
  • DisappearAfter 속성은 마우스를 이동한 후에도 동적 메뉴가 표시되는 기간을 구성합니다. 값은 밀리초 단위로 지정되고 기본값은 500입니다. 이 속성을 -1 값으로 설정하면 메뉴가 자동으로 사라지지 않습니다. 이 경우 사용자가 메뉴 외부를 클릭할 때만 메뉴가 사라집니다.
  • StaticItemFormatString 속성을 사용하면 메뉴 시스템에서 일관된 세부 정보를 쉽게 유지할 수 있습니다. 이 속성을 {0} 지정할 때 데이터 원본에 표시되는 설명 대신 를 입력해야 합니다. 예를 들어 연습 1의 메뉴 항목이 제품 페이지 방문 등으로 표시되도록 하려면 StaticItemFormatString에 대한 방문 페이지를 {0} 지정합니다. 런타임에 ASP.NET 을 메뉴 항목에 대한 올바른 설명으로 바꿉 {0} 니다.
  • StaticPopoutImageUrl 속성은 특정 메뉴 노드에 마우스로 가리키면 액세스할 수 있는 자식 노드가 있음을 나타내는 데 사용되는 이미지를 지정합니다. 동적 메뉴는 기본 이미지를 계속 사용합니다.

템플릿 메뉴 컨트롤

메뉴 컨트롤은 템플릿 컨트롤이며 두 개의 다른 ItemTemplates를 허용합니다. StaticItemTemplate 및 DynamicItemTemplate입니다. 이러한 템플릿을 사용하여 메뉴에 서버 컨트롤 또는 사용자 컨트롤을 쉽게 추가할 수 있습니다.

Visual Studio .NET에서 템플릿을 편집하려면 메뉴에서 스마트 태그 단추를 클릭하고 템플릿 편집을 선택합니다. 그런 다음 StaticItemTemplate 또는 DynamicItemTemplate 편집 중에서 선택할 수 있습니다.

StaticItemTemplate에 추가된 모든 컨트롤은 페이지가 로드될 때 정적 메뉴에 표시됩니다. DynamicItemTemplate에 추가된 모든 컨트롤이 모든 팝업 메뉴에 표시됩니다.

메뉴 컨트롤에는 고유한 두 개의 이벤트가 있습니다. MenuItemClicked 및 MenuItemDatabound 이벤트입니다.

MenuItemClicked 이벤트는 메뉴 항목을 클릭할 때 발생합니다. MenuItemDatabound 이벤트는 메뉴 항목이 데이터 바인딩될 때 발생합니다. 이벤트 처리기에 전달되는 MenuEventArgs 는 Item 속성을 통해 메뉴 항목에 대한 액세스를 제공합니다.

메뉴 모양 제어

메뉴 서식 지정에 사용할 수 있는 여러 스타일 중 하나 이상을 사용하여 메뉴 컨트롤의 모양에 영향을 줄 수도 있습니다. 이러한 항목 중에는 StaticMenuStyle, DynamicMenuStyle, DynamicMenuItemStyle, DynamicSelectedStyle 및 DynamicHoverStyle이 있습니다. 이러한 속성은 표준 HTML 스타일 문자열을 사용하여 구성됩니다. 예를 들어 다음은 동적 메뉴의 스타일에 영향을 줍니다.

<DynamicMenuStyle BorderStyle="Outset" BorderWidth="1px"
    BackColor="#D6D3CE" />

참고

Hover 스타일을 사용하는 경우 runat 요소가 서버로 <설정된 페이지에 헤드> 요소를 추가해야 합니다.

메뉴 컨트롤은 ASP.NET 2.0 테마의 사용도 지원합니다.

TreeView 컨트롤

TreeView 컨트롤은 트리와 유사한 구조로 데이터를 표시합니다. 메뉴 컨트롤과 마찬가지로 SiteMapDataSource와 같은 모든 계층적 데이터 원본에 데이터를 쉽게 바인딩할 수 있습니다.

고객이 ASP.NET 2.0의 TreeView 컨트롤에 대해 질문할 가능성이 높은 첫 번째 질문은 ASP.NET 1.x에 사용할 수 있었던 TreeView IE WebControl과 관련이 있는지 여부입니다. 그것이 아니야. ASP.NET 2.0 TreeView 컨트롤은 처음부터 작성되었으며 이전에 사용할 수 있었던 IE TreeView WebControl보다 크게 향상되었습니다.

Menu 컨트롤과 정확히 동일한 방식으로 수행되므로 TreeView 컨트롤을 사이트 맵에 바인딩하는 방법에 대해 자세히 설명하지 않습니다. 그러나 TreeView 컨트롤의 작동 방식에는 몇 가지 고유한 차이점이 있습니다.

기본적으로 TreeView 컨트롤은 완전히 확장된 것으로 나타납니다. 초기 로드 시 확장 수준을 변경하려면 컨트롤의 ExpandDepth 속성을 수정합니다. 이는 특정 노드를 확장할 때 TreeView가 데이터로 바인딩되는 경우에 특히 중요합니다.

TreeView 컨트롤 데이터 바인딩

메뉴 컨트롤과 달리 TreeView는 많은 양의 데이터를 처리하는 데 잘 적용됩니다. 따라서 SiteMapDataSource 또는 XMLDataSource에 대한 데이터 바인딩 외에도 TreeView는 종종 DataSet 또는 기타 관계형 데이터에 바인딩된 데이터입니다. TreeView 컨트롤이 많은 양의 데이터에 바인딩되는 경우 컨트롤에 실제로 표시되는 데이터에만 바인딩하는 것이 가장 좋습니다. 그런 다음, TreeView 노드가 확장될 때 데이터를 추가 데이터에 바인딩할 수 있습니다.

이러한 경우 TreeView의 PopulateOnDemand 속성을 true로 설정해야 합니다. 그런 다음 TreeNodePopulate 메서드에 대한 구현을 제공해야 합니다.

PostBack 없이 데이터 바인딩

이전 예제에서 처음으로 노드를 확장하면 페이지가 다시 게시되고 새로 고쳐집니다. 이 예제에서는 문제가 되지 않지만 많은 양의 데이터가 있는 프로덕션 환경에 있을 수 있다고 상상할 수 있습니다. 더 나은 시나리오는 TreeView가 여전히 노드를 동적으로 채운 것이지만 서버에 다시 게시하지 않는 시나리오입니다.

PopulateNodesFromClient 및 PopulateOnDemand 속성을 true로 설정하면 ASP.NET TreeView 컨트롤은 포스트백 없이 노드를 동적으로 채웁니다. 부모 노드가 확장되면 클라이언트에서 XMLHttp 요청이 수행되고 OnTreeNodePopulate 이벤트가 발생합니다. 서버는 XML 데이터 아일랜드로 응답한 다음 자식 노드를 데이터 바인딩하는 데 사용됩니다.

ASP.NET 이 기능을 구현하는 클라이언트 코드를 동적으로 만듭니다. <스크립트를 포함하는 스크립트> 태그는 AXD 파일을 가리키며 생성됩니다. 예를 들어 아래 목록에는 XMLHttp 요청을 생성하는 스크립트 코드에 대한 스크립트 링크가 표시됩니다.

<script src="/WebSite1/WebResource.axd?d=QQG9vSdBi4_k2y9AeP_iww2&
    amp;t=632514255396426531"
    type="text/javascript"></script>

위의 AXD 파일을 브라우저에서 찾아서 열면 XMLHttp 요청을 구현하는 코드가 표시됩니다. 이 메서드를 사용하면 고객이 스크립트 파일을 수정할 수 없습니다.

TreeView 컨트롤의 작업 제어

TreeView 컨트롤에는 컨트롤의 작업에 영향을 주는 여러 속성이 있습니다. 가장 확실한 속성은 ShowCheckBoxes, ShowExpandCollapse 및 ShowLines입니다.

ShowCheckBoxes 속성은 노드가 렌더링될 때 검사 상자를 표시하는지 여부에 영향을 줍니다. 이 속성의 유효한 값은 None, Root, Parent, Leaf 및 All입니다. 다음과 같이 TreeView 컨트롤에 영향을 줍니다.

속성 값 효과
없음 확인란은 노드에 표시되지 않습니다. 이 값은 기본 설정입니다.
Root 확인란은 루트 노드에만 표시됩니다.
Parent 확인란은 자식 노드가 있는 노드에만 표시됩니다. 이러한 자식 노드는 부모 노드 또는 리프 노드일 수 있습니다.
리프 확인란은 자식 노드가 없는 노드에만 표시됩니다.
모두 확인란은 모든 노드에 표시됩니다.

확인란을 사용하는 경우 CheckedNodes 속성은 포스트백 시 검사되는 TreeView 노드의 컬렉션을 반환합니다.

ShowExpandCollapse 속성은 루트 및 부모 노드 옆에 있는 확장/축소 이미지의 모양을 제어합니다. 이 속성을 false로 설정하면 TreeView 노드가 하이퍼링크로 렌더링되고 링크를 클릭하여 확장/축소됩니다.

ShowLines 속성은 부모 노드를 자식 노드에 연결하는 줄이 표시되는지 여부를 제어합니다. false(기본값)이면 줄이 표시되지 않습니다. true이면 TreeView 컨트롤은 LineImagesFolder 속성으로 지정된 폴더의 선 이미지를 사용합니다.

TreeView 선의 모양을 사용자 지정하기 위해 Visual Studio .NET 2005에는 Line Designer 도구가 포함되어 있습니다. 아래와 같이 TreeView 컨트롤의 스마트 태그 단추를 사용하여 이 도구에 액세스할 수 있습니다.

Visual Studio 라인 디자이너 도구의 스크린샷. 커서가 꺾은선형 이미지 사용자 지정 선택 영역 위로 마우스를 가져다 놓습니다.

그림 1

선 이미지 사용자 지정 메뉴 옵션을 선택하면 TreeView 선의 모양을 구성할 수 있도록 줄 Designer 도구가 시작됩니다.

TreeView 이벤트

TreeView 컨트롤에는 다음과 같은 고유한 이벤트가 있습니다.

  • SelectedNodeChanged SelectAction 속성에 따라 노드를 선택할 때 발생합니다.
  • TreeNodeCheckChanged 노드 확인란 상태가 변경되면 발생합니다.
  • TreeNodeExpanded SelectAction 속성에 따라 노드가 확장될 때 발생합니다.
  • TreeNodeCollapsed 노드가 축소될 때 발생합니다.
  • TreeNodeDataBound 노드가 데이터에 바인딩된 경우 발생합니다.
  • TreeNodePopulate 노드가 채워질 때 발생합니다.

SelectAction 속성을 사용하면 노드를 선택할 때 발생하는 이벤트를 구성할 수 있습니다. SelectAction 속성은 다음 작업을 제공합니다.

  • TreeNodeSelectAction.Expand 노드가 선택되면 TreeNodeExpanded를 발생합니다.
  • TreeNodeSelectAction.None 노드를 선택하면 이벤트가 발생하지 않습니다.
  • TreeNodeSelectAction.Select 노드를 선택하면 SelectedNodeChanged 이벤트가 발생합니다.
  • TreeNodeSelectAction.SelectExpand 노드를 선택하면 SelectedNodeChanged 이벤트와 TreeNodeExpanded 이벤트가 모두 발생합니다.

TreeView를 사용하여 모양 제어

TreeView 컨트롤은 스타일을 사용하여 컨트롤의 모양을 제어하기 위한 여러 속성을 제공합니다. 사용할 수 있는 속성은 다음과 같습니다.

속성 이름 컨트롤
HoverNodeStyle 마우스를 마우스로 가리키면 노드의 스타일을 제어합니다.
LeafNodeStyle 리프 노드의 스타일을 제어합니다.
Nodestyle 모든 노드의 스타일을 제어합니다. 특정 노드 스타일(예: LeafNodeStyle)이 이 스타일을 재정의합니다.
ParentNodeStyle 모든 부모 노드의 스타일을 제어합니다.
RootNodeStyle 루트 노드의 스타일을 제어합니다.
SelectedNodeStyle 선택한 노드의 스타일을 제어합니다.

이러한 각 속성은 읽기 전용입니다. 그러나 각각 TreeNodeStyle 개체를 반환하고 속성 하위 속성 형식을 사용하여 해당 개체의 속성을 수정할 수 있습니다. 예를 들어 SelectedNodeStyle의 ForeColor 속성을 설정하려면 다음 구문을 사용합니다.

<asp:TreeView id=sampleTreeView
    SelectedNodeStyle-ForeColor=Blue
    runat=server>

위의 태그는 닫혀 있지 않습니다. 여기에 표시된 선언적 구문을 사용할 때 HTML 코드에도 TreeViews 노드를 포함하기 때문입니다.

style 속성은 property.subproperty 형식을 사용하여 코드에서 지정할 수도 있습니다. 예를 들어 코드에서 RootNodeStyle의 ForeColor 속성을 설정하려면 다음 구문을 사용합니다.

treeView1.RootNodeStyle.ForeColor = System.Drawing.Color.Red;

참고

다양한 스타일 속성의 포괄적인 목록은 TreeNodeStyle 개체의 MSDN 설명서를 참조하세요.

SiteMapPath 컨트롤

SiteMapPath 컨트롤은 ASP.NET 개발자를 위한 이동 경로 탐색 컨트롤을 제공합니다. 다른 탐색 컨트롤과 마찬가지로 SiteMapDataSource 또는 XmlDataSource와 같은 계층적 데이터 원본에 데이터를 쉽게 바인딩할 수 있습니다.

SiteMapPath 컨트롤은 SiteMapNodeItem 개체로 구성됩니다. 노드에는 세 가지 유형이 있습니다. 루트 노드, 부모 노드 및 현재 노드. 루트 노드는 계층 구조의 맨 위에 있는 노드입니다. 현재 노드는 현재 페이지를 나타냅니다. 다른 모든 노드는 부모 노드입니다.

SiteMapPath 컨트롤의 작업 제어

SiteMapPath 컨트롤의 작업을 제어하는 속성은 다음과 같습니다.

속성 속성에 대한 설명
ParentLevelsDisplayed 표시되는 부모 노드 수를 제어합니다. 기본값은 -1이며 표시되는 부모 노드 수에 제한을 두지 않습니다.
PathDirection SiteMapPath의 방향을 제어합니다. 유효한 값은 RootToCurrent(기본값) 및 CurrentToRoot입니다.
PathSeparator SiteMapPath 컨트롤에서 노드를 구분하는 문자를 제어하는 문자열입니다. 기본값은 :입니다.
RenderCurrentNodeAsLink 현재 노드가 링크로 렌더링되는지 여부를 제어하는 부울 값입니다. 기본값은 False입니다.
Skiplinktext 화면 읽기 프로그램에서 페이지를 볼 때 접근성을 지원합니다. 이 속성을 사용하면 화면 읽기 프로그램이 SiteMapPath 컨트롤을 건너뛸 수 있습니다. 이 기능을 사용하지 않도록 설정하려면 속성을 String.Empty로 설정합니다.

템플릿이 있는 SiteMapPath 컨트롤

SiteMapControl은 템플릿으로 된 컨트롤이므로 컨트롤을 표시하는 데 사용할 다양한 템플릿을 정의할 수 있습니다. SiteMapPath 컨트롤에서 템플릿을 편집하려면 컨트롤의 스마트 태그 단추를 클릭하고 메뉴에서 템플릿 편집을 선택합니다. 사용 가능한 다양한 템플릿 중에서 선택할 수 있는 SiteMapTasks 메뉴가 아래와 같이 표시됩니다.

SiteMapControl 템플릿 편집 모드 메뉴의 스크린샷. NodeTemplate이 강조 표시됩니다.

그림 2

NodeTemplate 템플릿은 SiteMapPath의 모든 노드를 참조합니다. 노드가 루트 노드이거나 현재 노드이고 RootNodeTemplate 또는 CurrentNodeTemplate 이 구성된 경우 NodeTemplate이 재정의됩니다.

SiteMapPath 이벤트

SiteMapPath 컨트롤에는 Control 클래스에서 파생되지 않은 두 개의 이벤트가 있습니다. ItemCreated 이벤트 및 ItemDataBound 이벤트입니다. SiteMapPath 항목을 만들 때 ItemCreated 이벤트가 발생합니다. ItemDataBound는 SiteMapPath 노드의 데이터 바인딩 중에 DataBind 메서드가 호출될 때 발생합니다. SiteMapNodeItemEventArgs 개체는 Item 속성을 통해 특정 SiteMapNodeItem에 대한 액세스를 제공합니다.

SiteMapPath를 사용하여 모양 제어

다음 스타일은 SiteMapPath 컨트롤의 서식 지정에 사용할 수 있습니다.

속성 이름 컨트롤
CurrentNodeStyle 현재 노드의 텍스트 스타일을 제어합니다.
RootNodeStyle 루트 노드의 텍스트 스타일을 제어합니다.
Nodestyle CurrentNodeStyle 또는 RootNodeStyle이 적용되지 않는다고 가정하면 모든 노드의 텍스트 스타일을 제어합니다.

NodeStyle 속성은 CurrentNodeStyle 또는 RootNodeStyle로 재정의됩니다. 이러한 각 속성은 읽기 전용이며 Style 개체를 반환합니다. 이러한 속성 중 하나를 사용하여 노드의 모양에 영향을 주려면 반환되는 Style 개체의 속성을 설정해야 합니다. 예를 들어 아래 코드는 현재 노드의 전채 속성을 변경합니다.

<asp:SiteMapPath runat="server" ID="SiteMapPath1"
  CurrentNodeStyle-ForeColor="Orange"/>

속성은 다음과 같이 프로그래밍 방식으로 적용할 수도 있습니다.

this.SiteMapPath1.CurrentNodeStyle.ForeColor =
    System.Drawing.Color.Orange;

참고

템플릿이 적용되면 스타일이 적용되지 않습니다.

랩 1: ASP.NET 메뉴 컨트롤 구성

  1. 새 웹 사이트를 만듭니다.

  2. 파일, 새로 만들기, 파일을 선택하고 파일 템플릿 목록에서 사이트 맵을 선택하여 사이트 맵 파일을 추가합니다.

  3. 사이트 맵(기본적으로 Web.sitemap)을 열고 아래 목록처럼 보이도록 수정합니다. 사이트 맵 파일에서 연결하는 페이지는 실제로 존재하지 않지만 이 연습에서는 문제가 되지 않습니다.

    <?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="~/default.aspx">
        <siteMapNode url="~/products/default.aspx"
          title="Products" description="Our Products">
            <siteMapNode url="~/products/winprods.aspx"
              title="Windows Products" description="Windows Products" />
            <siteMapNode url="~/products/webprods.aspx"
              title="Web Products" description="Web Products" />
        </siteMapNode>
        <siteMapNode url="~/services/default.aspx"
          title="Services" description="Our Services">
            <siteMapNode url="~/services/consulting.aspx"
              title="Consulting Services"
              description="Consulting Services" />
            <siteMapNode url="~/services/develop.aspx"
              title="Development Services"
              description="Development Services" />
        </siteMapNode>
    </siteMapNode>
</siteMap>

  4. 디자인 보기에서 기본 웹 양식을 엽니다.

  5. 도구 상자의 탐색 섹션에서 페이지에 새 메뉴 컨트롤을 추가합니다.

  6. 도구 상자의 데이터 섹션에서 새 SiteMapDataSource를 추가합니다. SiteMapDataSource는 사이트의 Web.sitemap 파일을 자동으로 사용합니다. (Web.sitemap 파일은 사이트의 루트 폴더에 있어야 합니다 .)

  7. 메뉴 컨트롤을 클릭한 다음 스마트 태그 단추를 클릭하여 메뉴 작업 대화 상자를 표시합니다.

  8. 데이터 원본 선택 드롭다운에서 SiteMapDataSource1을 선택합니다.

  9. 자동 서식 링크를 클릭하고 메뉴의 형식을 선택합니다.

  10. 속성 창에서 StaticDisplayLevels 속성을 2로 설정합니다. 메뉴 컨트롤은 이제 Designer 홈, 제품 및 서비스 노드를 표시해야 합니다.

  11. 브라우저에서 페이지를 찾아 메뉴를 사용합니다. 사이트 맵에 추가한 페이지가 실제로 존재하지 않으므로 사이트 맵을 찾아볼 때 오류가 표시됩니다.

StaticDisplayLevels 및 MaximumDynamicDisplayLevels 속성을 변경하는 방법을 실험하고 메뉴가 렌더링되는 방식에 미치는 영향을 확인합니다.

랩 2: TreeView 컨트롤 동적 바인딩

이 연습에서는 로컬에서 실행되는 SQL Server 있고 Northwind 데이터베이스가 SQL Server instance 있다고 가정합니다. 이러한 조건이 충족되지 않으면 샘플에서 연결 문자열을 변경하세요. 신뢰할 수 있는 연결 대신 SQL Server 인증을 지정해야 할 수도 있습니다.

  1. 새 웹 사이트를 만듭니다.

  2. Default.aspx의 코드 보기로 전환하고 모든 코드를 아래에 나열된 코드로 바꿉니다.

    <%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>

<script runat="server">
    void PopulateNode(Object sender, TreeNodeEventArgs e) {
        // Call the appropriate method to populate a node at a particular level.
        switch (e.Node.Depth) {
            case 0:
                // Populate the first-level nodes.
                PopulateCategories(e.Node);
                break;
            case 1:
                // Populate the second-level nodes.
                PopulateProducts(e.Node);
                break;
            default:
                // Do nothing.
                break;
        }

    }
    void PopulateCategories(TreeNode node) {

        // Query for the product categories. These are the values
        // for the second-level nodes.
        DataSet ResultSet = RunQuery("Select CategoryID, CategoryName From Categories");
        // Create the second-level nodes.
        if (ResultSet.Tables.Count > 0) {

            // Iterate through and create a new node for each row in the query results.
            // Notice that the query results are stored in the table of the DataSet.
            foreach (DataRow row in ResultSet.Tables[0].Rows) {

                // Create the new node. Notice that the CategoryId is stored in the Value property
                // of the node. This will make querying for items in a specific category easier when
                // the third-level nodes are created.
                TreeNode newNode = new TreeNode();
                newNode.Text = row["CategoryName"].ToString();
                newNode.Value = row["CategoryID"].ToString();
                // Set the PopulateOnDemand property to true so that the child nodes can be
                // dynamically populated.
                newNode.PopulateOnDemand = true;

                // Set additional properties for the node.
                newNode.SelectAction = TreeNodeSelectAction.Expand;

                // Add the new node to the ChildNodes collection of the parent node.
                node.ChildNodes.Add(newNode);

            }

        }

    }
    void PopulateProducts(TreeNode node) {
        // Query for the products of the current category. These are the values
        // for the third-level nodes.
        DataSet ResultSet = RunQuery("Select ProductName From Products Where CategoryID=" + node.Value);
        // Create the third-level nodes.
        if (ResultSet.Tables.Count > 0) {

            // Iterate through and create a new node for each row in the query results.
            // Notice that the query results are stored in the table of the DataSet.
            foreach (DataRow row in ResultSet.Tables[0].Rows) {

                // Create the new node.
                TreeNode NewNode = new TreeNode(row["ProductName"].ToString());

                // Set the PopulateOnDemand property to false, because these are leaf nodes and
                // do not need to be populated.
                NewNode.PopulateOnDemand = false;

                // Set additional properties for the node.
                NewNode.SelectAction = TreeNodeSelectAction.None;

                // Add the new node to the ChildNodes collection of the parent node.
                node.ChildNodes.Add(NewNode);

            }

        }
    }
    DataSet RunQuery(String QueryString) {
        // Declare the connection string. This example uses Microsoft SQL Server
        // and connects to the Northwind sample database.
        String ConnectionString = "server=localhost;database=NorthWind;Integrated Security=SSPI";
        SqlConnection DBConnection = new SqlConnection(ConnectionString);
        SqlDataAdapter DBAdapter;
        DataSet ResultsDataSet = new DataSet();
        try {
            // Run the query and create a DataSet.
            DBAdapter = new SqlDataAdapter(QueryString, DBConnection);
            DBAdapter.Fill(ResultsDataSet);
            // Close the database connection.
            DBConnection.Close();
        } catch (Exception ex) {
            // Close the database connection if it is still open.
            if (DBConnection.State == ConnectionState.Open) {
                DBConnection.Close();
            }

            Message.Text = "Unable to connect to the database.";
        }
        return ResultsDataSet;
    }
</script>

<html>
<body>
    <form id="Form1" runat="server">
        <h3>
            TreeView PopulateNodesFromClient Example</h3>
        <asp:TreeView ID="LinksTreeView" 
          Font-Name="Arial" ForeColor="Blue" EnableClientScript="true"
          PopulateNodesFromClient="false" 
          OnTreeNodePopulate="PopulateNode" runat="server"
            ExpandDepth="0">
            <Nodes>
                <asp:TreeNode Text="Inventory" SelectAction="Expand"
                              PopulateOnDemand="True" Value="Inventory" />
            </Nodes>
        </asp:TreeView>
        <br>
        <br>
        <asp:Label ID="Message" runat="server" />
    </form>
</body>
</html>

  3. 페이지를 treeview.aspx로 저장합니다.

  4. 페이지를 찾습니다.

  5. 페이지가 처음 표시되면 브라우저에서 페이지의 원본을 봅니다. 표시되는 노드만 클라이언트로 전송되었습니다.

  6. 노드 옆에 있는 더하기 기호를 클릭합니다.

  7. 페이지에서 원본을 다시 봅니다. 이제 새로 표시된 노드가 있습니다.

랩 3: GridView 및 DetailsView를 사용하여 데이터 세부 정보 보기 및 편집

  1. 새 웹 사이트를 만듭니다.

  2. 웹 사이트에 새 web.config 추가합니다.

  3. 아래와 같이 web.config 파일에 연결 문자열을 추가합니다.

    <connectionStrings>
    <add name="Northwind"
         providerName="System.Data.SqlClient"
         connectionString="Data Source=localhost;Integrated Security=SSPI;
         Initial Catalog=Northwind;"/>
</connectionStrings>

    참고

    환경에 따라 연결 문자열을 변경해야 할 수 있습니다.

  4. web.config 파일을 저장한 다음 닫습니다.

  5. Default.aspx를 열고 새 SqlDataSource 컨트롤을 추가합니다.

  6. SqlDataSource 컨트롤의 ID를 Products로 변경합니다.

  7. SqlDataSource 작업 메뉴에서 데이터 원본 구성을 클릭합니다.

  8. 연결 드롭다운에서 Northwind 를 선택하고 다음을 클릭합니다.

  9. 이름 드롭다운에서 제품을 선택하고 아래와 같이 ProductID, ProductName, UnitPrice 및 UnitsInStock 확인란을 검사.

데이터 원본 제품 구성 화면의 스크린샷

그림 3

  1. 다음을 클릭합니다.
  2. Finish를 클릭합니다.
  3. 원본 보기로 전환하고 생성된 코드를 검사합니다. SqlDataSource 컨트롤에 추가된 SelectCommand, DeleteCommand, InsertCommand 및 UpdateCommand 를 확인합니다. 또한 추가된 매개 변수도 확인합니다.
  4. 디자인 보기로 전환하고 페이지에 새 GridView 컨트롤을 추가합니다.
  5. 데이터 원본 선택 드롭다운에서 제품을 선택합니다.
  6. 아래와 같이 페이징 사용 및 선택 사용을 선택합니다.

GridView 작업 메뉴의 스크린샷.

그림 4

  1. 열 편집 링크를 클릭하고 필드 자동 생성이 선택되어 있는지 확인합니다.
  2. 확인을 클릭합니다.
  3. GridView 컨트롤을 선택한 상태에서 속성 창의 DataKeyNames 속성 옆에 있는 단추를 클릭합니다.
  4. 사용 가능한 데이터 필드 목록에서 ProductID를 > 선택하고 단추를 클릭하여 추가합니다.
  5. 확인을 클릭합니다.
  6. 페이지에 새 SqlDataSource 컨트롤을 추가합니다.
  7. SqlDataSource 컨트롤의 ID를 세부 정보로 변경합니다.
  8. SqlDataSource 작업 메뉴에서 데이터 원본 구성을 선택합니다.
  9. 드롭다운에서 Northwind 를 선택하고 다음을 클릭합니다.
  10. 이름 드롭다운에서 제품을 선택하고 열 목록 상자에서 </strong>* 확인란을 검사.
  11. WHERE 단추를 클릭합니다.
  12. 열 드롭다운에서 ProductID를 선택합니다.
  13. 연산자 드롭다운에서 를 선택합니다 = .
  14. 원본 드롭다운에서 제어를 선택합니다.
  15. 컨트롤 ID 드롭다운에서 GridView1을 선택합니다.
  16. 추가 단추를 클릭하여 WHERE 절을 추가합니다.
  17. 확인을 클릭합니다.
  18. 고급 단추를 클릭하고 INSERT, UPDATE 및 DELETE 문 생성 확인란을 검사.
  19. 확인을 클릭합니다.
  20. 다음을 클릭하고 마침을 클릭합니다.
  21. DetailsView 컨트롤을 페이지에 추가합니다.
  22. 데이터 원본 선택 드롭다운에서 세부 정보를 선택합니다.
  23. 아래와 같이 편집 사용 확인란을 선택합니다.

세부 정보작업 보기 메뉴의 스크린샷

그림 5 39. 페이지를 저장하고 Default.aspx를 찾습니다. 40. 다른 레코드 옆에 있는 선택 링크를 클릭하여 DetailsView 업데이트를 자동으로 확인합니다. 41. DetailsView 컨트롤에서 편집 링크를 클릭합니다. 42. 레코드를 변경하고 업데이트를 클릭합니다.