PENDAHULUAN

Artikel ini menjelaskan semua-dalam-satu kerangka sampel yang tersedia untuk diunduh. Sampel kode ini menunjukkan bagaimana cara membuat aplikasi galeri gambar menggunakan kontrol DataList ASP.net. Anda bisa mendapatkan paket contoh dari ikon unduhan berikut.

Tingkat kesulitan




alternate text

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:


Bahasa

Nama proyek

Visual C#

CSASPNETDataListImageGallery

Visual Basic.NET

VBASPNETDataListImageGallery

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

Informasi lebih lanjut

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

Sanggahan penerbitan cepat

Microsoft corporation dan/atau para PENYUPLAINYA tidak membuat pernyataan tentang kesesuaian, keandalan, atau akurasi informasi dan grafis terkait yang terkandung di dalamnya. Semua informasi dan grafis terkait disediakan "apa adanya" tanpa jaminan dalam bentuk apa pun. Microsoft dan/atau para PENYUPLAINYA dengan ini menyanggah semua jaminan dan kondisi berkenaan dengan informasi ini dan terkait grafis, termasuk semua garansi dan kondisi tersirat dapat diperjualbelikan, kesesuaian untuk tujuan tertentu, properti upaya, judul dan non-pelanggaran. Anda khususnya setuju bahwa dalam acara akan Microsoft dan/atau pemasoknya tidak bertanggung jawab untuk setiap langsung, tidak langsung, hukuman, insidental, khusus, konsekuensial, atau kerusakan apa pun termasuk, tanpa batasan, kerusakan hilangnya penggunaan, data atau keuntungan, timbul dari atau dengan cara apa pun yang berhubungan dengan penggunaan atau ketidakmampuan untuk menggunakan informasi dan grafis terkait yang terkandung di dalamnya, baik berdasarkan pada kontrak, kesalahan, negligence tanggung jawab ketat atau tersurat, bahkan jika Microsoft atau pemasoknya telah disarankan kemungkinan kerusakan.

Perlu bantuan lainnya?

Kembangkan keterampilan Anda
Jelajahi pelatihan
Dapatkan fitur baru terlebih dahulu
Gabung Microsoft Insider

Apakah informasi ini bermanfaat?

Seberapa puaskah Anda dengan kualitas bahasanya?
Apa yang memengaruhi pengalaman Anda?

Terima kasih atas umpan balik Anda!

×