Використання керування DataList для створення галерею зображень

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

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

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

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

Можливо, у колекція зображень широко використовується в багатьох сайтах соціальних мереж, особистих сайтів і бізнесу, веб-сайти. Наприклад, може використовувати зображення галереї Показати бібліотеки особистих завантажені зображення особисті веб-сайту. Показ слайдів, є також популярний інструмент для показу зображення на веб-сайтах. Цьому прикладі показано, як використовувати 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

Мови

Цей код на зразок доступний нижченаведених мов програмування.

Посилання

Щоб отримати додаткові відомості про сервер керування 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 зразків