- - - - - - - - - - - - - - ผู้ให้การสนับสนุน- - - - - - - - - - - - - -

บทที่ 4 DataList และ Templates

ขั้นตอนในการสร้าง

• ทำการเปิดไฟล์ myFirstDataPage.phpx จากบทที่ผ่านมา
• เลือกที่แท็บ Design
• ทำการลบ DataGrid ออกไป
• ที่หน้าต่าง Toolbar ทำการลากวาง DataList จากแท็บ Web Controls มาไว้ที่ตำแหน่งเก่าของ DataGrid

• คลิกขวาที่ DataList แล้วเลือก Edit Templates
• จะปรากฏหน้าต่าง Edit DataList1 Templates

• ทำการเลือก Select a Template to edit: ทางด้านซ้ายเป็น Item Templates, ทางด้านขาวเป็น ItemTemplate
• ที่ช่อง Template Design: ให้พิมพ์ข้อความ ProductName
• ทำการลาก Label Control จาก แท็บ Web Controls ของหน้าต่าง Toolbar ดังรูป

• คลิกเลือก Label ที่ได้นำมาวางไว้

• ทำการคลิกเลือก (DataBinding) จากหน้าต่าง Property , แล้วคลิกปุ่ม ...

• จะปรากฏหน้าต่าง DataBindings ของ Label1 ที่แสดงรายชื่อของ Property ที่สามารถทำการ เรียกใช้ร่วมกับ แหล่งข้อมูล (Data Source)
• ที่ตำแหน่ง Bindable Properties: ให้เลือก Text
• คลิกเลือก Custom binding expression:
• พิมพ์ DataBinder.Eval(Container.DataItem,"ProductName") ลงในช่องกรอกข้อความ

• คลิกปุ่ม OK
• ทำการคลิกที่แท็บ Code เพื่อเข้าไปยังหน้าต่าง Code View
• ทำการแก้ไขโค้ดเดิม เป็น

Sub Button1_Click(sender As Object, e As EventArgs)
    DataList1.Datasource = GetOrderDetails(Cint(TextBox1.Text))
    DataList1.DataBind()
End Sub

• ทำการคลิกที่แท็บ HTML เพื่อเข้าไปยังหน้าต่าง HTML View
• เพิ่ม คุณสมบัติ (attributes) ของ DataList เป็น

<asp:DataList id="DataList1" runat="server"
            BorderColor="Black" BorderSyle="Solid" BorderWidth="2">

• ทำการ Save ไฟล์
• ทดสอบ โปรแกรมโดยกดปุ่ม F5