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

Dotyczy: ASP.NET on .NET Framework 3.5 Service Pack 1

WPROWADZENIE


W tym artykule opisano próbki framework All-in-One, który jest dostępny do pobrania. Ten przykładowy kod ilustruje tworzenie aplikacji Galeria obrazów przy użyciu DataList kontroli w programie ASP.NET. Pakiet próbki można uzyskać z następujących ikon pobierania.

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:


JęzykNazwa projektu
Program Visual C#CSASPNETDataListImageGallery
Visual Basic.NETVBASPNETDataListImageGallery

Powiązane artykuły

Aby uzyskać więcej informacji o formancie serwera DataList odwiedź następującą witrynę Microsoft Developer (MSDN):
Aby uzyskać więcej informacji dotyczących sposobu zdecydować, kiedy należy używać DataGrid, DataList i Repeater kontroli odwiedź następującą witrynę MSDN:
Aby uzyskać więcej informacji na temat stronicowania efektywne danych z programu ASP.NET 2.0 DataList kontroli i ObjectDataSourceodwiedź następujące websit:

Więcej informacji


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:

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:
Wyłączenie szybkiego publikowania
Firma Microsoft corporation ani jej dostawcy nie składają żadnych oświadczeń o przydatność, wiarygodność lub dokładności informacji i pokrewne grafiki zawarte w niniejszym dokumencie. Wszystkie takie informacje i ilustracje są dostarczane "tak jak są" bez jakiejkolwiek gwarancji. Firma Microsoft lub jej dostawcy niniejszym zrzekają się wszelkich gwarancji i warunków dotyczących tych informacji i związanych z grafiką, w tym wszelkie dorozumiane gwarancje przydatności handlowej, przydatności do określonego celu, łatwości obsługi wysiłku, tytułu i nienaruszalności. W szczególności zgadzasz się że w żadnym wypadku Microsoft lub jej dostawców ponosi odpowiedzialności za szkody bezpośrednie, pośrednie, karne, przypadkowe, specjalne, wtórne ani inne szkody tym, bez ograniczeń, utratę danych lub zyski wynikające z lub w jakikolwiek sposób związane z korzystania z lub niemożności korzystania z informacji i pokrewne grafiki zawarte w niniejszym dokumencie, na podstawie umowy, czynów niedozwolonych, zaniedbania, odpowiedzialności na zasadzie ryzyka lub w inny sposób, nawet jeśli został Microsoft lub którykolwiek z jej dostawców poinformowana o możliwości wystąpienia szkód.