Использование элемента управления DataList для создания коллекции изображений

ВВЕДЕНИЕ

Данная статья содержит пример framework все-в-одном, который доступен для загрузки. В этом примере кода показано, как создать приложение коллекции изображений с помощью элемента управления DataList в ASP.NET. Образец пакета можно получить из следующих значков загрузки.

Уровень сложности




alternate text

Информация о скачивании

Чтобы загрузить этот образец кода, щелкните одну из следующих ссылок:


Технический обзор

Может оказаться, что коллекция изображений широко используется во многих сайтов социальных сетей, личные веб-узлы и веб-узлы электронной коммерции. Например коллекция изображений можно использовать для отображения библиотеку личных загруженного изображения на личный веб-узел. Слайд-шоу также является популярное средство для отображения изображений на веб-сайтах. В этом примере кода демонстрируется использование DataList и элемент управления ImageButton в ASP.NET для создания коллекции изображений с навигацией изображения. Можно щелкнуть эскиз изображения в элементе управления Datalist для отображения увеличения изображения на странице. Этот пример кода считывает пути к изображению в определенной папке в массив FileInfo . Затем массив FileInfo используется для заполнения пользовательский объект DataTable , который привязан к элементу управления Datalist . В этом примере кода также реализует пользовательское разбиение по страницам систему, которая позволяла пять изображений, отображаемых по горизонтали на одной странице. Следующие кнопки ссылки, используемые для реализации системы пользовательского разбиения по страницам.

  • Первый

  • Предыдущий

  • Далее

  • Последний

Примечание. Рекомендуется использовать этот метод для загрузки не более пяти образов одновременно.


Можно также задать свойство SelectedIndex элемента управления DataList ограничить число эскизов изображений, которые могут быть выбраны. Чтобы указать образ, который выбран, можно задать свойство SelectedStyle элемента управления DataList .

Общие сведения о примере

В этом примере кода содержит следующие три части:

  • Изображение для отображения больших изображений, когда они выбраны пользователем.

  • Элемент управления DataList для вывода эскизов для навигации.

  • Четыре кнопки для реализации на навигационной панели ссылок.

Можно загрузить образец кода и выполните следующие действия для создания галереи изображений:

  1. Создайте веб-приложение ASP.NET C# с именем CSASPNETDataListImageGallery в Microsoft Visual Studio 2008.

  2. Перетащите на страницу элемент управления DataList . Затем используйте следующий код для установки свойства RepeatColumns 5и присвойте свойству RepeatDirection горизонтальные:
    <asp:DataList ID="DataList1" runat="server" RepeatColumns="5" RepeatDirection="Horizontal" >

  3. Чтобы установить шаблон в элементе управления DataList для привязки к полю 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. Используйте следующий код, чтобы добавить четыре кнопки для навигации по страницам:
    <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. Откройте файл с кодом Default.aspx.cs.

  6. Используйте следующий код для импорта пространств имен System.Data и System.IO на страницу:
    using System.Data;
    using System.IO;

  7. Вставьте следующий код, чтобы создать два новых свойства Page_Index и 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. Вставьте следующий код, чтобы получить количество изображений:
    //return total number of images
    protected int ImageCount()
    {
    DirectoryInfo di = new DirectoryInfo(Server.MapPath("/Image/"));
    FileInfo[] fi = di.GetFiles();
    return fi.GetLength(0);
    }

  9. Вставьте следующий код для привязки элемента управления 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. Вставьте следующий код для обработки событий страницы кнопки:
    //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. Вставьте следующий код для обработки изображений нажмите кнопку события:
    //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);
    }


Категории технологии

  • ASP.NET 2.0

  • ASP.NET 3.5

  • ASP.NET 4.0

Языки

В этом примере кода доступна на следующих языках программирования:


Язык

Имя проекта

Visual C#

CSASPNETDataListImageGallery

Visual Basic.NET

VBASPNETDataListImageGallery

Ссылки

Дополнительные сведения о серверном элементе управления посетите следующий веб-узел Microsoft Developer (MSDN):

Общие сведения о серверном элементе управления DataListДополнительные сведения о том, как определить, когда использовать DataGrid, DataList и Repeater элемент управления посетите следующий веб-узел MSDN:

Чтобы определить, когда следует использовать элемент управления DataGrid, DataList и RepeaterДополнительные сведения о подкачки эффективность данных с элементом управления ASP.NET 2.0 DataList и ObjectDataSourceпосетите следующие websit:

Общие сведения о подкачки эффективность данных с элементом управления ASP.NET 2.0 DataList и ObjectDataSource

Дополнительные сведения

Что такое инфраструктура кода все в одном

Все-в-одном среды разработки программного кода показано большинства методов разработки Майкрософт с помощью примеров кода на различных языках программирования. В каждом примере тщательно выбран, состоит и задокументированы для отображения одним из распространенных сценариев код. Дополнительные сведения о все-в-одном среды разработки программного кода посетите следующий веб-узел корпорации Майкрософт:

http://1code.codeplex.com

Как найти дополнительные примеры кода All-In-One Code Framework

Чтобы найти дополнительные примеры кода Framework все-в-одном, поиск «kbcodefx», а также связанные ключевые слова на Microsoft поддерживают веб-узла. Или посетите следующий веб-узел корпорации Майкрософт:

Примеры кода Framework все-в-одном

Отказ от быстрой публикации

Корпорация Майкрософт или ее поставщиков соответствующих не делают никаких утверждений о пригодности, надежность и точность данных и связанные рисунки, содержащиеся в настоящем документе. Такой информации и связанные рисунки предоставляются «как есть» без гарантий любого рода. Корпорация Майкрософт и ее партнерам соответствующих настоящим отказываются от всех гарантий и условий в отношении этой информации и связанные с ним графические элементы, включая все подразумеваемые гарантии и условия товарности, пригодности для определенной цели, качества объем работ, названия и ненарушения. Вы явным образом согласитесь, что не Майкрософт или ее поставщики несут ответственности за любой прямой, косвенный, punitive, случайные, специальные, косвенные убытки или любой ущерб ни при каких обстоятельствах включая, без ограничений, ущерб, потерю данных, использования или Прибыль, возникающие из или каким-либо образом связаны с использования или невозможности использования информации и связанные рисунки, содержащиеся в настоящем документе, на основании контракта, гражданским правонарушением, небрежностью, строгая ответственность или в противном случае, даже если корпорация Майкрософт или ее поставщиков Рекомендуется по возможности ущерба.

Нужна дополнительная помощь?

Совершенствование навыков
Перейти к обучению
Первоочередный доступ к новым возможностям
Присоединение к программе предварительной оценки Майкрософт

Были ли сведения полезными?

Спасибо за ваш отзыв!

Благодарим за отзыв! Возможно, будет полезно связать вас с одним из наших специалистов службы поддержки Office.

×