เวอร์ชันภาษาอังกฤษ: http://dflying.dflying.net/1/archive/127_paging_your_list_using_aspnet_atlas_pagenavigator_control.html
ในชุดนี้ ฉันจะแนะนำการควบคุมขั้นสูงบางส่วนใน Atlas Sys.UI.Data รวมถึง:
Sys.UI.Data.ListView : แสดงรายการข้อมูลโดยใช้การควบคุม 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 เพื่อใช้การนำทางเพจฝั่งไคลเอ็นต์และใส่บันทึกทั้งหมดไว้ในหน้าเดียว ไม่ใช่ความคิดที่ดีอย่างแน่นอน โดยเฉพาะอย่างยิ่งเมื่อคุณมีบันทึกนับร้อยหรือนับพันรายการ ผู้ใช้ของคุณจำเป็นต้องลากแถบเลื่อนต่อไป หรือแม้แต่ใช้ Control+F เพื่อค้นหาเนื้อหาที่ต้องการ ซึ่งจะทำให้ผู้ใช้ได้รับประสบการณ์ที่แย่มาก ในเวลานี้ การแสดงข้อมูลในหน้าเพจจะเป็นมิตรกับผู้ใช้มากขึ้น ตัวควบคุมฝั่งเซิร์ฟเวอร์ ASP.NET บางตัวมีความสามารถในการเพจและการนำทางเพจในตัว เช่น DataGrid และ GridView ในทำนองเดียวกัน การควบคุมไคลเอ็นต์ Atlas Sys.UI.Data.DataNavigator ยังมีฟังก์ชันที่คล้ายกัน ซึ่งจะช่วยปรับปรุงประสิทธิภาพการพัฒนาของเราอย่างมาก
ตัวควบคุม DataNavigator จะทำงานร่วมกับตัวควบคุม DataView (โปรดดูที่: บทนำการควบคุมภายใต้ตัวควบคุม Atlas namespace Sys.Data - DataView และ DataFilter) เรารู้ว่าตัวควบคุม DataView ไม่มีวิธีการที่เกี่ยวข้องกับการนำทางเพจ ดังนั้นเราจึงสามารถตั้งค่าคุณสมบัติ pageIndex โดยตรงเพื่อใช้การนำทางเท่านั้น แม้ว่าจะไม่ใช่เรื่องยาก แต่ในหลายกรณีก็ไม่ใช่ความคิดที่ดี เนื่องจากนักพัฒนาที่ไม่ระมัดระวังจำนวนมากเช่นฉันมักจะลืมตรวจสอบค่าขอบเขตของ pageIndex ทำให้เกิดปัญหาโดยไม่จำเป็น นี่คือหนึ่งในเหตุผลที่ Atlas ให้การควบคุม DataNavigator การควบคุม DataNavigator จะทำหน้าที่เป็นพร็อกซีสำหรับการควบคุม DataView และจัดให้มีอินเทอร์เฟซการนำทางเพจที่ใช้งานง่าย
ออบเจ็กต์ DataNavigator มีแอตทริบิวต์เดียวเท่านั้น:
dataView: การอ้างอิงถึงออบเจ็กต์ DataView นี้ DataNavigator จะใช้การดำเนินการนำทางเพจกับมัน คุณควรระบุคุณสมบัตินี้เสมอ
นอกจากนี้ ในการใช้ตัวควบคุม DataNavigator คุณยังต้องจัดเตรียมปุ่ม Atlas บางส่วนที่มีคุณสมบัติ commandName ที่ระบุเพื่อทริกเกอร์การดำเนินการนำทางเพจที่เกี่ยวข้อง คุณสมบัติหลักของปุ่มเหล่านี้ควรถูกตั้งค่าเป็นตัวควบคุม DataNavigator นี้เพื่อให้แน่ใจว่า DataNavigator สามารถจับคำสั่งที่ออกโดยปุ่มเหล่านี้ได้
คุณสามารถระบุแอตทริบิวต์ commandName ของปุ่มของคุณเป็นสตริงห้าสายต่อไปนี้ โดยแต่ละสตริงมีความหมายที่แตกต่างกัน:
หน้า: แปลงดัชนีหน้าปัจจุบันเป็นค่าที่ระบุในอาร์กิวเมนต์คำสั่ง ด้วยคำสั่งนี้เราสามารถเปลี่ยนดัชนีของเพจได้อย่างรวดเร็ว
หน้าถัดไป: สลับไปยังหน้าถัดไป (หากมีหน้าถัดไป)
Previouspage: สลับไปยังหน้าก่อนหน้า (หากมีหน้าก่อนหน้า)
หน้าแรก: สลับไปที่หน้าแรก
หน้าสุดท้าย: สลับไปยังหน้าสุดท้าย
โอเค คำแนะนำที่น่าเบื่ออย่าง MSDN อยู่ตรงนี้แล้ว เรามาทำความคุ้นเคยกับการใช้ DataNavigator ผ่านตัวอย่างกันดีกว่า
ก่อนอื่นเราต้องเปิดเผย Web Service เพื่อให้หน้า Atlas สามารถใช้งานได้ บริการเว็บจะส่งคืน 100 เรคคอร์ด ต่อไปนี้เป็นโค้ดของ Web Service นี้ ซึ่งเข้าใจง่ายมากและจะไม่ทำซ้ำที่นี่
บริการเว็บ
ใช้ระบบ;
ใช้ System.Collections;
ใช้ System.Collections.Generic;
โดยใช้ System.ComponentModel;
ใช้ System.IO;
ใช้ System.Web;
ใช้ System.Web.Caching;
ใช้ System.Web.Services;
โดยใช้ System.Web.Services.Protocols;
ใช้ Microsoft.Web.Services;
//
// เพื่อความง่าย ตัวอย่างนี้สาธิตการจัดเก็บและการจัดการ
// วัตถุข้อมูลในหน่วยความจำก็สามารถนำมาใช้ได้
-
[บริการเว็บ (เนมสเปซ = " http://tempuri.org/ ")]
[WebServiceBinding (ConformsTo = WsiProfiles.BasicProfile1_1)]
MyDataService คลาสสาธารณะ: DataService
-
รายการคงที่ <รายการ> _data;
วัตถุคงที่ _dataLock = วัตถุใหม่ ();
ข้อมูลรายการคงที่ส่วนตัว
-
รับ
-
ถ้า (_data == null)
-
ล็อค(_dataLock)
-
ถ้า (_data == null)
-
_data = รายการใหม่<รายการ>();
สำหรับ (int i = 0; i < 100; i++)
-
_data.Add(รายการใหม่(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 (จริง, จริง)]
รหัสสาธารณะ
-
รับ { กลับ _id }
ตั้งค่า { _id = ค่า; }
}
[DataObjectField(เท็จ)]
[DefaultValue("แถวใหม่")]
ชื่อสตริงสาธารณะ
-
รับ { กลับ _name }
ตั้งค่า { _name = ค่า; }
}
[DataObjectField(เท็จ)]
[ค่าเริ่มต้น("")]
อีเมลสตริงสาธารณะ
-
รับ { ส่งคืน _อีเมล }
ตั้งค่า { _email = ค่า }
}
รายการสาธารณะ()
-
_id = -1;
}
รายการสาธารณะ (int id, ชื่อสตริง, คำอธิบายสตริง)
-
_id = รหัส;
_ชื่อ = ชื่อ;
_email = คำอธิบาย;
-
-
จากนั้น ในหน้า ASPX เราต้องพิจารณาและกำหนดสี่ส่วนต่อไปนี้:
ตัวควบคุม ScriptManager เพื่อเก็บไฟล์สคริปต์ที่เกี่ยวข้องกับ Atlas Framework ที่จำเป็นสำหรับเพจ โดยปกติแล้ว นี่คือสิ่งที่ทุกหน้า Atlas ต้องมี
div ตัวยึดตำแหน่ง (id คือ dataContents ดูโค้ด) Atlas จะวาง ListView แบบแบ่งหน้าที่แสดงผลไว้ที่นี่
div (ตัวควบคุม DataNavigator) เป็นคอนเทนเนอร์และชุดของปุ่ม (ปุ่มคำสั่ง) ที่มีอยู่ในนั้น ถูกนำมาใช้เพื่อใช้ฟังก์ชันการนำทางเพจ
div ที่ซ่อนอยู่ใช้เพื่อวางเทมเพลต ListView
ต่อไปนี้เป็นรหัสสำหรับสี่ส่วนข้างต้น เกี่ยวกับเทมเพลตของตัวควบคุม ListView โปรดดูบทความของฉัน: การใช้ตัวควบคุม ASP.NET Atlas ListView เพื่อแสดงข้อมูลรายการ
<!-- สคริปต์ผู้จัดการ -->
<atlas:ScriptManager runat="server" ID="scriptManager" />
<!-- องค์ประกอบสำหรับ Paged ListView (คอนเทนเนอร์) -->
<div id="dataContents">
</div>
<!--เพจนาวิเกเตอร์ -->
<div id="pageNavigator">
<input type="button" id="btnFirstPage" value="<<" />
<input type="button" id="btnPrevPage" value="<" />
<span id="lblPageNumber"></span> / <span id="lblPageCount"></span>
<input type="button" id="btnNextPage" value=">" />
<input type="button" id="btnLastPage" value=">>" />
</div>
<!-- เทมเพลต -->
<div style="visibility: Hidden; display: none">
<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>
</หัว>
<!-- ทำซ้ำเทมเพลต -->
<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>
</ตาราง>
<!-- เทมเพลตว่างเปล่า -->
<div id="myList_emptyTemplate">
ไม่มีข้อมูล
</div>
</div>
ในที่สุดก็ถึงเวลาเขียนคำจำกัดความของสคริปต์ XML สำหรับ Atlas ซึ่งมีห้าส่วนต่อไปนี้:
ส่วนที่ 1: แหล่งข้อมูลการควบคุมไคลเอ็นต์ Atlas ใช้เพื่อรับข้อมูลจากบริการเว็บที่เรากำหนดไว้ข้างต้น
<dataSource id = "dataSource" autoLoad = "true" serviceURL = "MyDataService.asmx" />
ส่วนที่ 2: ตัวควบคุม DataView (โปรดดูที่: ข้อมูลเบื้องต้นเกี่ยวกับการควบคุมภายใต้ Atlas namespace Sys.Data - DataView และ DataFilter) ใช้ในการเพจข้อมูล 100 ชิ้นที่ได้รับในส่วนแรก
<dataView id="view" pageSize="12">
<การผูก>
<binding dataContext="dataSource" dataPath="data" property="data" />
</การผูก>
</dataView>
ส่วนที่ 3: ตัวควบคุม ListView (โปรดอ้างอิงถึง: การใช้ตัวควบคุม ASP.NET Atlas ListView เพื่อแสดงข้อมูลรายการ) ใช้เพื่อแสดงข้อมูลแบบแบ่งหน้า
<listView id="dataContents" itemTemplateParentElementId="myList_itemTemplateParent">
<การผูก>
<binding dataContext="view" dataPath="filteredData" property="data"/>
</การผูก>
<เทมเพลตเค้าโครง>
<แม่แบบเค้าโครงElement="myList_layoutTemplate"/>
</เค้าโครงเทมเพลต>
<เทมเพลตรายการ>
<แม่แบบเค้าโครงElement="myList_itemTemplate">
<label id="lblIndex">
<การผูก>
<binding dataPath="$index" การแปลง = "เพิ่ม" คุณสมบัติ = "ข้อความ"/>
</การผูก>
</ฉลาก>
<label id="lblName">
<การผูก>
<ผูก dataPath = "ชื่อ" คุณสมบัติ = "ข้อความ"/>
</การผูก>
</ฉลาก>
<label id="lblEmail">
<การผูก>
<binding dataPath="อีเมล" คุณสมบัติ="ข้อความ"/>
</การผูก>
</ฉลาก>
</แม่แบบ>
</เทมเพลตรายการ>
<แม่แบบว่างเปล่า>
<แม่แบบเค้าโครงElement="myList_emptyTemplate"/>
</emptyTemplate>
</listView>
ส่วนที่ 4: ปุ่มควบคุม DataNavigator และคำสั่ง โปรดสังเกตว่าเรามีปุ่มสี่ปุ่มที่นี่ แต่ละปุ่มมีแอตทริบิวต์ commandName ที่แตกต่างกัน ซึ่งสอดคล้องกับการทำงานของ DataNavigator บน DataView ด้วย ในเวลาเดียวกัน คุณสมบัติหลักของปุ่มเหล่านี้จะถูกตั้งค่าเป็นวัตถุ DataNavigator นี้
<dataNavigator id="pageNavigator" dataView="view"/>
<button id="btnFirstPage" parent="pageNavigator" command="FirstPage" />
<button id="btnPrevPage" parent="pageNavigator" command="PreviousPage">
<การผูก>
<binding คุณสมบัติ = "เปิดใช้งาน" dataPath = "hasPreviousPage"/>
</การผูก>
</ปุ่ม>
<button id="btnNextPage" parent="pageNavigator" command="NextPage">
<การผูก>
<binding คุณสมบัติ = "เปิดใช้งาน" dataPath = "hasNextPage"/>
</การผูก>
</ปุ่ม>
<button id="btnLastPage" parent="pageNavigator" command="LastPage" />
ส่วนที่ 5: ป้ายกำกับสองป้าย แสดงจำนวนหน้าทั้งหมดและหมายเลขลำดับของหน้าปัจจุบันตามลำดับ
<label id="lblPageNumber">
<การผูก>
<binding dataContext="view" property="text" dataPath="pageIndex" การแปลง = "เพิ่ม"/>
</การผูก>
</ฉลาก>
<label id="lblPageCount">
<การผูก>
<binding dataContext="view" property="text" dataPath="pageCount"/>
</การผูก>
</ฉลาก>
ตกลง ทดสอบในเบราว์เซอร์:
