ASP.NET - โค้ดควบคุม DataList
- หน้าก่อนหน้า Repeater WebForms
- หน้าต่อไป การเชื่อมต่อฐานข้อมูล WebForms
โค้ดควบคุม DataList ที่คล้ายกับ Repeater ที่ใช้ในการแสดงรายการที่ถูกจำกัดโดยควบคุมตัวนี้ อย่างไรก็ตาม โค้ดควบคุม DataList จะเพิ่มตารางโดยเริ่มต้นในรายการข้อมูลของมัน
ตัวอย่าง
การเชื่อมโยง DataSet กับ 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>USA</country> <company>Columbia</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>Greatest Hits</title> <artist>Dolly Parton</artist> <country>USA</country> <company>RCA</company> <price>9.90</price> <year>1982</year> </cd> <cd> <title>Still got the blues</title> <artist>Gary Moore</artist> <country>UK</country> <company>Virgin records</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 Object โดยมีคำสั่งดังนี้ในด้านบนของหน้าจอ .aspx:
<%@ Import Namespace="System.Data" %>
ต่อมา สร้าง DataSet สำหรับไฟล์ XML นี้และนำไฟล์ XML นี้เข้ามาเก็บใน DataSet ขณะที่หน้าจอเริ่มทำงาน:
<script runat="server">
sub Page_Load
if Not Page.IsPostBack then
dim mycdcatalog=New DataSet
mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
end if
end sub
หลังจากนั้นเราก็ทำการสร้าง DataList Control ในหน้า .aspx ของเรา。<HeaderTemplate> ฟิล์ลดังนี้ปรากฏขึ้นมาเฉพาะครั้งเดียวในการแสดงทางหน้าจอ ในขณะที่เนื้อหาของ <ItemTemplate> จะปรากฏขึ้นตามการจำลองของ "record" ใน DataSet และในที่สุด <FooterTemplate> จะปรากฏขึ้นมาเฉพาะครั้งเดียวในการแสดงทางหน้าจอ:
<html> <body> <form runat="server"> <asp:DataList id="cdcatalog" runat="server"> <HeaderTemplate> ... </HeaderTemplate> <ItemTemplate> ... </ItemTemplate> <FooterTemplate> ... </FooterTemplate> </asp:DataList> </form> </body> </html>
หลังจากนั้นเราเพิ่มสคริปต์ที่สามารถสร้าง DataSet และบอกให้ mycdcatalog DataSet ที่เรามีมาที่จะทำงานกับควบคุม DataList นี้ เราใช้องค์ประกอบเหล่านี้เพื่อตกแต่งควบคุม DataList นี้: <HeaderTemplate> ที่มีหัวข้อตาราง, <ItemTemplate> ที่มีข้อมูลที่ต้องการแสดง, และ <FooterTemplate> ที่มีข้อความ โปรดจำได้ว่าตัวแปร gridlines ของ DataList จะถูกค่า "both" ที่จะแสดงขอบตาราง
<%@ Import Namespace="System.Data" %>
<script runat="server">
sub Page_Load
if Not Page.IsPostBack then
dim mycdcatalog=New DataSet
mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
cdcatalog.DataSource=mycdcatalog
cdcatalog.DataBind()
end if
end sub
</script>
<html>
<body>
<form runat="server">
<asp:DataList id="cdcatalog">
gridlines="both" runat="server">
<HeaderTemplate>
My CD Catalog
</HeaderTemplate>
<ItemTemplate>
"<%#Container.DataItem("title")%>" ของ
<%#Container.DataItem("artist")%> -
$<%#Container.DataItem("price")%>
</ItemTemplate>
<FooterTemplate>
Copyright codew3c.com
</FooterTemplate>
</asp:DataList>
</form>
</body>
</html>
ใช้สไตล์
คุณยังสามารถเพิ่มสไตล์ไปยังควบคุม DataList เพื่อทำให้มันดูน่าดึงดูดตามไปได้
<%@ Import Namespace="System.Data" %>
<script runat="server">
sub Page_Load
if Not Page.IsPostBack then
dim mycdcatalog=New DataSet
mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
cdcatalog.DataSource=mycdcatalog
cdcatalog.DataBind()
end if
end sub
</script>
<html>
<body>
<form runat="server">
<asp:DataList id="cdcatalog">
runat="server"
cellpadding="2"
cellspacing="2"
borderstyle="inset"
backcolor="#e8e8e8"
width="100%"
headerstyle-font-name="Verdana"
headerstyle-font-size="12pt"
headerstyle-horizontalalign="center"
headerstyle-font-bold="true"
itemstyle-backcolor="#778899"
itemstyle-forecolor="#ffffff"
footerstyle-font-size="9pt"
footerstyle-font-italic="true">
<HeaderTemplate>
My CD Catalog
</HeaderTemplate>
<ItemTemplate>
"<%#Container.DataItem("title")%>" ของ
<%#Container.DataItem("artist")%> -
$<%#Container.DataItem("price")%>
</ItemTemplate>
<FooterTemplate>
Copyright codew3c.com
</FooterTemplate>
</asp:DataList>
</form>
</body>
</html>
ใช้ <AlternatingItemTemplate>
คุณสามารถเพิ่มสมาชิก <AlternatingItemTemplate> หลังจาก <ItemTemplate> ได้ เพื่ออธิบายรูปแบบของแถวที่เปลี่ยนแปลง คุณสามารถทำการแบบภาพสไตล์สำหรับส่วน <AlternatingItemTemplate> ในควบคุม DataList ด้วย
<%@ Import Namespace="System.Data" %>
<script runat="server">
sub Page_Load
if Not Page.IsPostBack then
dim mycdcatalog=New DataSet
mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
cdcatalog.DataSource=mycdcatalog
cdcatalog.DataBind()
end if
end sub
</script>
<html>
<body>
<form runat="server">
<asp:DataList id="cdcatalog">
runat="server"
cellpadding="2"
cellspacing="2"
borderstyle="inset"
backcolor="#e8e8e8"
width="100%"
headerstyle-font-name="Verdana"
headerstyle-font-size="12pt"
headerstyle-horizontalalign="center"
headerstyle-font-bold="True"
itemstyle-backcolor="#778899"
itemstyle-forecolor="#ffffff"
alternatingitemstyle-backcolor="#e8e8e8"
alternatingitemstyle-forecolor="#000000"
footerstyle-font-size="9pt"
footerstyle-font-italic="True">
<HeaderTemplate>
My CD Catalog
</HeaderTemplate>
<ItemTemplate>
"<%#Container.DataItem("title")%>" ของ
<%#Container.DataItem("artist")%> -
$<%#Container.DataItem("price")%>
</ItemTemplate>
<AlternatingItemTemplate>
"<%#Container.DataItem("title")%>" ของ
<%#Container.DataItem("artist")%> -
$<%#Container.DataItem("price")%>
</AlternatingItemTemplate>
<FooterTemplate>
© codew3c.com
</FooterTemplate>
</asp:DataList>
</form>
</body>
</html>
- หน้าก่อนหน้า Repeater WebForms
- หน้าต่อไป การเชื่อมต่อฐานข้อมูล WebForms
