ВСТУП

У цій статті описано на зразок все в одному рамки, доступний для завантаження. Цьому прикладі показано, як створити застосунок колекція зображень за допомогою елемента керування DataList ASP.NET. Приклад пакет можна отримати з указаних нижче піктограм для завантаження.

Рівень складності




alternate text

Відомості про завантаження

Для завантаження в цьому прикладі, клацніть одне з наведених нижче посилань:


Технічний огляд

Можливо, у колекція зображень широко використовується в багатьох сайтах соціальних мереж, особистих сайтів і бізнесу, веб-сайти. Наприклад, може використовувати зображення галереї Показати бібліотеки особистих завантажені зображення особисті веб-сайту. Показ слайдів, є також популярний інструмент для показу зображення на веб-сайтах. Цьому прикладі показано, як використовувати DataList і ImageButton керування ASP.NET для створення галерею зображень з навігація. Можна клацнути на ескіз зображення в Datalist керування відображати збільшення зображення на сторінці. Зразок коду, читає шляхи зображення з певного каталогу в масив FileInfo . Після цього FileInfo масив використовується спеціальний об'єкт DataTable , яка пов'язана із Datalist елемента керування можна. Цьому прикладі, також здійснює настроювані довантаження-система, яка дозволяє п'ять зображення по горизонталі відображаються на сторінці. Посилання кнопки, які використовуються для здійснення настроюваної довантаження системи:

  • Перша

  • Попередній

  • Далі

  • Останній

Примітка. Корпорація Майкрософт рекомендує, що використання цього способу завантаження не більше п'яти зображення за один раз.


Також можна настроїти властивість SelectedIndex DataList керування, щоб обмежити кількість ескіз зображення, які можна вибрати. Про те, що образ, який установлено, можна настроїти властивість SelectedStyle DataList елемента керування.

Приклад огляд

Цьому прикладі, містить такі три частини:

  • Елемент керування зображення під час відображення великі зображення, якщо вибрані користувачем.

  • Елемент керування DataList розміщення ескізи для навігації.

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

Можна завантажити зразок коду та виконайте наведені нижче дії, щоб створити зображення галереї:

  1. Створення C# ASP.NET веб-застосунку, з іменем CSASPNETDataListImageGallery у Microsoft Visual Studio 2008.

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

  3. Вибір шаблону для прив'язки поле URL-адреси, керування DataList за допомогою такий код:
    <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

Візуальні Basic.NET

VBASPNETDataListImageGallery

Посилання

Щоб отримати додаткові відомості про сервер керування DataList відвідайте веб-сайт корпорації Майкрософт для розробників (MSDN):

Загальні відомості про сервер керування DataListЩоб отримати додаткові відомості про те, як вирішити, застосування Дата Грід DataList та ретранслятор керування перейдіть на веб-сайті MSDN:

Як вибрати, застосування Дата Грід, DataList та ретранслятор елемент керуванняЩоб отримати додаткові відомості про ефективне даних довантаження, ASP.NET 2.0, DataList керування та ObjectDataSourceдив. нижче websit:

Загальні відомості про ефективне даних довантаження, ASP.NET 2.0 DataList керування та ObjectDataSource

Додаткові відомості

Що таке все в одному з кодом Framework

Більшість Microsoft розробки технології, за допомогою все в одному з кодом Framework показує, за допомогою приклади коду для різних мов програмування. Кожному прикладі ретельно встановлено, у складі і задокументовані для відображення одного зазвичай за сценарієм коду. Щоб отримати додаткові відомості про все в одному з кодом Framework відвідайте веб-сайт корпорації Майкрософт:

http://1code.codeplex.com

Як знайти більше-все в одному з кодом Framework зразків

Щоб знайти більше-все в одному з кодом Framework зразків, знайдіть "kbcodefx" разом з пов'язаних ключових слів, у Microsoft веб-сайт підтримки. Крім того, відвідайте веб-сайт корпорації Майкрософт:

Все в одному з кодом Framework зразків

Швидке відмову від гарантій щодо публікації

Корпорація Майкрософт та/або її постачальники не роблять жодних заяв про придатність, надійність або точність інформації і графічних матеріалів. Такі відомості та графічні надається "як є" без будь-яких гарантій. Корпорація Майкрософт та/або її постачальники тим самим відмовляються від, усі гарантій і умов стосовно цієї інформації та пов'язані з графіки, включаючи всі гарантії та умови придатності для певної мети, високої на нього та непорушення прав. Зокрема погоджуєтеся, що не корпорації Майкрософт та/або її постачальники несе відповідальності за будь-які прямі, непрямі, штрафні, випадкові, особливі, непрямі збитки або збитки взагалі включаючи, без обмеження, збитки за втрату даних використання або прибуток, що виникають, або будь-яким способом, пов'язані з використанням або неможливістю використання відомостей і графічних матеріалів, за контракту, цивільного правопорушення, необережності, об'єктивної відповідальності або іншим чином, навіть якщо корпорації Майкрософт або будь-якої з її постачальників відобразиться відповідна підказка про можливість таких збитків.

Потрібна додаткова довідка?

Отримуйте нові функції раніше за інших
Приєднатися до Microsoft оцінювачів

Чи були ці відомості корисні?

Наскільки ви задоволені якістю перекладу?
Що вплинуло на ваші враження?

Дякуємо за ваш відгук!

×