ASP+ 목록 바인딩 제어를 사용하십시오
Nikhil Kothari
Microsoft Corporation
2000 년 7 월
초록 : ASP+ Repeater, Datalist 및 Datagrid Server 컨트롤을 설명하십시오. 이러한 컨트롤은 데이터 소스, HTML 기반 응용 프로그램 사용자 인터페이스를 실현할 수 있습니다. 이러한 제어와 관련된 개념을 논의하고 이러한 컨트롤을 사용하는 기본 예를 요약하십시오.
목차
간단한 소개
목록 바인딩 제어는 어떻게 작동합니까?
리피터 제어
데이터 주의자 통제
Datagrid 컨트롤
리피터, Datalist 또는 Datagrid?
관련 리소스
이 기사와 관련된 예제 파일 (56 KB)을 다운로드하십시오.
간단한 소개
리피터, Datalist 및 Datagrid Control은 ASP+ Page Framework의 System.Web.WebControls의 이름 공간의 관련 웹 제어 세트를 구성합니다. 이러한 컨트롤은 HTML 디스플레이의 바인딩 목록 또는 데이터 소스의 내용을 만듭니다. 따라서, 그들은 그것들을 "목록 바인딩 컨트롤"이라고 부릅니다.
프레임 워크의 다른 웹 컨트롤과 마찬가지로 이러한 컨트롤은 일관된 프로그래밍 모델을 제공하고 브라우저와 무관하게 대표적인 논리를 캡슐화합니다. 이러한 특성을 통해 개발자는 HTML과 관련된 일관되지 않고 복잡한 기술 지식을 마스터하지 않고도 객체 모델에서 프로그래밍 할 수 있습니다.
이 세 가지 컨트롤은 다양한 레이아웃 (목록, 열/신문 열 및 스트림 레이아웃 (HTML 스트림) 포함)에 따라 관련 데이터 소스와 관련된 데이터 소스 컨텐츠를 나타낼 수 있습니다. 또한 완전히 다른 또는 완전히 사용자 정의 된 레이아웃을 만들 수 있습니다. 포장의 논리 외에도 전송 된 데이터, 실행 상태 관리 및 트리거 된 이벤트를 처리하는 기능도 제공합니다. 마지막으로, 선택, 편집, 페이징 및 정렬과 같은 표준 작업에 대한 다양한 수준의 지원을 제공합니다. 이러한 컨트롤은 보고서, 쇼핑 카트, 제품 목록, 쿼리 결과 및 내비게이션 메뉴를 포함한 여러 일반적인 웹 응용 프로그램을 단순화 할 수 있습니다.
다음은 이러한 컨트롤과 웹 애플리케이션에서이를 사용하는 방법과 컨트롤을 선택하는 방법을 설명합니다.
목록 바인딩 제어는 어떻게 작동합니까?
이 섹션은이 기사의 나머지 부분의 배경 자료입니다. 이 목록 바인딩 컨트롤의 작업 방법, 공통 특성 및 특정 관련 개념을 개요합니다.
데이터 소스 속성
각 컨트롤에는 system.collections.icollection이있는 유형의 데이터 소스 속성이 있습니다. 가장 간단한 단어에서 데이터 소스는 유사한 객체의 목록 또는 모음입니다.
이 프레임 워크의 여러 객체는 ICollection의 구현을 제공합니다. 이 컬렉션에는 System.Data.DataView (일반적으로 관계형 데이터베이스 및 XML 데이터에 액세스하는 데 사용됨), 일반 ICollection 구현 (예 : ArrayList 및 HashTable) 및 배열이 포함됩니다.
iCollection 인터페이스 구현을 제외하고 기존 데이터 바인딩 컨트롤 (일반적으로 Ado Record 세트가 필요합니다)과 달리, 이러한 목록 바인딩 컨트롤은 데이터 소스에 대한 다른 요구 사항을 강화하지 않습니다. 설계에 따르면, 많은 양을 통해 유효한 데이터 소스 속성 값으로 사용할 수있는 유형 및 데이터 구조는 응용 프로그램 코드의 간단하고 유연성을 최대화 할 수 있습니다.
프로젝트 수집
각 목록 바인딩 제어에는 프로젝트 세트가 포함됩니다. 컨트롤은 이러한 객체의 현재 데이터 소스를 나열하여 프로젝트 수집으로 설정됩니다. 각 객체에 대한 단일 항목을 만들고이를 사용하여 객체를 나타냅니다. 이 항목들은 목록 바인딩 제어에 포함 된 제어 계층 구조의 일부입니다.
아래 표에는 데이터 소스와 관련된 프로젝트 유형이 나와 있습니다.
프로젝트에서 만든 기본 프로젝트 유형
교대는 프로젝트 컬렉션에서 이상한 입찰을 가진 프로젝트 제작입니다.
선택된 프로젝트에 대해 SelectedItem이 작성되었습니다 (프로젝트가 대체 프로젝트인지 여부에 관계없이)
편집 모드의 프로젝트에 대한 편집 템 (선택 또는 대안이든)
컨트롤은 사용될 다음 항목에서 동시에 생성됩니다. 그러나 데이터 소스 데이터와 관련이 없습니다.
헤더는 헤더 정보를 나타내는 데 사용됩니다
각주는 발판 정보를 나타내는 데 사용됩니다
분리기는 그림 1에 표시된 각 항목 사이의 내용을 나타내는 데 사용되며 리피터 및 데이터리스트에게만 적용됩니다.
페이징 기호는 Datagrid 컨트롤과 관련된 Pagination UI를 나타내는 데 사용됩니다.
그림 1. "컨트롤"컬렉션의 "프로젝트"컬렉션과 비교
프로젝트 데이터 바인딩 및 생성
목록 바인딩 제어는 전체 ASP+ 프레임 워크에서 구현 된 명시 적 데이터 바인딩 모델을 따릅니다. 즉, 컨트롤은 데이터베인트 메소드가 호출 될 때만 나열되어야합니다.
Databind 메소드가 호출되면 목록 컨트롤은 데이터 소스를 나열하고 프로젝트를 작성하며 데이터 소스에서 값을 추출하여 초기화합니다. 상태 관리가 활성화되면 컨트롤은 데이터 소스를 다시 설정하지 않고 페이지의 반환 처리 기간 동안 프로젝트를 다시 만들기 위해 필요한 모든 정보를 저장합니다.
명시 적 데이터 바인딩 모델을 사용하면 응용 프로그램 코드가 처리 시퀀스에서 데이터 소스가 필요한시기와 위치를 정확하게 결정할 수 있습니다. 이 기능을 사용하면 데이터베이스 서버에 대한 액세스가 적고 효율적으로 액세스 할 수 있으며 이러한 액세스는 일반적으로 웹 애플리케이션에서 가장 많이 소비되는 작동입니다.
일반적인 규칙은 프로젝트를 다시 만들어야 할 때마다 데이터베인을 호출해야한다는 것입니다. 대부분의 경우, 페이지가 처음으로 초기 프로젝트 컬렉션을 작성하도록 요청되면 Databind에 전화합니다. 이 페이지의 다음 -up 실행 중에 프로젝트 컬렉션에 의해 변경된 다양한 이벤트 처리 절차 에서이 방법을 호출해야합니다. 초기 데이터 소스를 생성하는 데 사용 된 쿼리가 발생할 수 있습니다. 프로젝트 상태가 변경 될 때 (예 : 편집 모드로만 변경) 발생할 수 있습니다.
스타일
객체 모델에서 스타일 속성을 사용하면 모든 데이터리스트 및 Datagrid 컨트롤과 포함 된 형식 및 모양을 정의 할 수 있습니다. 이 속성은 글꼴, 색상, 경계 및 기타 모양 요소를 사용자 정의 할 수 있습니다. 제어 자체의 스타일 속성 (예 : 전경 색상, 배경색, 글꼴 및 테두리 스타일)은 전체 컨트롤의 표현에 영향을 미칩니다.
또한 각 컨트롤에는 ItemStyle, AlternatingItemStyle 및 HeadersStyle과 같이 생성 된 항목 유형과 일치하는 많은 스타일 속성이 포함되어 있습니다. Datagrid는 특정 열의 모든 셀에 영향을 미치는 세 번째 레벨 스타일 속성을 제공합니다. 각 열에는 컨트롤에 자체 Headderstyle, Footerstyle 및 Itemstyte가 포함될 수 있습니다.
주형
스타일 컨트롤 형식이 표시되고 템플릿은 각 항목의 내용과 표현을 정의합니다. 템플릿을 HTML 코드 시트로 생각할 수 있는데, 이는 프로젝트를 나타내는 데 사용되는 제어 계층 구조를 정의합니다.
리피터 및 데이터리스트 컨트롤은 지정된 템플릿에 의해 구동되어 ItemTemplate, AlternatingItemTemplate 및 HeaderTemplate과 같은 다양한 설정 가능한 템플릿 속성을 제공합니다. 스타일과 유사하게 각 템플릿은 특정 유형의 프로젝트에 해당합니다.
Datagrid Control은 템플릿이 아닙니다. 그러나 컨트롤의 열 모음의 TemplateColumn은 Datagrid에서 템플릿을 사용합니다. Templatecolum의 각 셀에는 템플릿이 포함될 수 있으며, 이는 리피터 또는 데이터 론자 제어의 항목과 매우 유사합니다. 이것은 또한 Datagrid의 사용자 정의를 가능하게합니다.
템플릿의 데이터 바인딩
템플릿 정의 항목에 포함 된 제어 계층 구조. 데이터 바인딩 표현식을 사용 함으로써이 레벨 구조의 제어 속성은이 프로젝트와 관련된 데이터 속성에 결합 될 수 있습니다.
템플릿으로서의 논리적 부모 수준 프로젝트를 데이터 바인딩 표현식에서 "컨테이너"라고합니다. 각 컨테이너에는 DataIitem이라는 속성이 있으며 관련 데이터를 인용합니다. 결과적으로, 템플릿의 대부분의 일반적인 데이터 바인딩 표현식은 컨테이너의 특정 속성에 대한 제어 속성을 바인딩합니다. 이 바인딩은 다음 예에서 추가로 설명 될 것입니다.
리피터 제어
앞에서 언급했듯이 리피터 컨트롤은 템플릿에 의해 완전히 구동되므로 완전히 사용자 정의 된 표현 및 레이아웃이 가능합니다. 아래 그림은이 기능을 보여줍니다.
그림 2. 리피터 제어를 사용하여 생성 된 연결된 프로젝트 기호의 링크 목록
리피터에서 발췌 한 1.aspx :
<%@page language = c# src = repeater1.cs 상속 = 샘플 .repeter1page%>
탄력 있는
<ASP : 리피터 runat = 서버 id = linkslistrepeater
DataSource = '< %# siteElinks %>'>
<템플릿 이름 = headertemplate>
<ul 유형 = 1>
</템플릿>
<템플릿 이름 = itemtemplate>
<li>
<ASP : 하이퍼 링크 runat = 서버
텍스트 = '< %# databinder.eval.eval (container.dataitem, site) %>'
avigateUrl = '< %# databinder.eval.eval.dataitem, siteUrl) %>'>
</asp : hyperlink>
</li>
</템플릿>
<템플릿 이름 = footerTemplate>
</ul>
</템플릿>
</asp : 리피터>
이 .aspx 파일은 프로젝트 기호 목록을 생성하기 위해 리피터 컨트롤을 생성한다는 진술을 보여주었습니다.
이 예제는 데이터 바인딩 구문 (<%#...%>)으로 데이터 소스를 설정하는 명령문 메소드를 보여줍니다. Databind 메소드를 호출하면 데이터 바인딩의 표현식이 실행됩니다. 이 경우 리피터의 DataSource 속성은 페이지의 SiteLinks 속성에 묶여 있으며 후자에는 표시 할 URL 참조가 포함되어 있습니다.
리피터는 템플릿에 HTML 조각이 존재할 수있는 유일한 컨트롤이며 HTML 조각이 함께 좋은 형태의 HTML을 생성합니다. 이 예에서 프로젝트 기호 목록은 세 부분으로 나뉩니다.
Headertemplate 목록 (<ul type = 1>)에서 시작했습니다.
FooterTemplate로 표시된 목록에 의해 레이블 (</ul>)을 종료하십시오.
목록의 본체는 SiteLinks 세트의 각 객체의 항목 판을 반복하여 생성 된 목록 항목 (<li>)에서 배치됩니다.
이 템플릿을 사용하여 헤더에서 시작 마크 (<pable>)를 지정할 수 있습니다. End Label (</table>)은 각주의 테이블을 지정하고 각 프로젝트에서 단일 시계 라인을 지정합니다 (<Te>). 본질 이 교체 옵션은 목록 표현으로 이어집니다.
ItemTemplate을 지정해야합니다. 유일한 템플릿입니다. 다른 템플릿이 지정되지 않은 경우 컨트롤은 다른 템플릿 에이 ItemTemplate를 자동으로 사용합니다.
다음 예에서는 ItemTemplate에는 하이퍼 링크 웹 컨트롤이 포함되어 있습니다. 이 컨트롤의 텍스트 및 NavigateUrl 속성은 각 중복 프로젝트와 관련된 데이터 속성에 바인딩됩니다. 이것은 데이터 바인딩 표현식을 사용하여 완료됩니다 (즉시 프로젝트를 작성한 후 표현식을 찾습니다).
리피터 1.CS :
네임 스페이스 샘플 {
탄력 있는
공개 클래스 리피터 1 페이지 : 페이지 {
보호 된 리피터 LinksListrepeater;
공개 icollection siteElinks {
얻다 {
ArrayList 사이트 = New ArrayList ();
sites.add (New SiteInfo (Microsoft Home,
http://www.microsoft.com);
sites.add (new siteInfo (msdn home,
http://msdn.microsoft.com);
sites.add (new siteInfo (MSN 홈페이지,
http://www.msn.com));
sitees.add (new siteInfo (Hotmail,
http://www.hotmail.com));
반환 사이트;
}
}
보호 된 재정의 void Overoad (EventArgs e) {{
베이스. 온부하 (e);
if (! ispostback) {
// 처음으로 페이지를 요청하면 데이터 바인딩이 수행됩니다.
//이 페이지의 제어 계층 구조에서 각 컨트롤을 재귀 적으로 호출합니다.
Databind ();
}
}
}
공개 봉인 된 클래스 siteInfo {
개인 문자열 사이트;
개인 문자열 siteUrl;
public siteInfo (문자열 siteName, String siteUrl) {{
this.siteName = siteName;
this.siteurl = siteUrl;
}
공개 문자열 사이트 {
{return site;} 얻기
}
공개 문자열 siteUrl {
geturn siteurl;}
}
}
}
이 .cs 파일에는 이전 목록의 ASPX 페이지에 함께 표시되는 코드가 포함되어 있습니다.
Repeater1Page 클래스는 페이지 클래스의 Onload 메소드를 다룹니다. 이것은이 페이지의 첫 번째 요청에서 Databind가 호출되었음을 나타냅니다. 이로 인해이 페이지의 데이터 바인딩 표현식이 데이터를 평가하고 리피터 제어 목록에 데이터 소스를 만들고 프로젝트를 만듭니다. 첫 번째 요청 일 때에 만 Databind 메소드를 호출하십시오. 이것이 작동 할 수있는 이유는 리피터가 데이터 소스 인스턴스없이 보존 상태의 반환 프로세스에서 프로젝트를 다시 만들 수 있기 때문입니다.
이 페이지는 유형 Icollection의 공개 속성을 보여줍니다. 이는 리피터의 데이터 소스 속성 값의 데이터 바인딩 표현식에 사용됩니다. 속성 획득은 SiteInfo 시퀀스 세트를 포함하는 ArrayList를 사용합니다. 이 속성은 공개적이며 공개 및 보호 멤버의 페이지 만 데이터 바인딩 표현식에 사용할 수 있기 때문입니다.
각 siteInfo 객체에는 SiteName과 SiteUrl의 두 가지 속성이 있습니다. 템플릿에서 하이퍼 링크 컨트롤의 데이터 바인딩이 이러한 속성에 액세스 할 때. 이 대조군의 결합 발현에서, 컨테이너 .Dataitem은 특정 항목을 단일 siteInfo 객체에 바인딩해야한다고 말했다. Databinder.eval (Container.dataitem, SiteName)은 현재 siteInfo 객체의 SiteName 속성을 방문합니다.
Repeater1 예제는 여러 가지 기본 개념을 소개합니다.
정의 템플릿
템플릿에서 데이터 바인딩 문법 및 데이터 결합 식
ArrayList의 iCollection을 데이터 소스로 사용하십시오
초기 처리 페이지에서 Databind 메소드를 호출하십시오
데이터 주의자 통제
Datalist Control은 스타일 속성을 사용하여 능력을 형식화 할 수있는 템플릿 지향 컨트롤입니다. 또한 여러 열을 생성 할 수도 있습니다. 그림 3 은이 두 가지 특성을 보여줍니다.
그림 3. Datalist의 듀얼 열에서 생성 된 예
Datalist1.aspx에서 발췌 :
<%@page language = c# src = datalist1.cs inherits = samples.datalist1page%>
탄력 있는
<ASP : Datalist Runat = Server ID = PealicDatalist
ReturnColumns = 2 반복 방향 = 수직 반복 모드 = 테이블
너비 = 100%>
<Poperty Name = AlternatingItemStyle>
<ASP : TableItemStyle BackColor =#Elyeee/>
</property>
<템플릿 이름 = itemtemplate>
<ASP : 패널 runat = 서버 글꼴 크기 = 12pt font-bold = true>
< %# ((사람) container.dataitem) .name %>
</asp : 패널>
<ASP : 레이블 runat = 서버 너비 = 20px
Borderstyle = solid borderwidth = 1px bordercolor = black
BackColor = '< %# ((사람) Container.dataitem)
</asp : 레이블>
<ASP : 레이블 runat = 서버 font-size = 10pt
텍스트 = '< %# getcolorname ((사람) 컨테이너 .Dataitem) %>'>
</asp : 레이블>
</템플릿>
</asp : datalist>
이 .aspx 파일은이 예제를 생성하는 데 사용되는 Datalist의 진술을 보여주었습니다.
이 예에서, Datalist의 멀티 컬럼 레이아웃은 RetureColumns 속성을 "2"로 설정하여 달성됩니다. 반복 방향을 "수직"으로 설정하면 프로젝트가 위에서 아래로 배열 된 다음 왼쪽에서 오른쪽으로 배열됩니다. 반대로, "수평"으로 설정된 값은 프로젝트를 왼쪽에서 오른쪽으로, 위에서 아래로 배열하게됩니다.
ASPX Syntax에는 몇 가지 Datalist 스타일 속성에 대한 설정이 포함되어 있습니다. 이 예에서는 Datalist의 너비가 부모 수준의 100%로 설정됩니다. 회색 배경을 가진 교대 형태는 줄무늬 모양을 얻는 것입니다. 이 예제는 또한 템플릿이 각 프로젝트에서 이상적인 레이아웃을 얻는 요구를 충족시키기 위해 복잡한 제어 정의를 포함 할 수 있음을 보여줍니다.
마지막으로,이 템플릿의 데이터 바인딩 표현은 컨테이너를 유형으로 변환하여 초기 단계에서 결합됩니다. 이것은 데이터베인더의 후기 결합의 후기 바인딩의 바인딩을 유발하지 않을 것이다. 그러나이 방법은 가독성이 떨어질 수 있습니다. 다음 예제는 GetColorName 메소드를 호출하는 표현 예제를 제공합니다 (이 메소드는이 페이지에서 지원되는 파일에서 구현됩니다).
Datalist1.cs :
네임 스페이스 샘플 {
탄력 있는
공개 클래스 Datalist1Page : Page {
보호 된 데이터 론자 인민자;
보호 된 문자열 getcolorname (color c) {
반품
typedescriptor.getConverter (typeof (color));
}
Prive void rodpeicallist () {
// 데이터 소스를 만듭니다
사람 [] 사람 = 새로운 사람 [] {
새로운 사람 (Nikhil Kothari, Color.green),
새로운 사람 (Steve Millet, Color.purple), Color.purple),
새로운 사람 (Chris Anderson, Color.blue), Color.blue,
새로운 사람 (Mike Pope, Color.orange),
새로운 사람 (Anthony Moore, Color.yllow),
새로운 사람 (Jon Jung, Color.mediumaquamarine),
새로운 사람 (Susan Warren, Color.slateblue),
새로운 사람 (Izzy Gryko, Color.red)
};
// 컨트롤의 데이터 소스를 설정합니다
peicaldatalist.datasource = pesple;
// 제어 가이 데이터 소스를 사용하여 프로젝트를 구축하십시오.
peicaldatalist.databind ();
}
보호 된 재정의 void Overoad (EventArgs e) {{
베이스. 온부하 (e);
if (! ispostback) {
// 처음 으로이 페이지를 참조하십시오
loadpeicallist ();
}
}
}
공개 봉인 된 클래스 사람 {
개인 문자열 이름;
Prive Color PaRiteColor;
공개 사람 (문자열 이름, 컬러 오퍼 컬러) {{
this.name = 이름;
this.favoriteColor = paRiteColor;
}
공개 색상 passeColor {
Geturn PaRiteColor;}
}
공개 문자열 이름 {
Geturn 이름;}
}
}
}
이 페이지에서 컨트롤의 데이터 소스 속성은 프로그램 설정을 통해 설정되며 ASPX 파일에 설정됩니다. 두 방법의 결과는 동일합니다. 선택할 수없는 방법을 선택할 수없는 방법은 컨트롤이 데이터 소스를 나열하고 표시하려는 항목을 만들 수 있도록 Databind 메소드를 호출해야합니다.
이 예제에 사용 된 데이터 소스는 간단한 사람 객체입니다. 각 배열은 iCollection 방법을 구현하기 때문에 배열은 데이터 소스에 적합합니다. 이는 데이터 소스를 얻을 수있을 때 데이터 구조 및 유형을 얻을 수있을 때 얻을 수있는 유연성을 보여줍니다.
Datalist1 예제는 다음 개념을 소개합니다.
템플릿에서 풍부한 HTML UI를 정의하십시오
간단한 배열을 데이터 소스로 사용하십시오
프로그램을 통해 데이터 소스를 설정하십시오
데이터 결합 구문에서 허용되는 다양한 표현