เวอร์ชันภาษาอังกฤษ: http://dflying.dflying.net/1/archive/113_display_listible_data_using_aspnet_atlas_listview_control.html
ในชุดนี้ ฉันจะแนะนำการควบคุมขั้นสูงบางส่วนใน Atlas Sys.UI.Data รวมถึง:
Sys.UI.Data.ListView : แสดงรายการข้อมูลโดยใช้การควบคุม ASP.NET Atlas ListView
Sys.UI.Data.ItemView: ดำเนินการต่อไป
Sys.UI.Data.DataNavigator: ดำเนินการต่อ
Sys.UI.Data.XSLTView: หากต้องการดำเนินการต่อ บทความนี้เป็นบทความแรก: การใช้ตัวควบคุม ASP.NET Atlas ListView เพื่อแสดงข้อมูลรายการ
ในโปรแกรมเว็บปัจจุบันส่วนใหญ่ เราจำเป็นต้องแสดงข้อมูลรายการบางส่วนแก่ผู้ใช้ การควบคุมเซิร์ฟเวอร์ GridView ใน ASP.NET มีฟังก์ชันนี้ และตัวควบคุมไคลเอ็นต์ ListView ใน Atlas ยังสามารถจัดเตรียมฟังก์ชันที่คล้ายกันในฝั่งไคลเอ็นต์และทำงานในโหมด AJAX แม้ว่าคุณสามารถใช้การควบคุม GridView แบบดั้งเดิมร่วมกับ UpdatePanel ของ Atlas เพื่อให้การดำเนินการ AJAX เดียวกันได้ แต่การใช้งานนี้มีประสิทธิภาพน้อยกว่าและไม่ใช่แนวทาง Atlas ที่ "บริสุทธิ์" วิธีที่แนะนำคือใช้ ListView การควบคุมไคลเอ็นต์ของ Atlas แทน ไม่ต้องกังวล การควบคุม ListView ของ Atlas นั้นเรียบง่ายเหมือนกับ GridView และทั้งสองก็มีความคล้ายคลึงกันในหลาย ๆ แนวคิด เช่น ItemTemplate อย่างไรก็ตาม ควรสังเกตว่า IDE ปัจจุบันไม่มีฟังก์ชันการรับรู้อัจฉริยะสำหรับสคริปต์ Atlas นอกจากนี้ สคริปต์ Atlas ยังไม่มีการตรวจสอบเวลาคอมไพล์ ดังนั้นคุณควรระมัดระวังเป็นพิเศษเมื่อเขียนโค้ด
เมื่อใช้ ListView คุณควรจัดเตรียมเทมเพลตที่จำเป็น (เทมเพลต) เพื่อบอก Atlas ว่าจะแสดงเนื้อหาของคุณอย่างไร มีเทมเพลตต่อไปนี้ใน ListView:
รูปแบบเทมเพลต: เทมเพลตนี้ใช้เพื่อแสดงคอนเทนเนอร์ที่มีรายการสินค้า (เช่น การใช้แท็ก <table>) ส่วนหัวของรายการ (เช่น การใช้แท็ก <thead>) หาง ฯลฯ คุณต้องระบุ templateTemplate สำหรับ ListView และเทมเพลตนี้ต้องมีเทมเพลต itemTemplate และเทมเพลต separatorTemplate (ไม่บังคับ)
itemTemplate: เทมเพลตนี้ใช้เพื่อแสดงรายการในรายการ (เช่น การใช้แท็ก <tr>) เทมเพลตนี้ต้องอยู่ในรูปแบบเทมเพลต
separatorTemplate: เทมเพลตนี้ใช้เพื่อแสดงองค์ประกอบตัวคั่นระหว่างรายการต่างๆ ในรายการ (เช่น การใช้แท็ก <hr>) เทมเพลตนี้ต้องอยู่ในรูปแบบเทมเพลต
EmptyTemplate.: เทมเพลตนี้ใช้เพื่อแสดง ListView เมื่อไม่มีรายการอยู่ ในขณะนี้ อาจไม่มีรายการในวัตถุแหล่งข้อมูลที่เกี่ยวข้องกับ ListView หรืออาจอยู่ในกระบวนการรับจากเซิร์ฟเวอร์
นอกจากนี้ยังมีคุณสมบัติบางอย่างใน ListView:
itemCssClass: ระบุคลาส css ของรายการรายการ
alternatingItemCssClass: คลาส css ของรายการไอเท็มที่ระบุช่วงเวลา
SelectedItemCssClass: ระบุคลาส css ของรายการไอเท็มที่เลือก
separatorCssClass: ระบุคลาส CSS ที่แยกองค์ประกอบ
itemTemplateParentElementId: แอ็ตทริบิวต์นี้ระบุองค์ประกอบหลักของ itemTemplate และ separatorTemplate วิธีนี้ทำให้องค์ประกอบ itemTemplate และ separatorTemplate สามารถแสดงผลซ้ำๆ ได้
ตกลง ให้เราใช้ตัวอย่างเพื่อแสดงวิธีการใช้ตัวควบคุม ListView:
ขั้นแรก เราเขียนบริการเว็บที่ส่งกลับ DataTable ใน .NET โปรดทราบว่าที่นี่เราจะสืบทอดจากคลาสฐาน Microsoft.Web.Services.DataService และเพิ่มแอตทริบิวต์ DataObjectMethod ที่กำหนดไว้ในเนมสเปซ System.ComponentModel ให้กับวิธีการบริการ ที่จุดเริ่มต้นของวิธีการบริการ เราใช้ System.Threading.Thread.Sleep(2000) เพื่อจำลองความล่าช้าของเครือข่าย 2 วินาทีเพื่อให้สามารถเห็นเนื้อหาของ EmptyTemplate
[บริการเว็บ (เนมสเปซ = " http://tempuri.org/ ")]
[WebServiceBinding (ConformsTo = WsiProfiles.BasicProfile1_1)]
MyService คลาสสาธารณะ: Microsoft.Web.Services.DataService {
[DataObjectMethod (DataObjectMethodType.Select)]
DataTable GetListData สาธารณะ ()
-
System.Threading.Thread.Sleep (2000);
DataTable dt = DataTable ใหม่ ("MyListData");
dt.Columns.Add("ชื่อ", typeof(string));
dt.Columns.Add("อีเมล", typeof(string));
DataRow แถวใหม่;
สำหรับ (int i = 0; i < 5; ++i)
-
newRow = dt.NewRow();
newRow["Name"] = string.Format("Dflying {0}", i);
newRow["Email"] = string.Format(" Dflying{0}@dflying.net ", i);
dt.Rows.Add(แถวใหม่);
-
กลับ dt;
-
-
จากนั้น เพิ่มการควบคุม/แท็กที่จำเป็นในหน้า ASP.NET: <atlas:ScriptManager ID="ScriptManager1" runat="server" />
<!-- องค์ประกอบสำหรับ myList (คอนเทนเนอร์) -->
<div id="myList"></div>
<!-- องค์ประกอบเค้าโครง -->
<div style="display: none;">
</div>
ในแท็กด้านบน เราได้เพิ่มแท็กสามแท็ก: การควบคุม ScriptManager ที่จำเป็น div ที่มี id myList ใช้เพื่ออนุญาตให้ Atlas วาง ListView ที่แสดงผลไว้ที่นี่ div ที่ซ่อนอยู่ซึ่งกำหนดเทมเพลตของเรา องค์ประกอบใน div ที่ซ่อนอยู่นี้ไม่สามารถมองเห็นได้บนหน้าเว็บ และใช้เพื่อจัดเตรียมเทมเพลตที่จำเป็นให้กับ Atlas เท่านั้น
เราเพิ่มเทมเพลต ListView ต่อไปนี้ลงใน div ที่ซ่อนอยู่:
<!-- เทมเพลตเค้าโครง -->
<table id="myList_layoutTemplate" border="1" cellpadding="3">
<หัว>
<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>
<!-- เทมเพลตรายการตัวคั่น -->
<tr id="myList_separatorTemplate">
<td colspan="3">ตัวคั่น</td>
</tr>
</tbody>
</ตาราง>
<!-- เทมเพลตว่างเปล่า -->
<div id="myList_emptyTemplate">
ไม่มีข้อมูล
</div>
ในโค้ดด้านบน คุณจะเห็นเทมเพลตทั้งสี่แบบที่ฉันพูดถึง นอกจากนี้ ระบุรหัสสำหรับแต่ละเทมเพลต ซึ่งจะใช้ในการประกาศสคริปต์ Atlas ด้านล่าง ในตัวอย่างนี้ ฉันจะเรนเดอร์ ListView นี้เป็นตาราง HTML แต่น่าเสียดายที่องค์ประกอบที่แยกออกมาจะดูน่าเกลียด (บรรทัดว่าง)
สุดท้าย เพิ่มคำสั่งสคริปต์ Atlas ลงในเพจ:
<dataSource id="listDataSource" autoLoad="true" serviceURL="MyService.asmx" />
<listView id="myList" itemTemplateParentElementId="myList_itemTemplateParent">
<การผูก>
<binding dataContext="listDataSource" dataPath="data" property="data" />
</การผูก>
<เทมเพลตเค้าโครง>
<แม่แบบเค้าโครงElement="myList_layoutTemplate" />
</เค้าโครงเทมเพลต>
<เทมเพลตรายการ>
<แม่แบบเค้าโครงElement="myList_itemTemplate">
<label id="lblIndex">
<การผูก>
<binding dataPath="$index" การแปลง = "เพิ่ม" คุณสมบัติ = "ข้อความ"/>
</การผูก>
</ฉลาก>
<label id="lblName">
<การผูก>
<ผูก dataPath = "ชื่อ" คุณสมบัติ = "ข้อความ" />
</การผูก>
</ฉลาก>
<label id="lblEmail">
<การผูก>
<ผูก dataPath = "อีเมล" คุณสมบัติ = "ข้อความ" />
</การผูก>
</ฉลาก>
</แม่แบบ>
</เทมเพลตรายการ>
<แม่แบบตัวคั่น>
<แม่แบบเค้าโครงElement="myList_separatorTemplate" />
</คั่นแม่แบบ>
<แม่แบบว่างเปล่า>
<แม่แบบเค้าโครงElement="myList_emptyTemplate"/>
</emptyTemplate>
</listView>
ที่นี่ฉันได้เพิ่มวัตถุ DataSource ไคลเอ็นต์ Atlas เพื่อรับข้อมูลจากบริการเว็บ เราจะไม่พูดถึง DataSource มากนักที่นี่ (อาจมีการแนะนำในบทความต่อๆ ไป) ลองมาดูคำจำกัดความที่เกี่ยวข้องกับ ListView: ในคำจำกัดความของ ListView เราระบุแอตทริบิวต์ itemTemplateParentElementId จากนั้นมีการกำหนดเซ็กเมนต์การเชื่อมโยงภายใน ListView เพื่อผูกข้อมูลที่ได้รับจากแหล่งข้อมูลไปยัง ListView นอกจากนี้เรายังกำหนดส่วนเทมเพลตสี่ส่วน ซึ่งแต่ละส่วนใช้layoutElementเพื่อเชื่อมโยงกับเทมเพลตทั้งสี่ที่กำหนดไว้ด้านบน โปรดสังเกตว่าสำหรับการควบคุมป้ายกำกับแรกในเทมเพลตเลย์เอาต์เทมเพลต เราได้ระบุ Add Transformer ในการโยงเพื่อเปลี่ยนลำดับเริ่มต้นจาก 0 เป็นเริ่มจาก 1 (สำหรับ Atlas Transformer โปรดดูบทความของฉัน: http://dflying.cnblogs com/archive/2006/04/05/367908.html )
เสร็จแล้ว เรามาเริ่มกันเลย