Sys.UI.Data.ListView를
포함하여 Atlas Sys.UI.Data의 고급 컨트롤 중 일부를 소개합니다.
: ASP.NET Atlas ListView 컨트롤을 사용하여 목록 데이터 표시
Sys.UI.Data.ItemView: ASP.NET Atlas ItemView 컨트롤을 사용하여 컬렉션의 개별 데이터 표시
Sys.UI.Data.DataNavigator: ASP.NET Atlas PageNavigator 컨트롤을 사용하여 클라이언트측 페이징 탐색 구현
Sys.UI.Data.SortBehavior: 계속
Sys.UI.Data.XSLTView: 계속 예정 세 번째 문서입니다. ASP.NET Atlas PageNavigator 컨트롤을 사용하여 클라이언트측 페이징 탐색을 구현하고 모든 레코드를 한 페이지에 넣습니다. 특히 수백 또는 수천 개의 레코드가 있는 경우에는 확실히 좋은 생각이 아닙니다. 사용자는 원하는 콘텐츠를 찾기 위해 스크롤 막대를 계속 끌거나 Ctrl+F를 눌러야 하므로 사용자 경험이 매우 저하됩니다. 이때는 페이징에 데이터를 표시하는 것이 훨씬 더 사용자 친화적일 것입니다. 일부 ASP.NET 서버측 컨트롤에는 DataGrid 및 GridView와 같은 페이징 및 페이지 탐색 기능이 내장되어 있습니다. 마찬가지로 Atlas 클라이언트 컨트롤 Sys.UI.Data.DataNavigator도 유사한 기능을 제공하므로 개발 효율성이 크게 향상됩니다.
DataNavigator 컨트롤은 DataView 컨트롤과 함께 작동합니다(Atlas 네임스페이스 Sys.Data - DataView 및 DataFilter 아래의 컨트롤 소개 참조). DataView 컨트롤은 페이지 탐색 관련 메서드를 제공하지 않는다는 것을 알고 있으므로 pageIndex 속성을 직접 설정하여 탐색을 구현할 수만 있습니다. 어렵지는 않지만 나처럼 부주의한 개발자들이 pageIndex의 경계값을 확인하는 것을 잊어버리고 불필요한 문제를 일으키는 경우가 많기 때문에 이는 좋은 생각이 아닌 경우가 많다. 이것이 Atlas가 DataNavigator 컨트롤을 제공하는 이유 중 하나입니다. DataNavigator 컨트롤은 DataView 컨트롤의 프록시 역할을 하며 사용하기 쉬운 페이지 탐색 인터페이스를 제공합니다.
DataNavigator 개체에는 하나의 속성만 있습니다.
dataView: DataView 개체에 대한 참조입니다. 이 DataNavigator는 페이지 탐색 작업을 개체에 적용합니다. 항상 이 속성을 지정해야 합니다.
또한 DataNavigator 컨트롤을 사용하려면 해당 페이지 탐색 작업을 트리거하기 위해 지정된 commandName 속성과 함께 일부 Atlas 버튼도 제공해야 합니다. DataNavigator가 이러한 버튼에서 실행된 명령을 캡처할 수 있도록 하려면 이러한 버튼의 상위 속성을 이 DataNavigator 컨트롤로 설정해야 합니다.
Button의 commandName 속성을 각각 다른 의미를 갖는 다음 5개의 문자열로 지정할 수 있습니다.
page: 현재 페이지 인덱스를 명령 인수에 지정된 값으로 변환합니다. 이 명령을 사용하면 페이지의 색인을 빠르게 변경할 수 있습니다.
nextpage: 다음 페이지로 전환합니다(다음 페이지가 있는 경우).
이전 페이지: 이전 페이지로 전환합니다(이전 페이지가 있는 경우).
firstpage: 첫 페이지로 전환합니다.
lastpage: 마지막 페이지로 전환합니다.
자, MSDN 같은 지루한 소개는 여기까지입니다. 예제를 통해 DataNavigator 사용법에 익숙해지도록 하겠습니다.
먼저 Atlas 페이지에서 사용할 수 있도록 웹 서비스를 노출해야 합니다. 웹 서비스는 100개의 레코드를 반환합니다. 다음은 이 웹 서비스의 코드로, 이해하기 매우 쉬우므로 여기서는 반복하지 않겠습니다.
웹 서비스
시스템 사용;
System.Collections 사용;
System.Collections.Generic을 사용합니다.
System.ComponentModel 사용;
System.IO 사용;
System.Web 사용;
System.Web.Caching 사용;
System.Web.Services 사용;
System.Web.Services.Protocols 사용;
Microsoft.Web.Services
사용;
// 단순화를 위해 이 예제에서는 저장 및 조작을 보여줍니다.
// 메모리의 데이터 객체도 사용할 수 있습니다.
//
[WebService(네임스페이스 = " http://tempuri.org/ ")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
공개 클래스 MyDataService : DataService
{
정적 목록<항목> _data;
static object _dataLock = new object()
개인 정적 List<Entry> 데이터
{
얻다
{
if (_data == null)
{
잠금(_dataLock)
{
if (_data == null)
{
_data = new List<Entry>();
for (int i = 0; i < 100; i++)
{
_data.Add(new Entry(i, "Dflying " + i.ToString(), string.Format(" Dflying{0}@dflying.net ", i.ToString())));
}
}
}
}
_data를 반환합니다.
}
}
[DataObjectMethod(DataObjectMethodType.Select)]
공개 항목[] SelectRows()
{
MyDataService.Data.ToArray()를 반환합니다.
}
}
공개 클래스 항목
{
개인 문자열 _name;
개인 문자열 _email;
개인 int _id
[DataObjectField(true, true)]
공개 정수 ID
{
{반환_ID}를 얻습니다.
설정 { _id = 값 }
}
[DataObjectField(false)]
[DefaultValue("새 행")]
공개 문자열 이름
{
{반환_이름}을 얻습니다.
설정 { _name = 값 }
}
[DataObjectField(false)]
[기본값("")]
공개 문자열 이메일
{
{반환 _이메일}을 받으세요;
{ _email = 값 }을 설정합니다.
}
공개 항목()
{
_id = -1;
}
공개 항목(int ID, 문자열 이름, 문자열 설명)
{
_id = 아이디;
_이름 = 이름;
_email = 설명;
}
}
즉 페이지에 필요한 Atlas Framework 관련 스크립트 파일을 포함하는 ScriptManager 컨트롤을
고려하고 정의해야 합니다
.일반적으로 이는 모든 Atlas 페이지에 포함되어야 하는 내용입니다.
자리 표시자 div(id는 dataContents, 코드 참조). Atlas는 페이지가 매겨진 렌더링된 ListView를 여기에 배치합니다.
컨테이너로서의 div(DataNavigator 컨트롤)와 여기에 포함된 버튼 세트(명령 버튼)는 페이지 탐색 기능을 구현하는 데 사용됩니다.
ListView 템플릿을 배치하는 데 사용되는 숨겨진 div입니다.
다음은 위의 네 부분에 대한 코드입니다. ListView 컨트롤의 템플릿에 대해서는 내 문서인 ASP.NET Atlas ListView 컨트롤을 사용하여 목록 데이터 표시를 참조하세요.
<!-- ScriptManager -->
<atlas:ScriptManager runat="server" ID="scriptManager" />
<!-- 페이징된 ListView에 대한 요소(컨테이너) -->
<div id="dataContents">
</div>
<!-- PageNavigator -->
<div id="pageNavigator">
<input type="button" id="btnFirstPage" value="<<"
<input type="button" id="btnPrevPage" 값="<"
<span id="lblPageNumber"></span> / <span id="lblPageCount"></span>
<입력 유형="버튼" id="btnNextPage" 값=">"
<input type="button" id="btnLastPage" value=">>"
</div>
<!-- 템플릿 -->
<div style="가시성: 숨김; 표시: 없음">
<table id="myList_layoutTemplate" border="1" cellpadding="3" style="width:20em;">
<머리>
<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>
</tbody>
</table>
<!-- 빈 템플릿 -->
<div id="myList_emptyTemplate">
데이터 없음
</div>
</div>
마지막으로, 다음과 같은 다섯 부분으로 구성된 Atlas용 XML 스크립트 정의를 작성할 시간입니다.
파트 1: 위에서 정의한 웹 서비스에서 데이터를 얻는 데 사용되는 Atlas 클라이언트 컨트롤 DataSource.
<dataSource id="dataSource" autoLoad="true" serviceURL="MyDataService.asmx" />
2부: 첫 번째 부분에서 얻은 100개의 데이터를 페이징하는 데 사용되는 DataView 컨트롤(Atlas 네임스페이스 Sys.Data의 컨트롤 소개 - DataView 및 DataFilter 참조).
<dataView id="view" pageSize="12">
<바인딩>
<바인딩 dataContext="dataSource" dataPath="data" property="data" />
</바인딩>
</dataView>
파트 3: 페이지가 매겨진 데이터를 표시하는 데 사용되는 ListView 컨트롤(참조: ASP.NET Atlas ListView 컨트롤을 사용하여 목록 데이터 표시).
<listView id="dataContents" itemTemplateParentElementId="myList_itemTemplateParent" >
<바인딩>
<바인딩 dataContext="view" dataPath="filteredData" 속성="데이터"/>
</바인딩>
<레이아웃 템플릿>
<templatelayoutElement="myList_layoutTemplate"/>
</layoutTemplate>
<아이템템플릿>
<templatelayoutElement="myList_itemTemplate">
<라벨 id="lbl인덱스">
<바인딩>
<바인딩 dataPath="$index" 변환="추가" 속성="텍스트"/>
</바인딩>
</label>
<라벨 id="lbl이름">
<바인딩>
<바인딩 데이터 경로="이름" 속성="텍스트"/>
</바인딩>
</label>
<라벨 id="lbl이메일">
<바인딩>
<바인딩 데이터패스="이메일" 속성="텍스트"/>
</바인딩>
</label>
</템플릿>
</itemTemplate>
<빈템플릿>
<templatelayoutElement="myList_emptyTemplate"/>
</emptyTemplate>
</listView>
파트 4: DataNavigator 제어 및 명령 버튼. 여기에는 4개의 버튼이 있으며 각 버튼에는 서로 다른 commandName 속성이 있으며 이는 DataView의 DataNavigator 작업에도 해당합니다. 동시에 이러한 단추의 상위 속성은 이 DataNavigator 개체로 설정됩니다.
<dataNavigator id="pageNavigator" dataView="view"/>
<button id="btnFirstPage" parent="pageNavigator" command="FirstPage" />
<button id="btnPrevPage" parent="pageNavigator" command="이전페이지">
<바인딩>
<바인딩 속성="활성화" dataPath="hasPreviousPage"/>
</바인딩>
</버튼>
<button id="btnNextPage" parent="pageNavigator" command="NextPage">
<바인딩>
<바인딩 속성="활성화" dataPath="hasNextPage"/>
</바인딩>
</버튼>
<button id="btnLastPage" parent="pageNavigator" command="LastPage" />
파트 5: 총 페이지 수와 현재 페이지의 일련 번호를 각각 표시하는 두 개의 라벨.
<라벨 id="lbl페이지번호">
<바인딩>
<bind dataContext="view" property="text" dataPath="pageIndex" 변환="추가"/>
</바인딩>
</label>
<라벨 id="lblPageCount">
<바인딩>
<바인딩 dataContext="view" property="text" dataPath="pageCount"/>
</바인딩>
</label>
좋습니다. 브라우저에서 테스트해 보세요.
