เว็บฟอร์ม ASP.NET - การควบคุม DataList
ในส่วนนี้จะมาแนะนำ ตัวควบคุม ASP.NET DataList มีความยืดหยุ่นมากกว่าตัวควบคุม Repeater ตัวควบคุม DataList นำเสนอข้อมูลในรูปแบบของตารางตัวควบคุม DataList ซึ่งคล้ายกับตัวควบคุม Repeater ใช้เพื่อแสดงรายการซ้ำของรายการที่ผูกไว้กับตัวควบคุม อย่างไรก็ตาม ตัวควบคุม DataList จะเพิ่มตารางลงในรายการข้อมูลตามค่าเริ่มต้น
ผูกชุดข้อมูลกับตัวควบคุม DataList
ตัวควบคุม DataList ซึ่งคล้ายกับตัวควบคุม Repeater ใช้เพื่อแสดงรายการซ้ำของรายการที่ผูกไว้กับตัวควบคุม อย่างไรก็ตาม ตัวควบคุม DataList จะเพิ่มตารางลงในรายการข้อมูลตามค่าเริ่มต้น ตัวควบคุม DataList สามารถผูกเข้ากับตารางฐานข้อมูล ไฟล์ XML หรือรายการอื่นๆ ได้ ที่นี่เราจะสาธิตวิธีการผูกไฟล์ XML กับตัวควบคุม DataList
ในตัวอย่างของเรา เราจะใช้ไฟล์ XML ต่อไปนี้ ("cdcatalog.xml"):
<?xml version="1.0" encoding="ISO-8859-1"?><catalog><cd><title>Empire Burlesque</title><artist>Bob Dylan</artist><country>สหรัฐอเมริกา</country <company>โคลัมเบีย</company><price>10.90</price><year>1985</year></cd><cd><title>Hide your heart</title><artist>Bonnie Tyler</artist><country>UK</country><company>CBS Records</company><price>9.90</price><year>1988</year></cd><cd><title>เพลงฮิตที่ยิ่งใหญ่ที่สุด </title><artist>ดอลลี่ Parton</artist><country>USA</country><company>RCA</company><price>9.90</price><year>1982</year></cd><cd><title>ยังได้รับ blues</title><artist>Gary Moore</artist><country>สหราชอาณาจักร</country><บริษัท>Virgin บันทึก</company><price>10.20</price><year>1990</year></cd><cd><title>Eros</title><artist>Eros Ramazzotti</artist><country>EU< /country><company>BMG</company><price>9.90</price><year>1997</year></cd></catalog>ดูไฟล์ XML นี้: cdcatalog.xml
ขั้นแรก นำเข้าเนมสเปซ "System.Data" เราต้องการเนมสเปซนี้เพื่อทำงานกับวัตถุ DataSet รวมคำสั่งต่อไปนี้ที่ด้านบนของหน้า .aspx ของคุณ:
<%@ นำเข้าเนมสเปซ = "System.Data" %>จากนั้น ให้สร้างชุดข้อมูลสำหรับไฟล์ XML และโหลดไฟล์ XML ลงในชุดข้อมูลเมื่อโหลดเพจครั้งแรก:
<script runat="server">sub Page_Loadif ไม่ใช่ Page.IsPostBack แล้ว mycdcatalog=New DataSetmycdcatalog.ReadXml(MapPath("cdcatalog.xml"))end ifend subจากนั้นเราสร้างตัวควบคุม DataList ในหน้า .aspx เนื้อหาในองค์ประกอบ <HeaderTemplate> จะถูกแสดงผลก่อนและปรากฏเพียงครั้งเดียวในเอาต์พุต ในขณะที่เนื้อหาในองค์ประกอบ <ItemTemplate> จะถูกทำซ้ำสำหรับแต่ละ "บันทึก" ในชุดข้อมูล สุดท้ายนี้ เนื้อหาในองค์ประกอบ <FooterTemplate> คือ ปรากฏเพียงครั้งเดียวในเอาต์พุต:
<html><body><form runat="server"><asp:DataList id="cdcatalog" runat="server"><HeaderTemplate>...</HeaderTemplate><ItemTemplate>...</ItemTemplate>< เทมเพลตส่วนท้าย>...</FooterTemplate></asp:DataList></form></body></html>จากนั้นเราเพิ่มสคริปต์เพื่อสร้างชุดข้อมูลและผูกชุดข้อมูล mycdcatalog เข้ากับตัวควบคุม DataList จากนั้นตัวควบคุม DataList จะถูกเติมด้วย <HeaderTemplate> ที่มีส่วนหัว <ItemTemplate> ที่มีรายการข้อมูลที่จะแสดง และ <FooterTemplate> ที่มีข้อความ โปรดทราบว่าคุณสามารถตั้งค่าคุณสมบัติเส้นตารางของ DataList เป็น "ทั้งสอง" เพื่อแสดงเส้นขอบตารางได้:
ตัวอย่าง
<%@ นำเข้า Namespace="System.Data" %><script runat="server">ย่อย Page_Loadif ไม่ใช่ Page.IsPostBack แล้ว mycdcatalog=New DataSetmycdcatalog.ReadXml(MapPath("cdcatalog.xml"))cdcatalog.DataSource=mycdcatalogcdcatalog DataBind()end ifend ย่อย</script><html><body><form runat="server"><asp:DataList id="cdcatalog"gridlines="both" runat="server"><HeaderTemplate>แค็ตตาล็อกซีดีของฉัน</HeaderTemplate><ItemTemplate>"<%#Container.DataItem("title" )%>" จาก<%#Container.DataItem("ศิลปิน")%> -$<%#Container.DataItem("price")%></ItemTemplate><FooterTemplate>การอ้างอิงลิขสิทธิ์</FooterTemplate></asp:DataList></form></body></html>ใช้สไตล์
คุณยังสามารถเพิ่มสไตล์ให้กับตัวควบคุม DataList เพื่อทำให้เอาต์พุตดูสวยงามมากขึ้น:
ตัวอย่าง
<%@ นำเข้า Namespace="System.Data" %><script runat="server">ย่อย Page_Loadif ไม่ใช่ Page.IsPostBack แล้ว mycdcatalog=New DataSetmycdcatalog.ReadXml(MapPath("cdcatalog.xml"))cdcatalog.DataSource=mycdcatalogcdcatalog DataBind()end ifend ย่อย</script><html><body><form runat="เซิร์ฟเวอร์"><asp:DataList id="cdcatalog"runat="server"cellpadding="2"cellspacing="2"borderstyle="inset"backcolor="#e8e8e8"headerstyle-font-name="Verdana"headerstyle-font-size="12pt"ส่วนหัวสไตล์ -แนวนอน lalign="center"headerstyle-font-bold="true"itemstyle-backcolor="#778899"itemstyle-forecolor="#ffffff"footerstyle-font-size="9pt"footerstyle-font-italic="true">< แม่แบบส่วนหัว>ของฉัน แคตตาล็อกซีดี</HeaderTemplate><ItemTemplate>"<%#Container.DataItem("title")%>" จาก<%#Container.DataItem("artist")%> -$<%#Container.DataItem("price" )%></ItemTemplate><FooterTemplate>ลิขสิทธิ์ การอ้างอิง</FooterTemplate></asp:DataList></form></body></html>ใช้ <AlternatingItemTemplate>
คุณสามารถเพิ่มองค์ประกอบ <AlternatingItemTemplate> หลังองค์ประกอบ <ItemTemplate> เพื่ออธิบายลักษณะที่ปรากฏของแถวที่สลับกันในเอาต์พุต คุณสามารถเพิ่มสไตล์ให้กับข้อมูลในพื้นที่ <AlternatingItemTemplate> ภายในตัวควบคุม DataList:
ตัวอย่าง
<%@ นำเข้า Namespace="System.Data" %><script runat="server">ย่อย Page_Loadif ไม่ใช่ Page.IsPostBack แล้ว mycdcatalog=New DataSetmycdcatalog.ReadXml(MapPath("cdcatalog.xml"))cdcatalog.DataSource=mycdcatalogcdcatalog DataBind()end ย่อย ifend</script><html><body><form runat="เซิร์ฟเวอร์"><asp:DataList id="cdcatalog"runat="server"cellpadding="2"cellspacing="2"borderstyle="inset"backcolor="#e8e8e8"headerstyle-font-name="Verdana"headerstyle-font-size="12pt"ส่วนหัวสไตล์ -horizontalalign="center"headerstyle-font-bold="Tr ue"itemstyle-backcolor="#778899"itemstyle-forecolor="#ffffff"alternatingitemstyle-backcolor="#e8e8e8"alternatingitemstyle-forecolor="#000000"footerstyle-font-size="9pt"footerstyle-font-italic=" จริง"><HeaderTemplate>My แคตตาล็อกซีดี</HeaderTemplate><ItemTemplate>"<%#Container.DataItem("title")%>" จาก<%#Container.DataItem("artist")%> -$<%#Container.DataItem("price" )%></ItemTemplate><AlternatingItemTemplate>"<%#Container.DataItem("title")%>" ของ<%#Container.DataItem("artist")%> -$<%#Container.DataItem("price")%></AlternatingItemTemplate><FooterTemplate>© Hege Refsnes</FooterTemplate></asp:DataList>< /ฟอร์ม></ร่างกาย></html>