Sys.UI.Data.ListView를
포함하여 Atlas Sys.UI.Data의 고급 컨트롤 중 일부를 소개합니다.
: ASP.NET Atlas ListView 컨트롤을 사용하여 목록 데이터 표시
Sys.UI.Data.ItemView: 계속됩니다.
Sys.UI.Data.DataNavigator: 계속됩니다.
Sys.UI.Data.XSLTView: 계속하려면 이 기사는 ASP.NET Atlas ListView 컨트롤을 사용하여 목록 데이터를 표시하는 첫 번째 기사입니다.
대부분의 최신 웹 프로그램에서는 일부 목록 데이터를 사용자에게 표시해야 합니다. ASP.NET의 GridView 서버 컨트롤은 이 기능을 제공하며 Atlas의 클라이언트 컨트롤 ListView도 클라이언트 측에서 유사한 기능을 제공하고 AJAX 모드에서 실행할 수 있습니다. 기존 GridView 컨트롤과 Atlas의 UpdatePanel을 사용하여 동일한 AJAX 작업을 제공할 수 있지만 이 구현은 효율성이 낮고 "순수한" Atlas 접근 방식이 아닙니다. 권장되는 방법은 대신 Atlas의 클라이언트 컨트롤 ListView를 사용하는 것입니다. 걱정하지 마십시오. Atlas의 ListView 컨트롤은 GridView만큼 간단하며 두 컨트롤은 ItemTemplate과 같은 많은 개념에서 유사합니다. 그러나 현재 IDE는 Atlas 스크립트에 대한 지능형 인식 기능을 제공하지 않는다는 점에 유의해야 합니다. 또한 Atlas 스크립트에는 컴파일 시간 검사 기능이 없으므로 코드를 작성할 때 각별히 주의해야 합니다.
ListView를 사용할 때 Atlas에 콘텐츠 렌더링 방법을 알려주는 데 필요한 몇 가지 템플릿(템플릿)을 제공해야 합니다. ListView에는 다음과 같은 템플릿이 있습니다.
레이아웃Template: 이 템플릿은 목록 항목(예: <table> 태그 사용), 목록 헤드(예: <thead> 태그 사용)를 포함하는 컨테이너를 렌더링하는 데 사용됩니다. 꼬리 등등 ListView에 대한 레이아웃Template을 지정해야 합니다. 그리고 이 템플릿에는 itemTemplate 템플릿이 포함되어야 하며 선택적으로 분리기 템플릿 템플릿도 포함되어야 합니다.
itemTemplate: 이 템플릿은 목록의 항목을 렌더링하는 데 사용됩니다(예: <tr> 태그 사용). 이 템플릿은layoutTemplate에 배치되어야 합니다.
SeparatorTemplate: 이 템플릿은 목록의 항목 사이에 구분 기호 요소를 렌더링하는 데 사용됩니다(예: <hr> 태그 사용). 이 템플릿은layoutTemplate에 배치되어야 합니다.
emptyTemplate.: 이 템플릿은 항목이 없을 때 ListView를 렌더링하는 데 사용됩니다. 이때 DataSource 객체에는 ListView와 관련된 항목이 없거나, 서버에서 얻어오는 중일 수도 있다.
ListView에는 다음과 같은 몇 가지 속성도 있습니다.
itemCssClass: 항목 항목의 CSS 클래스를 지정합니다.
alternatingItemCssClass: 간격을 지정하는 항목 항목의 CSS 클래스입니다.
selectedItemCssClass: 선택한 항목 항목의 CSS 클래스를 지정합니다.
SeparatorCssClass: 요소를 구분하는 CSS 클래스를 지정합니다.
itemTemplateParentElementId: 이 속성은 itemTemplate 및 SeparatorTemplate의 상위 요소를 지정합니다. 이런 방식으로 itemTemplate 및 SeparatorTemplate 요소를 반복적으로 렌더링할 수 있습니다.
이제 예제를 사용하여 ListView 컨트롤을 사용하는 방법을 설명하겠습니다.
먼저 .NET에서 DataTable을 반환하는 웹 서비스를 작성합니다. 여기서는 Microsoft.Web.Services.DataService 기본 클래스에서 상속하고 System.ComponentModel 네임스페이스에 정의된 DataObjectMethod 특성을 서비스 메서드에 추가합니다. 서비스 메서드 시작 부분에서는 System.Threading.Thread.Sleep(2000)을 사용하여 2초 네트워크 지연을 시뮬레이션하여 emptyTemplate의 내용을 볼 수 있습니다.
[WebService(네임스페이스 = " http://tempuri.org/ ")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
공용 클래스 MyService : Microsoft.Web.Services.DataService {
[DataObjectMethod(DataObjectMethodType.Select)]
공개 데이터테이블 GetListData()
{
System.Threading.Thread.Sleep(2000);
DataTable dt = new DataTable("MyListData");
dt.Columns.Add("이름", typeof(string));
dt.Columns.Add("이메일", typeof(string));
DataRow newRow;
for (int i = 0; i < 5; ++i)
{
newRow = dt.NewRow();
newRow["이름"] = string.Format("Dflying {0}", i);
newRow["Email"] = string.Format(" Dflying{0}@dflying.net ", i);
dt.Rows.Add(newRow);
}
dt를 반환;
}
}
그런 다음 ASP.NET 페이지에 몇 가지 필요한 컨트롤/태그를 추가합니다. <atlas:ScriptManager ID="ScriptManager1" runat="server" />
<!-- myList의 요소(컨테이너) -->
<div id="myList"></div>
<!-- 레이아웃 요소 -->
<div 스타일="표시: 없음;">
</div>
위 태그에는 필수 ScriptManager 컨트롤이라는 세 가지 태그를 추가했습니다. ID가 myList인 div는 Atlas가 렌더링된 ListView를 여기에 배치할 수 있도록 하는 데 사용됩니다. 템플릿을 정의하는 숨겨진 div입니다. 이 숨겨진 div의 요소는 페이지에 표시되지 않으며 Atlas에 필요한 템플릿을 제공하는 데만 사용됩니다.
이 숨겨진 div에 다음 ListView 템플릿을 추가합니다:
<!-- Layout Template -->
<table id="myList_layoutTemplate" border="1" cellpadding="3">
<머리>
<tr>
<td><span>아니요.</span></td>
<td><span>이름</span></td>
<td><span>이메일</span></td>
</tr>
</thead>
<!-- 템플릿 반복 -->
<tbody id="myList_itemTemplateParent">
<!-- 항목 템플릿 반복 -->
<tr id="myList_itemTemplate">
<td><span id="lblIndex" /></td>
<td><span id="lblName" /></td>
<td><span id="lblEmail" /></td>
</tr>
<!-- 구분 항목 템플릿 -->
<tr id="myList_separatorTemplate">
<td colspan="3">구분자</td>
</tr>
</tbody>
</table>
<!-- 빈 템플릿 -->
<div id="myList_emptyTemplate">
데이터 없음
</div>
위의 코드에서는 제가 언급한 네 가지 템플릿을 모두 볼 수 있습니다. 또한 아래 Atlas 스크립트 선언에 사용될 각 템플릿의 ID를 지정하세요. 이 예에서는 이 ListView를 HTML 테이블로 렌더링할 것입니다. 불행하게도 분리된 요소는 보기 흉할 것입니다(빈 줄).
마지막으로 페이지에 Atlas 스크립트 문을 추가합니다.
<dataSource id="listDataSource" autoLoad="true" serviceURL="MyService.asmx" />
<listView id="myList" itemTemplateParentElementId="myList_itemTemplateParent">
<바인딩>
<바인딩 dataContext="listDataSource" dataPath="data" property="data" />
</바인딩>
<레이아웃 템플릿>
<templatelayoutElement="myList_layoutTemplate" />
</layoutTemplate>
<아이템템플릿>
<templatelayoutElement="myList_itemTemplate">
<라벨 id="lbl인덱스">
<바인딩>
<바인딩 dataPath="$index" 변환="추가" 속성="텍스트"/>
</바인딩>
</label>
<라벨 id="lbl이름">
<바인딩>
<바인딩 데이터 경로="이름" 속성="텍스트" />
</바인딩>
</label>
<라벨 id="lbl이메일">
<바인딩>
<바인딩 dataPath="이메일" 속성="텍스트" />
</바인딩>
</label>
</템플릿>
</itemTemplate>
<separator템플릿>
<templatelayoutElement="myList_separatorTemplate" />
</separator템플릿>
<빈템플릿>
<templatelayoutElement="myList_emptyTemplate"/>
</emptyTemplate>
</listView>
여기서는 웹 서비스에서 데이터를 얻기 위해 Atlas 클라이언트 DataSource 개체를 추가했습니다. 여기서는 DataSource에 대해 많이 다루지 않습니다(이후 기사에서 소개될 수 있음). ListView와 관련된 정의를 살펴보겠습니다. ListView 정의에서는 itemTemplateParentElementId 속성을 지정합니다. 그런 다음 DataSource에서 얻은 데이터를 ListView에 바인딩하기 위해 바인딩 세그먼트가 ListView 내부에 정의됩니다. 또한 4개의 템플릿 세그먼트를 정의했는데, 각 세그먼트는 레이아웃 요소를 사용하여 위에 정의된 4개의 템플릿과 연결됩니다. layoutTemplate 템플릿의 첫 번째 레이블 컨트롤에 대해 바인딩에 추가 변환기를 지정하여 0에서 시작하는 순서를 1부터 시작하는 순서로 변경했습니다(Atlas Transformer의 경우 내 기사: http://dflying.cnblogs를 참조하세요). com/archive/2006/04/05/367908.html ).
끝났습니다. 실행해 보겠습니다.