Как да използвате контролата 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. Използвайте следния код, за да зададете шаблон в 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

Езици

Този примерен код се предлага на следните езици за програмиране:

Препратки

За повече информация относно управлението на сървъра DataList посетете следния уеб сайт на разработчици на Microsoft (MSDN):

Обща информация за сървъра DataList контролаЗа повече информация относно как да решите дали да използвате DataGrid DataList и често контрол, посетете следния уеб сайт на MSDN:

Как да решите дали да използвате контролата DataGrid, DataList и честоЗа повече информация относно виртуална ефективно данни с ASP.NET 2.0 DataList контрола и ObjectDataSourceпосетете следния websit:

Обща информация за страниране ефективно данни с ASP.NET 2.0 DataList контрола и ObjectDataSource

Какво е всичко в едно код рамка?

Всичко в едно рамка код показва най-техники за развитие на Microsoft чрез примерен код в различни езици за програмиране. Всеки пример е внимателно избран съставен и документирани, за да покаже един общ код сценарий. За повече информация за всичко в едно код рамка посетете следния уеб сайт на Microsoft:

http://1code.codeplex.com

Как да намерите повече всичко в едно рамка код примери

За да намерите още всичко в едно рамка код проби, потърсете "kbcodefx" с ключови думи на Microsoft поддръжка уеб сайт. Или, посетете следния уеб сайт на Microsoft:

Всичко в едно рамка код примери