Làm thế nào để sử dụng điều khiển DataList để tạo một thư viện ảnh

Mức độ khó khăn

Thông tin tải xuống

Để tải xuống mẫu mã này, bấm vào một trong các liên kết sau:

Tổng quan về kỹ thuật

Bạn có thể tìm thấy hình ảnh được sử dụng rộng rãi trong nhiều mạng xã hội, trang web cá nhân và trang web E-kinh doanh. Ví dụ: bạn có thể sử dụng hình ảnh để hiển thị thư viện cá nhân hình ảnh trên một trang web cá nhân. Chiếu là một công cụ phổ biến để hiển thị hình ảnh trên trang web. Mẫu mã này giải thích cách sử dụng DataList và ImageButton điều khiển trong ASP.NET để tạo một hình ảnh có ảnh hướng. Bạn có thể bấm vào hình thu nhỏ kiểm soát Datalist Hiển thị một phiên bản lớn hơn của hình ảnh trên trang. Mã mẫu này đọc đường dẫn hình ảnh từ thư mục vào một mảng FileInfo . Sau đó, mảng FileInfo được sử dụng để xác định một đối tượng DataTable tuỳ chỉnh với điều khiển Datalist . Mẫu mã này cũng thực hiện một hệ thống phân trang tuỳ chỉnh cho phép năm hình ảnh ngang được hiển thị trên một trang. Các nút liên kết sau đây được sử dụng để thực hiện một hệ thống phân trang tùy chỉnh:

• Đầu tiên

• Trước đó

• Tiếp theo

• Cuối cùng

Lưu ý Chúng tôi khuyên bạn sử dụng phương pháp này để tải hình ảnh không có nhiều hơn năm lần.


Bạn cũng có thể đặt thuộc tính SelectedIndex kiểm soát DataList để giới hạn số lượng hình ảnh thu nhỏ có thể được chọn. Để cho biết hình ảnh nào được chọn, bạn có thể đặt kiểm soát DataList SelectedStyle tài sản.

Tổng quan về mẫu

Mẫu mã này có ba phần sau:

• Điều khiển ảnh để hiển thị ảnh lớn khi chúng được chọn bởi người dùng.

• Điều khiển DataList cho danh sách các hình ảnh thu nhỏ để điều hướng.

• 4 liên kết nút để thực hiện thanh menu.

Bạn có thể tải xuống mẫu mã và làm theo các bước sau để tạo một hình ảnh:

1. Tạo một ứng dụng web ASP.NET C# có tên CSASPNETDataListImageGallery trong Microsoft Visual Studio 2008.
   

2. Kéo điều khiển DataList vào một trang. Sau đó, sử dụng mã sau đây để đặt thuộc tính RepeatColumns 5, và đặt thuộc tính RepeatDirection ngang:
   <asp:DataList ID="DataList1" runat="server" RepeatColumns="5" RepeatDirection="Horizontal" >

3. Sử dụng mã sau đây để đặt các mẫu kiểm soát DataList liên kết với trường 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. Sử dụng mã sau để thêm bốn nút điều hướng trang:
   <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. Mở tệp mã Default.aspx.cs.

6. Sử dụng mã sau đây để nhập dữ liệu hệ thống và System.IO tên trang:
   using System.Data;
   using System.IO;

7. Nhập mã sau đây để tạo hai thuộc tính mới, Page_Index và 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. Nhập mã sau đây để nhận được số lượng hình ảnh:
   //return total number of images
   protected int ImageCount()
   {
   DirectoryInfo di = new DirectoryInfo(Server.MapPath("/Image/"));
   FileInfo[] fi = di.GetFiles();
   return fi.GetLength(0);
   }

9. Nhập mã sau đây để liên kết điều khiển 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. Nhập mã sau đây để xử lý sự kiện nút trang:
    //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. Nhập mã sau đây để xử lý sự kiện nhấp chuột ảnh:
    //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);
    }

Loại công nghệ

• ASP.NET 2.0

• ASP.NET 3.5

• ASP.NET 4.0

Ngôn ngữ

Mẫu mã này có sẵn trong các ngôn ngữ sau:

Tham khảo

Để biết thêm chi tiết về điều khiển máy chủ DataList , ghé thăm website sau của nhà phát triển Microsoft (MSDN):

Thông tin chung về kiểm soát máy chủ DataListĐể biết thêm chi tiết về làm thế nào để quyết định khi sử dụng DataGrid, DataList và lặp lại điều khiển, hãy ghé thăm website sau của MSDN:

Làm thế nào để quyết định khi sử dụng điều khiển DataGrid, DataList và lặp lạiĐể biết thêm thông tin về phân trang dữ liệu hiệu quả với các điều khiển ASP.NET 2.0 DataList và ObjectDataSource, ghé thăm websit sau:

Thông tin chung về phân trang dữ liệu hiệu quả với các điều khiển ASP.NET 2.0 DataList và ObjectDataSource

Tất cả-trong-một mã Framework là gì?

Tất cả-trong-một mã khung Hiển thị hầu hết các kỹ thuật phát triển Microsoft bằng cách sử dụng mẫu mã ngôn ngữ khác nhau. Ví dụ mỗi cẩn thận lựa chọn, bao gồm và tài liệu cho một trường hợp mã phổ biến. Để biết thêm thông tin về tất cả-trong-một mã khung, ghé thăm website sau của Microsoft:

http://1code.codeplex.com

Làm thế nào để thêm tất cả trong một khuôn khổ mã mẫu

Để biết thêm tất cả trong một khuôn khổ mã mẫu, hãy tìm kiếm "kbcodefx" cùng với các từ khóa liên quan trên Microsoft hỗ trợ trang Web. Hoặc, hãy ghé thăm website sau của Microsoft:

Tất cả trong một khuôn khổ mã mẫu