none
Knowledge Base Article (KB): วิธีการสร้างโปรแกรม Image Gallery โดยใช้ DataList control ใน ASP.NET (ภาค1)

    การสนทนาทั่วไป

  • บทความนี้จะอธิบายเกี่ยวกับตัวอย่าง All-In-One Framework ซึ่งคุณสามารถดาวน์โหลดได้ โดยตัวอย่างโค้ดจะสาธิตวิธีการสร้างโปรแกรม Image Gallery โดยใช้ DataList control ใน ASP.NET และคุณสามารถดาวน์โหลดตัวอย่างแพคเกจนี้ได้ที่ไอคอนด้านล่าง

    ระดับความยากง่ายCollapse this imageExpand this image


    ดาวน์โหลดข้อมูล
    สามารถดาวน์โหลดตัวอย่างโค้ด ได้ที่ลิงค์นี้

     

     

    ภาพรวมทางเทคนิค
    คุณจะพบว่า Image Gallery มีการใช้กันอย่างแพร่หลายในหลายๆ social network, เวปไซต์ส่วนตัว และเวปไซต์ E-Business เช่น คุณอาจจะใช้ Image Gallery เพื่อแสดง library ของรูปภาพที่อัพโหลดในเวปไซต์ส่วนตัว และสไลด์โชว์ยังเป็นเครื่องมือที่นิยมสำหรับการแสดงรูปภาพบนเวปไซค์ โดยโค้ดตัวอย่างนี้จะสาธิตวิธีการใช้ DataList และ ImageButton controls ใน ASP.NET เพื่อสร้าง Image Gallery แบบที่มี image navigation คุณสามารถคลิ๊กที่รูปขนาดย่อใน Datalist control เพื่อให้สามารถแสดงรูปภาพที่ใหญ่ขึ้นบนหน้าเวป และตัวอย่างโค้ดนี้ จะอ่าน image paths จากไดเรกทอรี่หนึ่งในอาร์เรย์ แล้วอาร์เรย์ FileInfo จะถูกใช้ เพื่อใส่ค่า DataTable แบบกำหนดได้เอง โดยขอบเขตจะอ้างอิงใน Datalist control และโค้ดตัวอย่างนี้จะนำมาใช้กับระบบหน้าเวปแบบกำหนดค่าเอง ซึ่งจะสามารถแสดงรูปภาพได้ 5 ภาพในแบบแนวนอนภายในหนึ่งหน้าเวป ซึ่งปุ่มลิงค์ต่อไปนี้จะถูกนำมาใช้ในระบบหน้าเวปแบบกำหนดเอง ดังนี้

    ·         หน้าแรก (First)

    ·         หน้าก่อนหน้านี้ (Previous)

    ·         หน้าถัดไป (Next)

    ·         หน้าสุดท้าย/หน้าล่าสุด (Last)

    หมายเหตุ เราขอแนะนำให้คุณใช้ this method  เพื่อโหลดภาพได้ไม่เกิน 5 ภาพ/ครั้ง

    คุณยังสามารถตั้งค่าคุณสมบัติ SelectedIndex สำหรับ DataList control เพื่อสามารถจำกัดจำนวนรูปภาพเวลาเลือก และเพื่อระบุว่ารูปภาพอันไหนที่คุณได้เลือกไปแล้ว และคุณยังสามารถตั้งค่าคุณสมบัติ SelectedStyle สำหรับ DataList control ได้อีกด้วย


    Supa Sethasiripong [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.


    21 เมษายน 2554 11:21
    ผู้ดูแล