Cara menggunakan kontrol DataList untuk membuat galeri foto

Tingkat kesulitan

Informasi unduhan

Untuk mengunduh sampel kode ini, klik salah satu tautan berikut ini:

Ikhtisar teknis

Anda mungkin menemukan galeri gambar digunakan dalam banyak situs jejaring sosial, situs web pribadi dan situs Web E-bisnis. Misalnya, Anda dapat menggunakan galeri foto untuk menampilkan perpustakaan pribadi upload gambar pada situs web pribadi. Peragaan slide ini juga populer alat untuk menampilkan gambar pada situs web. Sampel kode ini menunjukkan cara menggunakan DataList dan ImageButton kontrol ASP.net untuk membuat galeri foto dengan gambar navigasi. Anda dapat mengklik citra gambar mini di Datalist kontrol untuk menampilkan versi yang lebih besar dari gambar di halaman. Contoh kode membaca jalur gambar dari direktori tertentu ke FileInfo array. Kemudian, FileInfo array digunakan untuk mengisi objek DataTable kustom yang dibatasi ke Datalist control. Sampel kode ini juga menerapkan sistem penomoran kustom yang memungkinkan lima gambar horizontal ditampilkan pada satu halaman. Tombol tautan di bawah ini yang digunakan untuk menerapkan sistem penomoran kustom:

• Pertama

• Sebelumnya

• Berikutnya

• Terakhir

Catatan Kami sarankan Anda menggunakan metode ini untuk memuat gambar tidak lebih dari lima bersamaan.


Anda juga dapat menetapkan properti SelectedIndex untuk mengontrol DataList untuk membatasi jumlah citra gambar mini yang dapat dipilih. Untuk menunjukkan gambar yang dipilih, Anda dapat menetapkan properti SelectedStyle untuk mengontrol DataList .

Ikhtisar sampel

Sampel kode ini berisi tiga bagian berikut ini:

• Gambar kontrol untuk menampilkan gambar yang besar saat mereka yang dipilih oleh pengguna.

• Kontrol DataList untuk daftar gambar mini untuk navigasi.

• Empat link tombol untuk menerapkan bilah navigasi.

Anda dapat men-download kode sampel dan ikuti langkah-langkah untuk membuat galeri gambar:

1. Membuat aplikasi web C# ASP.NET yang bernama CSASPNETDataListImageGallery dalam Microsoft Visual Studio 2008.
   

2. Tarik kontrol DataList ke halaman. Kemudian, gunakan kode berikut untuk menyetel properti RepeatColumns ke 5, dan menetapkan properti RepeatDirection ke Horizontal:
   <asp:DataList ID="DataList1" runat="server" RepeatColumns="5" RepeatDirection="Horizontal" >

3. Gunakan kode berikut untuk mengatur pola dasar pada kontrol DataList untuk mengikat kolom 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. Gunakan kode berikut ini untuk menambahkan tombol empat navigasi halaman:
   <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. Buka berkas kode BT_GetFeeds.

6. Gunakan kode berikut untuk mengimpor ruang nama System.Data dan System.IO ke halaman:
   using System.Data;
   using System.IO;

7. Masukkan kode berikut untuk membuat dua properti baru, Page_Index dan 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. Masukkan kode berikut untuk mendapatkan nomor gambar:
   //return total number of images
   protected int ImageCount()
   {
   DirectoryInfo di = new DirectoryInfo(Server.MapPath("/Image/"));
   FileInfo[] fi = di.GetFiles();
   return fi.GetLength(0);
   }

9. Masukkan kode berikut untuk mengikat DataList kontrol:
   //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. Masukkan kode berikut untuk menangani halaman tombol peristiwa:
    //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. Masukkan kode berikut untuk menangani peristiwa klik gambar:
    //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);
    }

Teknologi Kategori

• ASP.NET 2.0

• ASP.NET 3.5

• ASP.NET 4.0

Bahasa

Sampel kode ini tersedia dalam bahasa pemrograman berikut ini:

Referensi

Untuk informasi lebih lanjut tentang kontrol server DataList , kunjungi situs web Pengembang Microsoft (MSDN) berikut:

Informasi umum tentang kontrol server DataListUntuk informasi selengkapnya tentang cara menentukan ketika menggunakan DataGrid, DataList dan kontrol Repeater , kunjungi website MSDN berikut:

Cara menentukan ketika menggunakan DataGrid, DataList dan Repeater kontrolUntuk informasi selengkapnya tentang paging efisien data dengan kontrol ASP.NET 2.0 DataList dan ObjectDataSource, kunjungi websit berikut ini:

Informasi umum tentang paging efisien data dengan kontrol ASP.NET 2.0 DataList dan ObjectDataSource

Apa itu semua-dalam-satu kode Framework?

Semua-dalam-satu kode Framework menunjukkan sebagian besar teknik pengembangan Microsoft dengan menggunakan kode contoh dalam bahasa pemrograman yang berbeda. Setiap contoh dengan hati-hati dipilih, dibuat, dan didokumentasikan untuk menampilkan satu umum kode skenario. Untuk informasi selengkapnya tentang semua-dalam-satu kode Framework, kunjungi situs web Microsoft berikut:

http://1code.codeplex.com

Cara menemukan semua-dalam-satu kerangka kode sampel

Untuk mencari semua-dalam-satu kerangka kode sampel, Cari "kbcodefx" bersama-sama dengan kata kunci yang terkait di Microsoft dukungan situs Web. Atau, kunjungi situs web Microsoft berikut ini:

Semua-dalam-satu kerangka kode sampel