3. ใช้ส่วนประกอบ Repeater เพื่อแสดงชุดข้อมูล
บทนำที่เกี่ยวข้อง
มีหลายวิธีในการแสดงข้อมูลใน ASP.NET โดยที่ Repeater ก็เป็นอีกองค์ประกอบหนึ่งที่มีอยู่ DataGrid จะแสดงข้อมูลในรูปแบบ "ตาราง" เสมอ เมื่อเราต้องการแสดงข้อมูลอย่างอิสระมากขึ้น เราจะใช้ตัวควบคุม Repeater อย่างแน่นอน
กำหนดรูปแบบข้อมูลออกในรูปแบบเทมเพลต
ขั้นตอนที่ 1. สร้างเพจ เราสามารถสร้างส่วนประกอบ Repeater เพื่อแสดงข้อมูลโดยการเปลี่ยนหน้าเดิม เปลี่ยนชื่อ Location1.htm เป็น Location1.aspx ลบส่วนเดิมของเพจและสร้างชุดข้อมูลเหมือนในบทที่แล้ว โดยกรอง Region_IDEnterValue=1 ลองใช้การควบคุม Repeater เพื่อสร้างเพจแบบไดนามิก
jในการใช้เทมเพลตเพื่อกำหนดรูปแบบเอาต์พุต ขั้นแรกให้สร้างตาราง เราสามารถดูได้จากหน้า ApplicationàDatabases
โครงสร้างของฐานข้อมูล
[ภาพที่ 3-1 โครงสร้างฐานข้อมูล]
ขึ้นอยู่กับโครงสร้างของฐานข้อมูล ให้ออกแบบตารางต่อไปนี้
[รูปที่ 3-2 แผนภาพเทมเพลต]
kข้อมูลจะต้องผูกไว้กับตารางด้านล่าง ลากรายการข้อมูลจาก Bindings ในแผงแอปพลิเคชันไปยังตำแหน่ง
[รูปที่ 3-3 กล่องโต้ตอบการผูก]
หลังจากการผูกข้อมูล คุณจะได้รับหน้าต่อไปนี้:
[รูปที่ 3-4 หน้าหลังการเชื่อมโยงข้อมูล]
ให้ความรู้สึกเหมือนเดจาวูเล็กน้อย เนื่องจาก Dreamwaver MX ยังคงใช้ UltraDev ในการเน้นข้อมูลแบบดั้งเดิม 3 สามารถเลือกแบบฟอร์มการแสดงข้อมูลได้ในกล่องโต้ตอบ Binding หลังจากคลิกรายการข้อมูลบนเพจแล้ว สามารถเลือกแบบฟอร์มการแสดงข้อมูลสำหรับข้อมูลที่เกี่ยวข้องใน Binding ได้
[ภาพที่ 3-5 แบบฟอร์มแสดงข้อมูล]
หากคุณต้องการใช้ตารางนี้เป็นเทมเพลตเพื่อแสดงรายการข้อมูลทั้งหมด คุณต้องเลือกตารางทั้งหมดนี้ คลิก "+" ในรายการ Server Behaviors ในแผง Application และเลือกรายการ Repeat Region 
[ภาพที่ 3-6 เลือกพื้นที่ทำซ้ำ] [ภาพที่ 3-7 เลือกวิธีการทำซ้ำ]
กำหนดวิธีการที่คุณต้องการทำซ้ำใน Repeat Region แล้วคลิก OK ตอนนี้คุณสามารถกด "F12" เพื่อดูตัวอย่างหน้าได้
ขั้นตอนที่ 2 วิเคราะห์โค้ด (หมายเหตุ: เพื่อแสดงโค้ด โค้ดต่อไปนี้ทั้งหมดจะต้องมีช่องว่างหลัง "<" และก่อนหน้า ">" ขออภัยในความไม่สะดวก!)
< ASP:Repeater runat="เซิร์ฟเวอร์" DataSource='< %# DataSet1.DefaultView % >' >
<เทมเพลตรายการ>
< ความกว้างของตาราง = "75%" เส้นขอบ = "0" >
<tr>
< td width="18%">ชื่อสถานที่</ /td >
< td colspan="3" > < %# DataSet1.FieldValue("LOCATION_NAME", คอนเทนเนอร์) % > </ /td >
</ /tr >
<tr>
< td >เมือง</ /td >
< td width="35%" > < %# DataSet1.FieldValue("CITY", คอนเทนเนอร์) % > </ /td >
< td width="19%">ที่อยู่</ /td >
< td width="28%" > < %# DataSet1.FieldValue("ADDRESS", คอนเทนเนอร์) % > </ /td >
</ /tr >
<tr>
< td >สถานะ</ /td >
< td > < %# DataSet1.FieldValue("STATE_COUNTRY", คอนเทนเนอร์) % > </ /td >
< td >รหัส</ /td >
< td > < %# DataSet1.FieldValue("CODE", คอนเทนเนอร์) % > < /td >
</ /tr >
<tr>
< td >โทรศัพท์</ /td >
< td > < %# DataSet1.FieldValue("โทรศัพท์", คอนเทนเนอร์) % > </ /td >
< td >แฟกซ์< /td >
< td > < %# DataSet1.FieldValue("แฟกซ์", คอนเทนเนอร์) % > < /td >
</ /tr >
</ /ตาราง >
</ /เทมเพลตรายการ >
</ASP:รีพีทเตอร์ >
ASP.net แสดงข้อมูลทั้งหมดซ้ำๆ โดยการสร้างเทมเพลต ItemTemple ดังนั้นหากคุณต้องการตั้งค่าสไตล์ Repeater คุณสามารถทำได้โดยการตั้งค่าเทมเพลต
นอกจากนี้เรายังสามารถเพิ่มเทมเพลตอื่น ๆ เพื่อให้ได้เอฟเฟกต์ที่เราต้องการ
AlternatingItemTemplate: นำข้อมูลการแสดงผลข้ามไปใช้ ข้อมูลข้ามจอแสดงผลด้วยเทมเพลตของ ItemTemplate ดั้งเดิม
SepartorTemplate: เทมเพลตตัวคั่น สามารถใช้แยกแถวข้อมูลได้
เทมเพลตส่วนหัว: เทมเพลตส่วนหัว แสดงที่ด้านบนพร้อมข้อมูลทั้งหมด
เทมเพลตส่วนท้าย: เทมเพลตส่วนท้าย แสดงที่ด้านล่างพร้อมข้อมูลทั้งหมด
รูปแบบการออกแบบเหมือนกับ ItemTemplate เพียงล้อมรอบส่วนที่คุณต้องการสร้างเทมเพลตด้วยเครื่องหมาย
มีทางลัดสำหรับการแทรกโค้ดผ่าน Dreamwaver MX คลิกแท็บ ASP.NET ของแผงแทรก จากนั้นคลิก
เครื่องหมาย กล่องโต้ตอบการเพิ่มเครื่องหมายจะปรากฏขึ้น เลือกโครงการเทมเพลตในแท็ก ASP.NET จากนั้นคุณสามารถเลือกรหัสที่คุณต้องการเพิ่มได้ Dreamwaver MX จะเพิ่มโค้ดในตำแหน่งที่เคอร์เซอร์อินพุตเดิมของคุณอยู่
[รูปที่ 2-1 กล่องโต้ตอบเพิ่มเครื่องหมาย]
ต่อไปนี้เป็นรหัสสำหรับ AlternatingItemTemplate, SepartorTemplate, HeaderTemplate และ FooterTemplate ซึ่งสามารถแทรกลงใน < ASP:Repeater > < /ASP:Repeater >
< เทมเพลตส่วนหัว >< font color="#666666" size="4" >ทั้งหมด
ตำแหน่ง< /font >< /headertemplate >
<เทมเพลตการสลับรายการ>
< ความกว้างของตาราง="75%" border="0" bgcolor="#CCCCCC" >
<tr>
< td width="17%">ชื่อสถานที่</td >
< td colspan="3" bgcolor="#CCCCCC">
< %# DataSet1.FieldValue("LOCATION_NAME", คอนเทนเนอร์) % >
</ /td >
</ /tr >
<tr>
< td >เมือง</ /td >
< td width="34%" > < %# DataSet1.FieldValue("CITY", คอนเทนเนอร์) % > </ /td >
< td width="24%">ที่อยู่</ /td >
< td width="25%" > < %# DataSet1.FieldValue("ADDRESS", คอนเทนเนอร์) % > </ /td >
</ /tr >
<tr>
< td >สถานะ</ /td >
< td > < %# DataSet1.FieldValue("STATE_COUNTRY", คอนเทนเนอร์) % > </ /td >
< td >รหัส</ /td >
< td > < %# DataSet1.FieldValue("CODE", คอนเทนเนอร์) % > < /td >
</ /tr >
<tr>
< td >โทรศัพท์</ /td >
< td > < %# DataSet1.FieldValue("โทรศัพท์", คอนเทนเนอร์) % > </ /td >
< td >แฟกซ์< /td >
< td > < %# DataSet1.FieldValue("แฟกซ์", คอนเทนเนอร์) % > < /td >
</ /tr >
</ /ตาราง >
</ /AlternatingItemTemplate >
< separatortemplate >< hr width="70%" align="left" >
</ /แม่แบบตัวคั่น >
< ส่วนท้ายเทมเพลต >< font color="#666666" size="4" >สิ้นสุด</font >< /footertemplate >
เมื่อ IIS แยกวิเคราะห์โค้ด มันจะวางเทมเพลตในตำแหน่งที่สัมพันธ์กันตามคำสำคัญ และได้รับเพจที่ร้องขอในตอนแรก
หน้าที่สร้างโดยโปรแกรมข้างต้นมีดังนี้:
[ภาพที่ 2-1 หน้าสุดท้าย]
ส่วนประกอบ Repeater สามารถสร้างเพจที่ว่างมากขึ้นได้ แต่แต่ละแถวสามารถแสดงข้อมูลได้เพียงชุดเดียวเท่านั้น หากคุณต้องการสร้างเพจฟรีมากขึ้น ไปที่ส่วนถัดไปแล้วใช้ตัวควบคุม DataList เพื่อแสดงข้อมูล