DreamwaverMX และ ASP.NET(4)
ผู้เขียน：Eve Cole
เวลาอัปเดต：2009-05-31 21:06:17
4. ใช้ส่วนประกอบ DataList เพื่อแสดงชุดข้อมูล
บทนำที่เกี่ยวข้อง:
DataList เป็นตัวควบคุม Repeater ที่ปรับปรุงแล้ว นอกเหนือจากฟังก์ชันดั้งเดิมของ Repeater แล้ว ยังสามารถตั้งค่าจำนวนข้อมูลที่แสดงในบรรทัดเดียว (RepeatColumn) เทมเพลตที่เลือก (SelectedItemTemple) และเทมเพลตรายการที่แก้ไข (EditTemplate) อย่างไรก็ตาม DataList จะจัดเรียงข้อมูลเอาต์พุตในตารางและส่งออกข้อมูลดังกล่าว ในขณะที่ Repeater จะภักดีต่อคำจำกัดความของเทมเพลตมากกว่า และจะไม่เพิ่มแท็ก HTML ใด ๆ (หมายเหตุ: เพื่อแสดงรหัส รหัสต่อไปนี้ทั้งหมดจะต้องมีช่องว่างหลัง "<" และก่อนหน้า ">" ขออภัยในความไม่สะดวก!)
ขั้นตอนที่ 1 สร้างเพจ
หน้าที่เราต้องการสร้างมีดังนี้ เมื่อเราคลิกไฮเปอร์ลิงก์ของรายละเอียด ข้อมูลรายละเอียดจะปรากฏขึ้น ดังที่แสดงในรายการแรก เมื่อคุณคลิกปิด รายละเอียดจะถูกปิดและคืนสู่ลักษณะเดิม
[รูปที่ 1-1 สาธิตหน้า]
เริ่มต้นด้วยการเลือกข้อมูลที่คุณต้องการแสดง เพื่อแสดงข้อมูลของยุโรป (เช่น Region_ID=3) เราสามารถเลือกกรองข้อมูลของ Region_ID=3 ในการตั้งค่า Dataset ได้
[ภาพที่ 1-2 การคัดกรองข้อมูล]
ใช้ตัวควบคุม Datalist เพื่อสร้างเพจที่แสดงข้อมูลโดยย่อ เรามาสร้างเพจที่ไม่มีข้อมูลกันก่อน จากนั้นเลือกลักษณะการทำงานของเซิร์ฟเวอร์ในแผงแอปพลิเคชัน คลิก "+" และเลือก DataList
[ภาพที่ 1-3 หน้าการเลือก DataList]
ในกล่องโต้ตอบที่ปรากฏขึ้น เราสามารถเพิ่มเทมเพลตเพจได้ตามต้องการ
u Header: เทมเพลตส่วนหัว
รายการ: เทมเพลตรายการข้อมูล
u รายการที่สลับกัน: เทมเพลตการแสดงผลแบบข้าม
แก้ไขรายการ: แก้ไขเทมเพลต ((ไม่แสดงตามค่าเริ่มต้น จะต้องแสดงผ่านการตอบกลับเหตุการณ์)
รายการที่เลือก: เทมเพลตที่แสดงหลังจากการเลือก (ต้องแสดงผ่านการตอบกลับเหตุการณ์ด้วย)
ตัวคั่น: เทมเพลตแยกต่างหาก
u Footer: เทมเพลตด้านล่างของตาราง
[รูปที่ 1-4 กล่องโต้ตอบแก้ไข DataList]
เราสามารถสร้างเทมเพลตที่ต้องการได้โดยเพิ่มโค้ด HTML ลงในเนื้อหา และเราก็สามารถคลิกได้เช่นกัน
ปุ่มเพื่อเพิ่มรายการข้อมูล หลังจากคลิกปุ่ม กล่องโต้ตอบรายการข้อมูลจะปรากฏขึ้นเพื่อให้คุณสามารถเลือกข้อมูลที่ต้องการได้ และเพิ่มลงในช่องป้อนข้อมูลเนื้อหา
< %# DataBinder.Eval(Container.DataItem, "รายการข้อมูล") % >
รหัสนี้ใช้เพื่อแสดงข้อมูล
[ภาพที่ 1-5 การเพิ่มรายการข้อมูล]
เพื่อให้บรรลุผลการแสดงตัวอย่าง ก่อนอื่นให้เพิ่มโค้ด: ชื่อสถานที่ ในส่วนหัว ใช้เพื่อแสดงชื่อเรื่อง เพิ่มรหัสให้กับรายการ:
< %# DataSet1.FieldValue("LOCATION_NAME", Container) % > ใช้ Location_name เป็นชื่อของแต่ละรายการ
เพิ่มรหัสให้กับรายการสลับ
<fontcolor="#0000FF" >< %#DataSet1.FieldValue("LOCATION_NAME",คอนเทนเนอร์)% >< /font >
แสดงข้อมูลด้วยสีแบบอักษรต่างๆ
แม้ว่ารายการที่เลือกจะไม่สามารถแสดงรายการที่เลือกได้ทันที แต่เราควรจดรหัสไว้สำหรับการโทรในภายหลัง ดังต่อไปนี้:
ที่อยู่:
< %# DataSet1.FieldValue("ADDRESS", คอนเทนเนอร์) % >
<บีอาร์>
เมือง:
< %# DataSet1.FieldValue("เมือง", คอนเทนเนอร์) % >
<บีอาร์>
โทรศัพท์:
< %# DataSet1.FieldValue("โทรศัพท์", คอนเทนเนอร์) % >
<บีอาร์>
คลิกตกลงแล้วแสดงตัวอย่างเพจ รูปภาพด้านล่างเป็นผลจากโค้ดด้านบน เราจะใช้เอฟเฟกต์การแสดงรายการที่เลือกในอีกสักครู่
[ภาพที่ 1-6 ภาพตัวอย่างเบื้องต้น]
ความแตกต่างประการหนึ่งระหว่าง DataList และ Repeater ก็คือ คุณสามารถตั้งค่าแถวเดียวเพื่อแสดงข้อมูลหลายรายการ ซึ่งสามารถตั้งค่าได้ในหน้าต่างแก้ไข DataList
[ภาพที่ 1-7 ตั้งค่าบรรทัดเดียวเพื่อแสดงข้อมูลหลายรายการ]
การเลือกตัวเลือก Use Line Breaks จะมีแท็ก <BR> เพื่อแยกข้อมูล เลือกใช้ตารางเพื่อส่งออกในรูปแบบตาราง และคุณสามารถกำหนดจำนวนข้อมูลที่แสดงในแถวเดียวได้โดยการตั้งค่าคอลัมน์ตาราง
ขั้นตอนที่ 2 เขียนโค้ด
รายการที่เลือกจะต้องแสดงผ่านเหตุการณ์ต่างๆ ดังนั้นเราจึงจำเป็นต้องสร้างปุ่มเพื่อเริ่มกิจกรรม
j เพิ่ม LinkButton เพื่อสร้างเหตุการณ์ ย้ายเคอร์เซอร์ระหว่าง <ItemTemplate> และ </ItemTemplate> ในหน้าต่างซอร์สโค้ด คลิกแท็กเพิ่มเติม
ให้เลือกตัวควบคุม asp:LinkButton ในกล่องโต้ตอบป๊อปอัป
[รูปที่ 2-1 กล่องโต้ตอบตัวเลือกแท็ก]
ในกล่องโต้ตอบแก้ไข LinkButton ให้ตั้งค่าคุณสมบัติของ LinkButton ป้อนชื่อ:รายละเอียดในช่องป้อนข้อมูล ID
ป้อน "รายละเอียด" ในชื่อคำสั่งสำหรับคำสั่งที่สร้างเหตุการณ์ และป้อนรายละเอียดในกล่องโต้ตอบข้อความ (จะปรากฏขึ้น)
[รูปที่ 2-2 กล่องแก้ไข LinkButton]
จากนั้นเลือกสีที่ต้องการใน Layout แล้วคลิก OK เพื่อสร้างโค้ด
< asp:LinkButton BackColor="#FFFFFF" CommandName = "รายละเอียด" ForeColor = "#000000" ID = "รายละเอียด" runat = "เซิร์ฟเวอร์" Text = "รายละเอียด" >< /asp:LinkButton >
เพื่อให้เกิดผลกระทบนี้ในการแสดงผลแบบข้าม เราจำเป็นต้องแทรกโค้ดเดียวกันใน <AlternatingItemTemplate> และ </AlternatingItemTemplate>
ในเวลาเดียวกัน เพื่อปิดเทมเพลตการเลือกป๊อปอัป จำเป็นต้องสร้างคำสั่งด้วย ดังนั้นจึงต้องเพิ่มปุ่ม Link อีกหนึ่งปุ่ม สิ่งนี้จำเป็นต้องแทรกโค้ดใน <SelectedItemTemplate></SelectedItemTemplate>:
< asp:LinkButton BackColor="#FFFFFF" CommandName="ปิด" ForeColor="#000000" ID="ปิด" runat="server" Text="ปิด" >< /asp:LinkButton >
ด้วยคำสั่ง k เราจำเป็นต้องใช้โปรแกรมในการตีความคำสั่งด้วย ในความเป็นจริง กระบวนการนี้ไม่ซับซ้อน และจำเป็นต้องเพิ่มโค้ดเพียงเล็กน้อยเท่านั้น เพิ่มโค้ดต่อไปนี้ใน < head ></ /head >:
< ภาษาสคริปต์ = "VB" runat = "เซิร์ฟเวอร์" >
Sub DataList_ItemCommand (ผู้ส่งเป็น Object, e เป็น DataListCommandEventArgs)
ถ้า e.CommandSource.CommandName="Detail" แล้ว
DataList1.SelectedIndex=e.Item.ItemIndex
ElseIf e.CommandSource.CommandName = "ปิด" จากนั้น
DataList1.SelectedIndex=-1
สิ้นสุดถ้า
DataList1.DataBind()
จบย่อย
</ /สคริปต์ >
โปรแกรมสามารถรับคำสั่ง (CommandName) เมื่อคุณคลิกปุ่ม LinkButton เพื่อกำหนดโปรแกรมที่จะดำเนินการ เมื่อคุณสมบัติ SelectedIndex ของ DataList ถูกตั้งค่าเป็น e.Item.ItemIndex หน้า SelectedItemTemplate จะถูกเปิดขึ้น ถ้าคำสั่งคือปิดและคุณสมบัติ SelectedIndex ของ DataList ถูกตั้งค่าเป็น -1 (นั่นคือ ไม่มีการเลือกรายการข้อมูล) DataList จะใช้เทมเพลตรายการ ItemTemplate เพื่อแสดงรายการข้อมูลนี้
เพิ่มข้อมูลโค้ดใน < asp:DataList > ด้วย
OnItemCommand = "DataList_ItemCommand"
เพื่อประกาศความสัมพันธ์กับส่วนของโปรแกรม DataList_ItemCommand
กด "F12" เพื่อดูตัวอย่าง จากนั้นหน้าจะแสดงเอฟเฟกต์ที่คาดหวัง
[ภาพที่ 2-3 เวอร์ชั่นตัวอย่างสุดท้าย]
สิ่งที่แนบมาคือซอร์สโค้ดของส่วนโปรแกรมหลัก:
Sub DataList_ItemCommand (ผู้ส่งเป็น Object, e เป็น DataListCommandEventArgs)
ถ้า e.CommandSource.CommandName="Detail" แล้ว
DataList1.SelectedIndex=e.Item.ItemIndex
ElseIf e.CommandSource.CommandName = "ปิด" จากนั้น
DataList1.SelectedIndex=-1
สิ้นสุดถ้า
DataList1.DataBind()
จบย่อย
< ฟอร์ม runat="เซิร์ฟเวอร์">
< asp:DataList id="DataList1"
runat = "เซิร์ฟเวอร์"
ทำซ้ำคอลัมน์ = "1"
ทำซ้ำทิศทาง = "แนวตั้ง"
ทำซ้ำLayout = "ไหล"
แหล่งข้อมูล = "< % # DataSet1.DefaultView % >"
OnItemCommand="DataList_ItemCommand">
<เทมเพลตส่วนหัว>
ชื่อสถานที่ < /HeaderTemplate >
<เทมเพลตรายการ>
< %# DataSet1.FieldValue("LOCATION_NAME", คอนเทนเนอร์) % >
< asp:linkbutton BackColor="#FFFFFF" CommandName = "รายละเอียด" ForeColor = "#000000" ID = "รายละเอียด" runat = "เซิร์ฟเวอร์" Text = "รายละเอียด" >< /asp:linkbutton >
</ /เทมเพลตรายการ >
< AlternatingItemTemplate >< สีแบบอักษร="#0000FF" >
< %# DataSet1.FieldValue("LOCATION_NAME", คอนเทนเนอร์) % >
</ /แบบอักษร >
< asp:linkbutton BackColor="#FFFFFF" CommandName="Detail" ForeColor="#000000" ID="Detail" runat="server" Text="Detail" >< /asp:linkbutton >< /AlternatingItemTemplate >
<SelectedItemTemplate>ที่อยู่:
< %# DataSet1.FieldValue("ADDRESS", คอนเทนเนอร์) % >
<บีอาร์>
เมือง:
< %# DataSet1.FieldValue("เมือง", คอนเทนเนอร์) % >
<บีอาร์>
โทรศัพท์:
< %# DataSet1.FieldValue("โทรศัพท์", คอนเทนเนอร์) % >
<บีอาร์>
< asp:LinkButton BackColor="#FFFFFF" CommandName="ปิด" ForeColor="#000000" ID="ปิด" runat="server" Text="ปิด" >< /asp:LinkButton >
</ /SelectedItemTemplate >
</asp:รายการข้อมูล >
</ /แบบฟอร์ม>
DataList ยังมีเทมเพลตสำหรับแก้ไขรายการ ซึ่งส่วนใหญ่จะใช้สำหรับการอัปเดตข้อมูล หนังสือเล่มนี้จะแนะนำในหัวข้อต่อๆ ไป
