Jak używać DataList kontroli do tworzenia galerii zdjęć

Poziom trudności

Pobieranie informacji

Aby pobrać ten przykładowy kod, kliknij jedno z następujących łączy:

Opis techniczny

Można znaleźć Galeria obrazów jest powszechnie używana w wielu serwisach społecznościowych, osobiste strony internetowe i E-biznesu witryn sieci Web. Na przykład mogą korzystać Galeria obrazów wyświetlanych biblioteki obrazów osobistych przesłane na osobistej witryny sieci Web. Pokaz slajdów jest też popularnym narzędziem do wyświetlania obrazów na stronach internetowych. Ten przykładowy kod ilustruje sposób użycia DataList i ImageButton formanty w programie ASP.NET do tworzenia galerii zdjęć z nawigacją obrazu. Można kliknąć na obraz miniatury w Datalist formantu, aby wyświetlić większą wersję obrazu na stronie. Ten przykładowy kod odczytuje ścieżki obrazów z pewnym katalogu do tablicy FileInfo . Następnie w tablicy FileInfo służy do wypełnienia obiektu elementu DataTable niestandardowy, który jest powiązany formant Datalist . Ten przykładowy kod implementuje również niestandardowe systemu przywoławczego, który umożliwia pięciu obrazów, które mają być wyświetlane w poziomie na jednej stronie. Następujące przyciski łączy są używane do implementowania niestandardowych systemu przywoławczego:

• Pierwsza

• Poprzedni

• Dalej

• Ostatni

Uwaga Zaleca się używać tej metody do ładowania nie więcej niż pięciu obrazów naraz.


Można również ustawić dla DataList formantu, aby ograniczyć liczbę miniatur, które można wybrać dla właściwości SelectedIndex . Aby wskazać, który obraz jest zaznaczone, można ustawić właściwości SelectedStyle dla formantu DataList .

Przykładowa Przegląd

Ten przykładowy kod zawiera następujące trzy części:

• Formant obrazu do wyświetlania dużych obrazów, po wybraniu przez użytkownika.

• Formant DataList dla aukcji nawigacyjne w postaci miniaturowych obrazów.

• Połączyć cztery przyciski wprowadzania w życie na pasku nawigacyjnym.

Można pobrać przykładowy kod i wykonaj następujące kroki, aby utworzyć galerii zdjęć:

1. Tworzenie aplikacji sieci web ASP.NET C# o nazwie CSASPNETDataListImageGallery w programie Microsoft Visual Studio 2008.
   

2. Przeciągnij formant DataList na stronę. Następnie należy użyć następującego kodu, aby ustawić właściwość RepeatColumns 5i ustaw właściwość RepeatDirection na poziomie:
   <asp:DataList ID="DataList1" runat="server" RepeatColumns="5" RepeatDirection="Horizontal" >

3. Aby ustawić szablon DataList formantu, aby powiązać z polem adresu URL, należy użyć następującego kodu:
   <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. Aby dodać cztery przyciski do nawigacji strony, należy użyć następującego kodu:
   <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. Otwórz plik kodu Default.aspx.cs.

6. Aby zaimportować dane systemowe i System.IO obszarów nazw do strony, należy użyć następującego kodu:
   using System.Data;
   using System.IO;

7. Wstaw następujący kod, aby utworzyć dwie nowe właściwości Page_Index i 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. Wstaw następujący kod w celu uzyskania liczby obrazów:
   //return total number of images
   protected int ImageCount()
   {
   DirectoryInfo di = new DirectoryInfo(Server.MapPath("/Image/"));
   FileInfo[] fi = di.GetFiles();
   return fi.GetLength(0);
   }

9. Wstaw następujący kod, aby powiązać formant 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. Wstaw następujący kod do obsługi zdarzeń przycisk strony:
    //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. Wstaw następujący kod do obsługi obrazu kliknij zdarzenia:
    //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);
    }

Technologia kategoria

• PROGRAM ASP.NET 2.0

• PROGRAM ASP.NET 3.5

• PROGRAM ASP.NET 4.0

Języki

Ten przykład kodu jest dostępny w następujących językach programowania:

Powiązane artykuły

Aby uzyskać więcej informacji o formancie serwera DataList odwiedź następującą witrynę Microsoft Developer (MSDN):

Ogólne informacje o DataList formant serweraAby uzyskać więcej informacji dotyczących sposobu zdecydować, kiedy należy używać DataGrid, DataList i Repeater kontroli odwiedź następującą witrynę MSDN:

Jak zdecydować, kiedy należy używać formantu DataGrid i RepeaterAby uzyskać więcej informacji na temat stronicowania efektywne danych z programu ASP.NET 2.0 DataList kontroli i ObjectDataSourceodwiedź następujące websit:

Ogólne informacje dotyczące stronicowania efektywne danych z programu ASP.NET 2.0 DataList kontroli i ObjectDataSource

Co to jest Dell All-in-One Code Framework?

Urządzenie wielofunkcyjne Dell All-in-One code Framework zawiera większość technik programistycznych firmy Microsoft przy użyciu próbki kodu w różnych językach programowania. Każdy przykład starannie jest zaznaczone, w składzie i udokumentowany w celu zaprezentowania typowym scenariuszem kodu. Aby uzyskać więcej informacji na temat All-in-One Code Framework odwiedź następujące witryny firmy Microsoft:

http://1code.codeplex.com

Jak znaleźć więcej próbek kodową All-in-One

Aby znaleźć więcej próbek kodową All-in-One, wyszukaj "kbcodefx" wraz z pokrewnych słów kluczowych w programie Microsoft obsługuje witrynę sieci Web. Lub odwiedź następujące witryny firmy Microsoft:

Urządzenie wielofunkcyjne Dell All-in-One code Framework próbek