DreamwaverMX และ ASP.NET(2)

2. ใช้ DataGrid คอมโพเนนต์ ASP.NET เพื่อแสดงข้อมูล

การแนะนำเนื้อหาที่เกี่ยวข้อง:

ASP.NET มาพร้อมกับองค์ประกอบเว็บมากมายเพื่อเร่งกระบวนการแก้ไขหน้าเว็บ ให้เราใช้ตัวอย่างบทช่วยสอนแบบสากลที่มาพร้อมกับ Dreamwaver MX เพื่อสาธิตวิธีใช้ส่วนประกอบนี้เพื่อแสดงข้อมูลในฐานข้อมูล

1. ลิงค์ฐานข้อมูลและแสดงข้อมูลด้วย DataGrid

มีฐานข้อมูล global.mdb ของอินสแตนซ์นี้อยู่ในเนื้อหาในไดเร็กทอรีหน้าเว็บ จุดประสงค์ของเราคือส่งออกข้อมูลของภูมิภาคต่างๆ ตามค่าของ Region_id ในตารางตำแหน่งในฐานข้อมูลนี้ (คุณสามารถใช้ Access เพื่อเปิดฐานข้อมูลนี้ได้)

เราสามารถเปลี่ยนชื่อไฟล์ location3.htm เป็น location3.aspx (ส่วนต่อท้ายของไฟล์หน้าต่างเว็บของ ASP.NET คือ aspx) แล้วแก้ไข



[รูปที่ 2-1 หน้าที่จำเป็นต้องเปลี่ยน]

มาลบส่วนสแตติกธรรมดาที่อยู่ตรงกลางแล้วใช้ DataGrid ของ ASP.NET เพื่อใช้งานฟังก์ชั่นของมัน



[ภาพที่ 2-2 ลบส่วนที่คงที่ของหน้า]
ขั้นตอนต่อไปคือการเชื่อมโยงกับฐานข้อมูล คลิกแผงแอปพลิเคชันทางด้านขวา เลือกฐานข้อมูล แล้วคลิกเครื่องหมาย +

เลือกการเชื่อมต่อ OLE DB



[รูปภาพ 2-3 แผงแอปพลิเคชัน]

จากนั้นเข้าสู่กล่องโต้ตอบการเชื่อมต่อ OLE DB ที่นี่คุณสามารถเขียนโค้ดฐานข้อมูลลิงก์ด้วยลายมือ หรือสร้างโค้ดโดยอัตโนมัติก็ได้ ตั้งชื่อตำแหน่งชื่อการเชื่อมต่อ คลิกสร้าง และโค้ดจะถูกสร้างขึ้นโดยอัตโนมัติผ่านวิซาร์ด



[รูปที่ 2-4 กล่องโต้ตอบการเชื่อมต่อ OLE DB]

หลังจากเข้าสู่หน้า Data Link Properties ให้เลือก Provider เพื่อตั้งค่ากลไกฐานข้อมูล

สิ่งที่น่าทึ่งด้านล่างนี้คือรองรับวิธีการเชื่อมต่อฐานข้อมูล 21 วิธี รวมถึงเซิร์ฟเวอร์ SQL, Oracle และอื่น ๆ



[รูปที่ 2-5 หน้าที่จัดเตรียมฐานข้อมูล]

นี่เป็นหนึ่งในสิ่งที่ยอดเยี่ยมเกี่ยวกับ .NET ซึ่งรองรับหลายฐานข้อมูล มันใช้ ADO.NET หลังจากนั้นไม่นาน สตริงการเชื่อมต่อที่เราสร้างโดยใช้ตัวช่วยสร้างนี้จะถูกเขียนตาม ADO.NET

เนื่องจากฐานข้อมูลที่เราจะลิงก์ไปนั้นเป็นฐานข้อมูล Access2000 เราจึงเลือก Microsoft Jet 4.0 OLE DB Provider แล้วคลิกถัดไป

คลิกปุ่มถัดจาก 1.เลือกหรือป้อนชื่อฐานข้อมูลเพื่อเลือกฐานข้อมูลที่คุณต้องการลิงก์ไป

ยกเลิกชื่อผู้ใช้และรหัสผ่านใน 2.ป้อนข้อมูลเพื่อเข้าสู่ระบบฐานข้อมูล



[รูปภาพ 2-6 ลิงค์การตั้งค่า]

ตั้งค่าสิทธิ์การอ่านในขั้นสูง เลือก อ่าน อ่านเขียน เขียน และคลิก ตกลง



[รูปที่ 2-7 การตั้งค่าการอนุญาต]

เพิ่มชื่อการเชื่อมต่อแล้วคลิกทดสอบเพื่อทดสอบลิงก์ฐานข้อมูลหากลิงก์ฐานข้อมูลสำเร็จให้คลิกตกลง ยินดีด้วย,

คุณได้เชื่อมโยงฐานข้อมูลกับเว็บไซต์ของคุณ ขั้นตอนต่อไปควรแสดงโดยใช้ DataGrid

นอกจากนี้ในแผงแอปพลิเคชัน ให้เลือกพฤติกรรมของเซิร์ฟเวอร์

ตั้งค่าให้เสร็จสิ้นก่อน คลิกปรับใช้ จากนั้นโปรแกรมจะปรับใช้ไซต์โดยอัตโนมัติและคัดลอกโฟลเดอร์ DreamweaverCtrls.dll, web.config และ _mmServerScripts ไปยังไดเร็กทอรีของไซต์ ซึ่งเป็นไฟล์ที่จำเป็นสำหรับการใช้ Dreamweaver MX เพื่อสร้างเว็บเพจ ASP.net



[รูปที่ 2-8 สถานที่ติดตั้ง]
ในเวลาเดียวกัน คุณต้องสร้างโฟลเดอร์ bin ในไดเร็กทอรีรากของเว็บไซต์ก่อน และคัดลอกไฟล์ DreamweaverCtrls.dll ไปยังโฟลเดอร์นี้

คลิกเครื่องหมาย + เพื่อสร้างชุดข้อมูลใหม่ก่อน



[รูปที่ 2-9 เพิ่มชุดข้อมูล]

การเชื่อมต่อคือการเลือกแหล่งข้อมูล ตารางคือการเลือกตาราง คอลัมน์คือการเลือกรายการ และใช้ตัวกรองเพื่อกรองข้อมูล เนื่องจากหน้านี้แสดงข้อมูลจากยุโรป Entered Value=3 จึงถูกตั้งค่า เมื่อเกิดข้อผิดพลาด Go To ใช้เพื่อจัดการเพจที่ข้ามไปยังเมื่อมีข้อผิดพลาดในการอ่านข้อมูล



[ภาพที่ 2-10 การสร้างชุดข้อมูล]

หลังจากสร้างชุดข้อมูลสำเร็จแล้ว คุณสามารถสร้าง DataGrid ได้ คลิกเครื่องหมาย + และเลือก DataGrid



[รูปที่ 2-11 เพิ่ม DataGrid]

เลือกชุดเรกคอร์ดที่ต้องการในชุดข้อมูล ตั้งค่าว่าจะใช้การแสดงเพจและจำนวนเรคคอร์ดต่อหน้าที่แสดงในเพจ ตั้งค่าวิธีแถบนำทางในการนำทาง และเพิ่มหรือลบรายการที่แสดงในคอลัมน์



[รูปที่ 2-12 การตั้งค่า DataGrid]

คลิกแก้ไขเพื่อตั้งชื่อส่วนหัว หลังจากป้อนชื่อแล้วคลิกตกลงเพื่อยืนยัน



[ภาพที่ 2-13 การตั้งชื่อ]

คลิกตกลงเพื่อเพิ่ม DataGrid



[รูปที่ 2-14 หน้าตัวอย่าง]

ในหน้าแสดงตัวอย่าง คุณจะเห็นพื้นที่ที่มีการเพิ่ม DataGrid แล้ว กด F12 เพื่อดูตัวอย่างหน้า

ด้านล่างเป็นหน้าหลังการรัน



[รูปที่ 2-15 หน้าหลังรัน]
2.เปลี่ยนคุณสมบัติของ DataGrid

การแนะนำเนื้อหาที่เกี่ยวข้อง:

เห็นส่วนประกอบนี้แล้วคิดว่าสีดูไม่สวยเกินไปหรือเปล่า? ส่วนประกอบ DataGrid มีคุณสมบัติมากมายซึ่งคุณสามารถเปลี่ยนรูปแบบของ DataGrid ได้

วิเคราะห์โค้ด