DataList denetimi Resim Galerisi oluşturmak için nasıl kullanılacağı

Zorluk düzeyi

İndirme bilgileri

Bu kod örneği yüklemek için aşağıdaki bağlantılardan birini tıklatın:

Teknik Genel Bakış

Resim Galerisi sosyal ağ sitelerinde birçok kişisel Web siteleri ve E-İş Web sitelerini yaygın olarak kullanılan bulabilirsiniz. Örneğin, Resim Galerisi, kişisel karşıya yüklenen resimler kitaplığını kişisel Web sitesinde göstermek için kullanabilirsiniz. Slayt gösterisi de Web sitelerinde resimleri görüntülemek için bir popüler bir araçtır. Bu kod örneği, DataList ve ImageButton denetimi ASP.NET resim gezinme ile bir Resim Galerisi oluşturmak için nasıl kullanılacağını gösterir. Bir küçük resim Datalist denetiminin sayfada resmin daha büyük bir sürümünü görüntülemek için tıklatabilirsiniz. Bu örnek koda görüntü yollarını FileInfo diziye belirli bir dizinden okur. Daha sonra FileInfo dizi Datalist denetimi için ilişkili özel bir DataTable nesnesini doldurmak için kullanılır. Bu kod örneği, bir sayfaya yatay olarak görüntülenecek beş görüntüleri sağlayan özel bir disk belleği sistemi de uygular. Aşağıdaki bağlantı düğmeleri özel bir disk belleği sistemi uygulamak için kullanılır:

• İlk

• Önceki

• Sonraki

• Son

Not: Bir anda beşten fazla yansımaları yüklemek için bu yöntemi kullanmanızı öneririz.


SelectedIndex özelliği seçilebilir minik resimlerin sayısını sınırlamak DataList denetimi için de ayarlayabilirsiniz. Hangi resim seçili olduğunu belirtmek için DataList denetimi için SelectedStyle özelliğini ayarlayabilirsiniz.

Örnek genel bakış

Bu kod örneği, aşağıdaki üç parça içerir:

• Bir kullanıcı tarafından seçildiğinde, büyük resimleri görüntülemek için resim denetimi.

• Gezinti için minik resimleri listeleyen bir DataList denetimi.

• Dört uygulama gezinti çubuğu düğmelerinin bağlayın.

Örnek kodu karşıdan yükleyebilir ve bir Resim Galerisi oluşturmak için şu adımları izleyin:

1. Microsoft Visual Studio 2008'de CSASPNETDataListImageGallery adlı bir C# ASP.NET web uygulaması yaratın.
   

2. DataList denetimi bir sayfaya sürükleyin. Ardından, 5' e RepeatColumns özelliğini ayarlamak için şu kodu kullanın ve RepeatDirection özelliğini Yatayolarak ayarlayın:
   <asp:DataList ID="DataList1" runat="server" RepeatColumns="5" RepeatDirection="Horizontal" >

3. Şablon URL'si bir alana bağlamak için DataList denetimini ayarlamak için şu kodu kullanın:
   <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. Sayfa gezintisi için dört düğme eklemek için şu kodu kullanın:
   <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 kod dosyasını açın.

6. Sayfaya System.Data ve System.IO ad alanları almak için aşağıdaki kodu kullanın:
   using System.Data;
   using System.IO;

7. Page_Index ve Page_Count olmak üzere iki yeni özellik oluşturmak için aşağıdaki kodu ekleyin:
   //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. Görüntü sayısını almak için aşağıdaki kodu ekleyin:
   //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 denetimi bağlamak için aşağıdaki kodu ekleyin:
   //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. Sayfa düğmesini olayları işlemek için aşağıdaki kodu ekleyin:
    //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. Görüntüyü işlemek için aşağıdaki kodu Ekle olaylar'ı tıklatın:
    //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);
    }

Kategori teknoloji

• ASP.NET 2.0

• ASP.NET 3.5

• ASP.NET 4.0

Diller

Bu kod örneği, programlama aşağıdaki dillerde kullanılabilir:

Başvurular

DataList denetimi sunucusu hakkında daha fazla bilgi için aşağıdaki Microsoft Developer (MSDN) Web sitesini ziyaret edin:

DataList denetimi sunucusu hakkında genel bilgilerDataGridve DataList Repeater denetimi kullanma zamanı konusunda karar verme hakkında daha fazla bilgi için aşağıdaki MSDN Web sitesini ziyaret edin:

DataGrid ve DataList Repeater denetimi kullanmak ne zaman karar vermeASP.NET 2.0 DataList denetimi ve ObjectDataSourceverimli veri disk belleği hakkında daha fazla bilgi için aşağıdaki websit ziyaret edin:

Verimli veri sayfalamayı ObjectDataSource ve ASP.NET 2.0 DataList denetimi ile ilgili genel bilgiler

-Bir kod çerçevesinden nedir?

Hepsi bir arada kod çerçevesinden farklı programlama dillerini kullanarak kod örnekleri, çoğu Microsoft geliştirme teknikleri gösterir. Her örnek dikkatle seçilmiş oluşan ve belgelenen bir ortak kodu senaryo göstermek için. -Bir kod çerçevesinden hakkında daha fazla bilgi için aşağıdaki Microsoft Web sitesini ziyaret edin:

http://1code.codeplex.com

Çok-bir kod çerçevesinden örneği bulmak nasıl

Çok-bir kod çerçevesinden örneği bulmak için ilgili anahtar sözcükler Microsoft ile birlikte "kbcodefx" için arama Web sitesini destekler. Veya, aşağıdaki Microsoft Web sitesini ziyaret edin:

Hepsi bir arada Framework kod örnekleri