ข้ามไปที่เนื้อหาหลัก
การสนับสนุน
ลงชื่อเข้าใช้

บทนำ

บทความนี้อธิบายตัวอย่างออลอินกรอบที่พร้อมใช้งานสำหรับการดาวน์โหลด โค้ดตัวอย่างนี้สาธิตวิธีการสร้างแอพลิเคชันแกลเลอรีรูป โดยใช้ตัวควบคุม DataList ใน ASP.NET คุณสามารถเรียกดูแพคเกจตัวอย่างจากไอคอนดาวน์โหลดต่อไปนี้

ระดับความยาก




alternate text

ข้อมูลการดาวน์โหลด

เมื่อต้องการดาวน์โหลดโค้ดตัวอย่างนี้ คลิกการเชื่อมโยงต่อไปนี้:


ภาพรวมทางเทคนิค

คุณอาจพบอย่างกว้างขวางใช้แกลเลอรีรูปในไซต์เครือข่ายทางสังคม เว็บไซต์ส่วนบุคคล และเว็บไซต์อีบิสซิมาก ตัวอย่างเช่น คุณอาจใช้แกลเลอรีรูปจะแสดงไลบรารีของรูปภาพที่อัปโหลดส่วนบุคคลบนเว็บไซต์ส่วนบุคคล นำเสนอภาพนิ่งคือ เครื่องมือได้รับความนิยมในการแสดงรูปภาพบนเว็บไซต์ด้วย โค้ดตัวอย่างนี้สาธิตวิธีการใช้DataListและImageButtonควบคุม ASP.NET เพื่อสร้างแกลเลอรีรูปที่ มีการนำรูปภาพ คุณสามารถคลิบนรูปขนาดย่อในตัวควบคุมDatalistเพื่อแสดงรูปของรูปบนหน้า โค้ดตัวอย่างนี้อ่านเส้นทางรูปจากไดเรกทอรีบางอย่างลงในอาร์เรย์แบบFileInfo จากนั้น อาร์เรย์FileInfoถูกใช้เพื่อเติมข้อมูลตารางข้อมูลวัตถุแบบกำหนดเองที่ถูกผูกไว้กับตัวควบคุมDatalist โค้ดตัวอย่างนี้ประมวลผลระบบแบ่งหน้าแบบกำหนดเองที่อนุญาตให้ห้ารูปที่จะแสดงในแนวนอนบนหน้าเดียว กัน ปุ่มเชื่อมโยงต่อไปนี้จะใช้เพื่อการใช้งานระบบแบ่งหน้าแบบกำหนดเอง:

  • แรก

  • ก่อนหน้านี้

  • Next

  • ล่าสุด

หมายเหตุ เราขอแนะนำให้ คุณใช้วิธีนี้เพื่อโหลดรูปไม่เกินห้าในแต่ละครั้ง


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

ภาพรวมตัวอย่าง

โค้ดตัวอย่างนี้ประกอบด้วยสามส่วนต่อไปนี้:

  • ตัวควบคุมรูปภาพสำหรับการแสดงรูปภาพขนาดใหญ่เมื่อมีเลือก โดยผู้ใช้

  • ตัวควบคุม DataList สำหรับรายการรูปขนาดย่อสำหรับการนำทาง

  • สี่เชื่อมโยงปุ่มสำหรับการใช้แถบการนำทาง

คุณสามารถดาวน์โหลดโค้ดตัวอย่าง และทำตามขั้นตอนเหล่านี้เพื่อสร้างแกลเลอรีรูปผิด:

  1. สร้างโปรแกรมประยุกต์บนเว็บ ASP.NET C# ที่ชื่อCSASPNETDataListImageGalleryใน Microsoft Visual Studio 2008

  2. ลากตัวควบคุมDataListลงบนหน้า แล้ว ใช้รหัสต่อไปนี้เพื่อตั้งค่าคุณสมบัติRepeatColumnsเป็น5และตั้งค่าคุณสมบัติRepeatDirectionเป็นแนวนอน:
    <asp:DataList ID="DataList1" runat="server" RepeatColumns="5" RepeatDirection="Horizontal" >

  3. ใช้รหัสต่อไปนี้เพื่อตั้งค่าแม่แบบในตัวควบคุมDataListเพื่อผูกกับเขตข้อมูล URL:
    <ItemTemplate>
    <asp:ImageButton ID="IB_tn" runat="server" ImageUrl='<%# "/Image/" + Eval("Url") %>' Width="100px" Height="100px" OnClick="IB_tn_Click" CommandArgument='<%# Container.ItemIndex %>' />
    </ItemTemplate>

  4. ใช้รหัสต่อไปนี้เพื่อเพิ่มปุ่มสี่ปุ่มนำทางในเพจ:
    <asp:LinkButton ID="lbnFirstPage" Text="First" CommandName="first" OnCommand="Page_OnClick" runat="server" Width="125px" />
    <asp:LinkButton ID="lbnPrevPage" Text="Prev" CommandName="prev" OnCommand="Page_OnClick" runat="server" Width="125px" />
    <asp:LinkButton ID="lbnNextPage" Text="Next" CommandName="next" OnCommand="Page_OnClick" runat="server" Width="125px" />
    <asp:LinkButton ID="lbnLastPage" Text="Last" CommandName="last" OnCommand="Page_OnClick" runat="server" Width="125px" />

  5. เปิดแฟ้มรหัส Default.aspx.cs

  6. ใช้รหัสต่อไปนี้เพื่อนำเข้า namespaces System.Data และ System.IO ไปยังหน้า:
    using System.Data;
    using System.IO;

  7. แทรกรหัสต่อไปนี้เพื่อสร้างสองคุณสมบัติใหม่ Page_Index และ Page_Count:
    //property for current page index
    public int Page_Index
    {
    get { return (int)ViewState["_Page_Index"]; }
    set { ViewState["_Page_Index"] = value; }
    }
    //property for total page count
    public int Page_Count
    {
    get { return (int)ViewState["_Page_Count"]; }
    set { ViewState["_Page_Count"] = value; }
    }

  8. แทรกรหัสต่อไปนี้เมื่อต้องการดูหมายเลขของรูป:
    //return total number of images
    protected int ImageCount()
    {
    DirectoryInfo di = new DirectoryInfo(Server.MapPath("/Image/"));
    FileInfo[] fi = di.GetFiles();
    return fi.GetLength(0);
    }

  9. แทรกรหัสต่อไปนี้เมื่อต้องการผูกตัวควบคุมDataList :
    //return the data source for DataList
    protected DataTable BindGrid()
    {
    //get all image paths
    DirectoryInfo di = new DirectoryInfo(Server.MapPath("/Image/"));
    FileInfo[] fi = di.GetFiles();

    //save all paths to the DataTable as the data source
    DataTable dt = new DataTable();
    DataColumn dc = new DataColumn("Url", typeof(System.String));
    dt.Columns.Add(dc);
    int lastindex = 0;
    if (Page_Count == 0 || Page_Index == Page_Count - 1)
    {
    lastindex = ImageCount();
    }
    else
    {
    lastindex = Page_Index * PageSize + 5;
    }
    for (int i = Page_Index * PageSize; i < lastindex; i++)
    {
    DataRow dro = dt.NewRow();
    dro[0] = fi[i].Name;
    dt.Rows.Add(dro);
    }
    return dt;
    }

  10. แทรกรหัสต่อไปนี้เพื่อจัดการกับเหตุการณ์ปุ่มหน้า:
    //handle the navigation button event
    public void Page_OnClick(Object sender, CommandEventArgs e)
    {
    if (e.CommandName == "first")
    {
    Page_Index = 0;
    lbnFirstPage.Enabled = false;
    lbnPrevPage.Enabled = false;
    lbnNextPage.Enabled = true;
    lbnLastPage.Enabled = true;
    }
    else if (e.CommandName == "prev")
    {
    Page_Index -= 1;
    if (Page_Index == 0)
    {
    lbnFirstPage.Enabled = false;
    lbnPrevPage.Enabled = false;
    lbnNextPage.Enabled = true;
    lbnLastPage.Enabled = true;
    }
    else
    {
    lbnFirstPage.Enabled = true;
    lbnPrevPage.Enabled = true;
    lbnNextPage.Enabled = true;
    lbnLastPage.Enabled = true;
    }
    }
    else if (e.CommandName == "next")
    {
    Page_Index += 1;
    if (Page_Index == Page_Count - 1)
    {
    lbnFirstPage.Enabled = true;
    lbnPrevPage.Enabled = true;
    lbnNextPage.Enabled = false;
    lbnLastPage.Enabled = false;
    }
    else
    {
    lbnFirstPage.Enabled = true;
    lbnPrevPage.Enabled = true;
    lbnNextPage.Enabled = true;
    lbnLastPage.Enabled = true;
    }
    }
    else if (e.CommandName == "last")
    {
    Page_Index = Page_Count - 1;
    lbnFirstPage.Enabled = true;
    lbnPrevPage.Enabled = true;
    lbnNextPage.Enabled = false;
    lbnLastPage.Enabled = false;
    }

    DataList1.SelectedIndex = 0;
    DataList1.DataSource = BindGrid();
    DataList1.DataBind();
    Image1.ImageUrl
    = ((Image)DataList1.Items[0].FindControl("IB_tn")).ImageUrl;
    }

  11. แทรกรหัสต่อไปนี้เพื่อจัดการกับรูปภาพคลิกเหตุการณ์:
    //handle the thumbnail image selecting event
    protected void IB_tn_Click(object sender, EventArgs e)
    {
    ImageButton ib = (ImageButton)sender;
    Image1.ImageUrl = ib.ImageUrl;
    DataList1.SelectedIndex = Convert.ToInt32(ib.CommandArgument);
    }


ประเภทของเทคโนโลยี

  • ASP.NET 2.0

  • ASP.NET 3.5

  • ASP.NET 4.0

ภาษา

ตัวอย่างรหัสนี้มีอยู่ในภาษาการเขียนโปรแกรมต่อไปนี้:


ภาษา

ชื่อโครงการ

Visual C#

CSASPNETDataListImageGallery

Visual Basic.NET

VBASPNETDataListImageGallery

ข้อมูลอ้างอิง

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับตัวควบคุมเซิร์ฟเวอร์DataListแวะไปที่เว็บไซต์ Microsoft สำหรับนักพัฒนา (MSDN) ต่อไปนี้:

ข้อมูลทั่วไปเกี่ยวกับตัวควบคุมเซิร์ฟเวอร์ DataListสำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีการตัดสินใจว่า จะใช้DataGrid, DataListและRepeaterควบคุม แวะไปเว็บไซต์ MSDN ต่อไปนี้:

วิธีการตัดสินใจว่า จะใช้ตัวควบคุม DataGrid, DataList และ Repeaterสำหรับข้อมูลเพิ่มเติมเกี่ยวกับการแบ่งหน้าข้อมูลที่มีประสิทธิภาพกับตัวควบคุม ASP.NET 2.0 DataListและObjectDataSourceแวะไป websit ต่อไปนี้:

ข้อมูลทั่วไปเกี่ยวกับการแบ่งหน้าข้อมูลที่มีประสิทธิภาพกับตัวควบคุม ASP.NET 2.0 DataList และ ObjectDataSource

ข้อมูลเพิ่มเติม

กรอบงานรหัสออลอินคืออะไร

กรอบงานรหัสออลอินแสดงเทคนิคการพัฒนา Microsoft ส่วนใหญ่ โดยใช้ตัวอย่างรหัสในภาษาการเขียนโปรแกรมต่าง ๆ ตัวอย่างแต่ละอย่างรอบคอบเลือก ส่วนประกอบ และจัดทำเอกสารเพื่อแสดงสถานการณ์สมมติรหัสทั่วไปหนึ่ง สำหรับข้อมูลเพิ่มเติมเกี่ยวกับกรอบงานรหัสออลอิน แวะไปที่เว็บไซต์ของ Microsoft ต่อไปนี้:

http://1code.codeplex.com

วิธีการค้นหาตัวอย่างรหัส Framework ออลอินเพิ่มเติม

เมื่อต้องการค้นหาตัวอย่างรหัส Framework ออลอินเพิ่มเติม ค้นหา "kbcodefx" ร่วมกับคำสำคัญที่เกี่ยวข้องใน Microsoft สนับสนุนเว็บไซต์ หรือ แวะไปที่เว็บไซต์ของ Microsoft ต่อไปนี้:

ตัวอย่างรหัส Framework ออลอิน

คำปฏิเสธการเผยแพร่อย่างรวดเร็ว

Microsoft corporation และ/หรือของซัพพลายเออร์แต่ละรายทำไม่ได้ยืนยันใด ๆ เกี่ยวกับความเหมาะสม ความน่าเชื่อถือ หรือความถูกต้องของข้อมูลและกราฟิกที่เกี่ยวข้องที่มีอยู่ในที่นี้ ข้อมูลและกราฟิกที่เกี่ยวข้องทั้งหมดดังกล่าวไว้ให้ "ตามที่เป็นอยู่" โดยไม่มีการรับประกันใด ๆ Microsoft และ/หรือซัพพลายเออร์ที่เกี่ยวข้องแปลง disclaim รับประกันและเงื่อนไขที่เกี่ยวข้องกับข้อมูลนี้ทั้งหมด และที่เกี่ยวข้องกับกราฟิก รวมถึงการรับประกันโดยนัยทั้งหมดและเงื่อนไขของความสามารถในเชิงพาณิชย์ ความเหมาะสมสำหรับวัตถุประสงค์เฉพาะ workmanlike ความพยายาม ชื่อเรื่อง และที่ไม่ใช่การละเมิด โดยเฉพาะอย่างยิ่งตกลงว่า ไม่ จะ Microsoft และ/หรือซัพพลายเออร์ที่รับผิดชอบใด ๆ เกิดจากทางตรง ทางอ้อม โทษ พิเศษ ต่อการเสียหาย หรือเสียหายใด ๆ ก็ตามรวมถึง แต่ไม่ เสียหายสำหรับการใช้ ข้อมูล หรือ กำไร เกิดจากทั้งหมด หรือ ในวิธีใด ๆ ที่เชื่อมโยงกับการใช้งานหรือไม่สามารถใช้ข้อมูลและกราฟิกที่เกี่ยวข้องอยู่ในที่นี้ ว่าตามสัญญา สูญ ความผิด หนี้สินที่เข้มงวด หรืออย่างอื่น ใด แม้ว่า Microsoft หรือของซัพพลายเออร์ใด ๆ มีการ คำแนะนำเกี่ยวกับเสียหายที่อาจเกิดขึ้น

ต้องการความช่วยเหลือเพิ่มเติมหรือไม่

ขยายทักษะของคุณ
สำรวจการฝึกอบรม
รับฟีเจอร์ใหม่ก่อนใคร
เข้าร่วม Microsoft Insider

ข้อมูลนี้เป็นประโยชน์หรือไม่

คุณพึงพอใจกับคุณภาพการแปลแค่ไหน
สิ่งที่ส่งผลกระทบต่อประสบการณ์ใช้งานของคุณ

ขอบคุณสำหรับคำติชมของคุณ

×