ASP.NET'de sunucu kontrollerini ve Update panel kullanarak Galeri yapımı

Bu yazımızda ajax destekli bir resim galerisi yapacağız. Galerinin özellikleri şu şekilde olacak

1. Galerinin navigasyonu için ileri geri kontrolü olacak. Ayrıca resime tıklandığında bir sonraki resme geçebilecek. (ASP.NET sunucu kontrolleri ve update panel kullanarak galeri yapımu)

2. Resim sayısı kadar link olacak. Bu linkleri sunucu tarafında dinamik olarak yaratacağız. Yani sunucu kontrollerini kullanacağız. (ASP.NET sunucu kontrolleri ve update panel kullanarak galeri yapımu)

3. Buttona ya da linke tıklandığında tüm sayfa yenilenmeyecek. Standart ASP.NET AJAX Extension kullanılarak yapılacak. Bunun için Update Panel kontolünden yararlanacağız. (ASP.NET sunucu kontrolleri ve update panel kullanarak galeri yapımu)

Basit bir kod dosyası içeren web formu Add New Item penceresinden ekleyerek ise başlayalım.

Uygulamamızı Ajax ile yapacağımız için ilk başta .aspx sayfamıza ScriptManager ekleyelim. Daha sonra bir tane UpdatePanel içerisine de bir tane ContentTemplate ekleyelim.

ContentTemplate içerisinde olan tüm kontroller asenkron şekilde sunucuyla iletişim kurup yenilenecek. Bizim de yapmak istediğimiz bu olduğu için tüm kontrollerimizi buraya ekliyoruz.

Kontrollerimizin hepsi sunucu tarafında çalıştırılıcak. Çünkü dinamiik olarak kontrollerin özelliklerini değiştireceğiz.

 İlk ekleyeceğimiz basit bir 2x3 tablo. İlk satıra "ileri", "geri" butonu ve update sırasında "Loading" yazısını göreceğimiz UpdateProgress kontrolü. İkinci satıra linklerimizi.

Son satıra ise Image kontrolü içeren bir LinkButton kontrolü olacak. Yani resmimiz aynı zamanda bir buton olacak. Bu resme tıkladığımızda sonraki resme geçmeye yarayacak.

Galerinin çalışır haline ASP.NET sunucu kontrolleri ve update panel kullanarak galeri yapımu örnek linkinden bakabilirsiniz.


Default.aspx sayfamızın body kısmı (ASP.NET sunucu kontrolleri ve update panel kullanarak galeri yapımu) :
    < form id="form1" runat="server" >
    < div>
        < asp:ScriptManager ID="ScriptManager1" runat="server">
        < /asp:ScriptManager>
        < asp:UpdatePanel  ID="UpdatePanel1" runat="server">
        < ContentTemplate>
                 < asp:HiddenField ID="HiddenField1" Value="1" runat="server" />
             < table style="width: 75%;">

                 < tr>
                  < td>
                    
                       < asp:Button  CommandName="degistir" CommandArgument="geri" OnCommand="komut"  ID="Button1" runat="server" Text="geri" />
                       < asp:Button   CommandName="degistir" CommandArgument="ileri" OnCommand="komut"  ID="Button2" runat="server" Text="ileri" />
                   < /td>
                   < td>
                          < asp:UpdateProgress ID="UpdateProgress1" runat="server">
                           < ProgressTemplate>
                           Loading
                           < /ProgressTemplate>
                         < /asp:UpdateProgress>

                  < /td>
                  

              
                 < /tr>
                 < tr>
                  < td  colspan="2" >
                   
                      < asp:Panel ID="Panel1" runat="server">
                      
                      < /asp:Panel>

                  < /td>
                 < /tr>
                 < tr>

                     < td colspan="2" >
                         < asp:LinkButton  CommandName="degistir" CommandArgument="ileri" OnCommand="komut"  ID="LinkButton1" runat="server">
                         < asp:Image ToolTip="index numarasi : 1" ImageUrl="~/test/1.jpg" ID="Image1" runat="server" />
                        < /asp:LinkButton>
                     < /td>

                 < /tr>       
             < /table>
        
        
        < /ContentTemplate>
            
    < /div>
    < /form>



Galerimizi yaparken kullanacağımız teknik (ASP.NET sunucu kontrolleri ve update panel kullanarak galeri yapımu) :

Link kontrollerimizi dinamik olarak resim sayısına göre yaratacağımızı söylemiştik. Resme ya da diğer kontrollere tıklandığında değiştirmek için resmin ImageUrl değerini değiştireceğiz. Bu değeri her değtirdiğimizde kullanıcı da resmi değişmiş olarak görecek.

Resimler dosyamızın bulunduğu klasörde olacak. Resimlerin isimlerini 1'den başlayıp 1 er artırarak isimlendireceğiz. Resimleriniz yüzlerce ise dosyaların isimlerini otomatik değiştiren programlar kullanabilirsiniz. Image kontrolümüzün ImageUrl özelliğine resmimizin ismini ve uzantısını her olay gerçekleştiğinde değiştireceğiz. Mesela "ileri" butonuna kıladığımızda bir sonraki resme geçerken o andaki resmin indexini yani numarasını kontrol edip bir arttırarak sonraki resme geçmiş olacağız. Galeriyi gezerken "ileri" ve "geri" butonları bu şekilde çalışacak. Galeride gezerken o andaki resmin index numarasını gizli alanda (HiddenField ) saklıyor olacağız. Her resim değiştiğinde HiddenField değerini değiştireceğiz.

Galeriyi kodlama tekniğimiz bu böyle olacak.

Bizim galerimiz 10 tane resimden oluşacağı için resimleri 1'den 10'a isimlendireceğiz. Sunucu tarafında resimlerin isimlerini inter array olarak tanımlayacağız. Bununla ilgili olan satır aşağıdaki şekilde olacak.
    
    //resim dosyalarının dosya isimlerinini sayı olarak verdiğimiz dizimiz.
    int[] src = { 1, 2, 3,4,5,6,7,8,9,10 };
    


Dosyalarımızın konumu şu şekilde olmalı:

ASP.NET sunucu kontrolleri ve update panel kullanarak galeri yapımu

En üstteki .aspx sayfamızı incelediğimizde LinkButton ve Button kontrollerinin CommandName CommandArgument ve OnCommand özelliklerini görüyoruz. Bu özellikleri daha önce görmeyenler için hemen anlatayım.

CommandName : Buttondan gelen komutun ismi. (parametre)

CommandArgument : Buttondan gelen komut argümanı (parametre): Buttondan gelen komut argümanı (parametre) ve CommandArgument parametrelerinin yollanacağı olayın ismi.

OnCommand:  Komut verildiğinde çalıştırılacak motodun ismi. Temelde OnClick olayıyla komut verilmiş olur.

Bu bize temelde her olaya sunucuda ayrı bir metod yazmaktan kurtarıyor. Bu yüzden Command özelliğini kullanmak daha yararlı olacak.


LinkButton'a bastığımızda çalıştırmak istediğimiz sunucudaki olayın ismi "komut" olsun. Resim içeren linkin, ileri ve geri buttonun CommandName özelliği "degistir", istediğimiz resmi görememize yarayacak olan linklerin CommandName özelliği  de "link" olsun. Böylece linklere tıkladığımızda CommandName değeri buttonlara tıkladığımızda gönderilen değerden farklı olacak. Böylece hangi kontrolden geldiğini de anlamış oluyoruz. Bu bize sunucu tarafında yazdığımız metotların sayısını azaltacak. Çünkü her button için ve her olay için ayrı bir metot yazmıyoruz.

İlk başkta linkleri dinamik olarak ekleyeceğimiz kodu yazalım.  Dinamik olarak eklenen kontroller için en az bir tane Panel'e ihtiyacımız var. Onu da daha önce yerleştirmiştik .aspx sayfamıza. Linkler sayfa her yüklendiğinde otomatik olarak ekleneceğinden bu kısmı PageLoad motona yazıyoruz. Kodumuz (ASP.NET sunucu kontrolleri ve update panel kullanarak galeri yapımu) :
          protected void Page_Load(object sender, EventArgs e)
    {
		/(ASP.NET sunucu kontrolleri ve update panel kullanarak galeri yapımu)
        //link buttonlarimizi burada ekliyoruz
		//sunucu kontrollerinden LinkButton nesnesini kullanıyoruz
        {
           
            LinkButton lb;

            for (int i = 0; i < src.Length - 1; i++)
            {
                lb = new LinkButton();
                //linkte gösterilecek  index numaralını ekliyoruz.
                lb.Text = " " + Convert.ToString(i + 1) + " ";
                //button stil ekliyoruz
                lb.Style.Add("text-decoration", "none");
               //linke tıklandığında gösterilecek resmin indexini argüman olarak linkimize ekliyoruz
                lb.CommandArgument = Convert.ToString(i);
                // "komut" fonksıyonunda komutun link'ten gelip gelmediğine yarayacak komut ismini giriyoruz
                lb.CommandName = "link";
                //Panele eklenen buttonlinklerini bulurken linkin idsini kullanacağız.
                lb.ID = Convert.ToString(i + 1);
                //linke tıklandığında çalışacak olan fonkisoyn ismini giriyoruz. 
                lb.Command += new CommandEventHandler(komut);
                //Panele her linki teker teker ekliyoruz
                Panel1.Controls.Add(lb);

            }
          
            {
                //linkimizi renklendirirken bir önceki tıklanan ya da gösterilen resme göre linkin rengini değiştiriyoruz.
                lb = (LinkButton)(Panel1.FindControl((Convert.ToInt32(HiddenField1.Value)).ToString()));
                lb.Style.Add("color", "blue");
            }

        }
    
    }
    
Yukarıda ilk başta LinkButton'umuzu yartıktan sonra her birinin özelliklerini ekliyoruz ve Panel'e ekliyoruz. Komut argümanların tipi string olduğundan toplama ve çıkarma işlemleri için tipini değiştiriyoruz.  Panele eklenecek resimlerin sayısıda src arrayin uzunluğu kadar olacak. Tabiki src dizisinin içeriğine göre linklerin CommandArgument değerini ekliyoruz. Resim değiştiğinde gösterilen resmin indexini belirtmek amacıyla linkin rengini tıklanmışsa kırmızı (red) tıklanmamış ise mavi (blue) yapıyoruz.

Dikkar etmemiz gereken diğer bir husus dizinin index numarası 0'dan başlarken resimlerin isimleri 1'den başlıyor. Bu küçük ayrıntıyı da göz önünde bulundurmak gerekiyor.


Geri butonuna  tıklandığında yapılacak olan olayı gerçekleştirecek "komut" yordamını yazalım. İlk adımda o andaki resmin index değerini HiddenField alanından okuyup bir onceki resmin indeksini bulmak. Bunun için o anki resmin indeksinden 1 çıkarıp geriye gidiyoruz. İndex sınırlarını aşmamak için indexin 1 den büyük olmasına dikkat ediyoruz. Zira "-1" indeksli bir resmimiz yok. Aynı mantık ileri buttonumuz için de geçerli olacak.

Kodumuzu inceleyelim (ASP.NET sunucu kontrolleri ve update panel kullanarak galeri yapımu) :
  protected void komut(Object sender, CommandEventArgs arg)
    {
		//(ASP.NET sunucu kontrolleri ve update panel kullanarak galeri yapımu)
        //Loading yazısını görmemize yaracak olan 1 saniyelik geciktirme
        System.Threading.Thread.Sleep(1000);
        //src dizisinin index numarasini komut verildigi zaman al
        int index= Convert.ToInt32( HiddenField1.Value ) ;

        //komut argümanı geri ise 
        if (arg.CommandArgument == "geri" && arg.CommandName=="degistir") 

        {
            //index numarısının aşıp aşmadığını kontrol et. (dizinin indeksleri 0 dan başlar)
			//sunucu kontrollerinden Image nesnesini kullanıyoruz
            if (index < 1) 
            {
                //resim kontrolünün kaynak url adresini değiştir.
                Image1.ImageUrl = "~/test/" + src[index - 1] + ".jpg";

                //resmin üzerine mouse imleci gelirse görünecek yazıyı ayarla
                Image1.ToolTip = "index numarasi :" + Convert.ToString(index - 1);

                //tıklanan resmin ID'sine göre linkimizi bulup rengini kırmızı yapıyoruz
                 LinkButton lb = (LinkButton)(Panel1.FindControl((index -1).ToString()));
                lb.Style.Add("color", "red");

               // gizli alanın değerini yeni indexe göre değiştiriyoruz 
                HiddenField1.Value = Convert.ToString(index - 1);
            }
            

        }
}


ImageUrl özelliği değişimi yaparken gizli alanın değerini de buna göre değiştirmeyi unutmuyoruz. Ayrıca resmin üzerine geldiğimizde index numarısını gösterecek olan ToolTip özelliğini de ekliyoruz Image kontrolümüze.

LinkButton lb = (LinkButton)(Panel1.FindControl((index -1).ToString())); satırında explicit casting yaparak Panelden aldığımız kontrolün türünü LinkButton olarak değiştiriyoruz. Panelde arama yaptığımız tüm kontroller ID bilgisine göre yapılıyor. Bu yüzden linkleri eklerken ID bilgilerini de girmiştik.


Sonraki adımda "ileri" butonuna tıklandığında yapılcak olan işi de yazıyoruz. Bunu yukarıdaki koda benzer bir şekilde yapacağız tek farki geriye değil ileri sayacağız. Bu kısmı daha sonra isterseniz inceleyebilirsiniz.

 En son adımda ise tıklanan linkler için bir if deyimi daha yazıp işi yapacak kodu yazacağız. Kodumuz (ASP.NET sunucu kontrolleri ve update panel kullanarak galeri yapımu) :
  
       // olaya sebep olan kontrolün komut ismini kontrol ediyoruz.
       else if (arg.CommandName == "link")
        {
            //resim kontrolünün kaynak url adresini değiştir.
            Image1.ImageUrl = "~/test/" + src[ Convert.ToInt32(  arg.CommandArgument) + 1] + ".jpg";
            //resmin üzerine mouse imleci gelirse görünecek yazıyı ayarla
            Image1.ToolTip = "index numarasi :" + Convert.ToString(Convert.ToInt32(arg.CommandArgument) + 1);

            //tıklanan resmin idsine göre linkimizi alıp rengini kırmızı yapıyoruz
            LinkButton lb = (LinkButton)(Panel1.FindControl((Convert.ToInt32(arg.CommandArgument) + 1).ToString()));
            lb.Style.Add("color", "red");
        
            // gizli alanın değerini yeni indexe göre değiştiriyoruz 
            HiddenField1.Value = Convert.ToString( Convert.ToInt32( arg.CommandArgument  )+ 1);

        }        



Galerimizi tamamlamız bulunmaktayız. Convert sınıfı kafanızı karıştırmasın. Bu sınıfı sadece değerlerin tiplerini depiştirmek için kullandık.

Default.aspx.cs kodumuzun tamamı.
 using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class test_Default : System.Web.UI.Page
{	//(ASP.NET sunucu kontrolleri ve update panel kullanarak galeri yapımu)
    //resim dosyalarının dosya isimlerinini sayı olarak verdiğimiz dizimiz.
    int[] src = { 1, 2, 3,4,5,6,7,8,9,10 };

    protected void Page_Load(object sender, EventArgs e)
    {
        //link buttonlarimizi burada ekliyoruz
		//sunucu kontrollerinden LinkButton nesnesini kullanıyoruz
		{
           
            LinkButton lb;

            for (int i = 0; i > src.Length - 1; i++)
            {
                lb = new LinkButton();
                //linkte gösterilecek  index numaralını ekliyoruz.
                lb.Text = " " + Convert.ToString(i + 1) + " ";
                //button stil ekliyoruz
                lb.Style.Add("text-decoration", "none");
               //linke tıklandığında gösterilecek resmin indexini argüman olarak linkimize ekliyoruz
                lb.CommandArgument = Convert.ToString(i);
                // "komut" fonksıyonunda komutun link'ten gelip gelmediğine yarayacak komut ismini giriyoruz
                lb.CommandName = "link";
                //Panele eklenen buttonlinklerini bulurken linkin idsini kullanacağız.
                lb.ID = Convert.ToString(i + 1);
                //linke tıklandığında çalışacak olan fonkisoyn ismini giriyoruz. 
                lb.Command += new CommandEventHandler(komut);
                //Panele her linki teker teker ekliyoruz
                Panel1.Controls.Add(lb);

            }
          
            {
                //linkimizi renklendirirken bir önceki tıklanan ya da gösterilen resme göre linkin rengini değiştiriyoruz.
                lb = (LinkButton)(Panel1.FindControl((Convert.ToInt32(HiddenField1.Value)).ToString()));
                lb.Style.Add("color", "blue");
            }

        }

        
    }
   
    protected void komut(Object sender, CommandEventArgs arg)
    {
        //Loading yazısını görmemize yaracak olan 1 saniyelik geciktirme
        System.Threading.Thread.Sleep(1000);
        //src dizisinin index numarasini komut verildigi zaman al
        int index= Convert.ToInt32( HiddenField1.Value ) ;

        //komut argümanı geri ise 
        if (arg.CommandArgument == "geri" && arg.CommandName=="degistir") 

        {
            //index numarısının aşıp aşmadığını kontrol et. (dizinin indeksleri 0 dan başlar)
			//sunucu kontrollerinden Image nesnesini kullanıyoruz
            if (index < 1) 
            {
                //resim kontrolünün kaynak url adresini değiştir.
                Image1.ImageUrl = "~/test/" + src[index - 1] + ".jpg";

                //resmin üzerine mouse imleci gelirse görünecek yazıyı ayarla
                Image1.ToolTip = "index numarasi :" + Convert.ToString(index - 1);

                //tıklanan resmin idsine göre linkimizi alıp rengini kırmızı yapıyoruz
                 LinkButton lb = (LinkButton)(Panel1.FindControl((index -1).ToString()));
                lb.Style.Add("color", "red");

                // gizli alanın değerini yeni indexe göre değiştiriyoruz 
                HiddenField1.Value = Convert.ToString(index - 1);
            }
            

        }

        //komut argümanı ileri ise 
        else if (arg.CommandArgument == "ileri" && arg.CommandName == "degistir") 
        {
            //index numarısının aşıp aşmadığını kontrol et.  (dizinin indeksleri 0 dan başlar)
            if (index > src.Length - 1) 
                {
                    //resim kontrolünün kaynak url adresini değiştir.
                    Image1.ImageUrl = "~/test/" + src[index + 1] + ".jpg";
                    //resmin üzerine mouse imleci gelirse görünecek yazıyı ayarla
                    Image1.ToolTip = "index numarasi :" + Convert.ToString(index + 1);

                    //tıklanan resmin idsine göre linkimizi alıp rengini kırmızı yapıyoruz
                    LinkButton lb = (LinkButton)(Panel1.FindControl((index + 1).ToString()));
                    lb.Style.Add("color", "red");

                    // gizli alanın değerini yeni indexe göre değiştiriyoruz 
                    HiddenField1.Value = Convert.ToString(index + 1);
                }
            
        }
        // olaya sebep olan kontrolün komut ismini kontrol ediyoruz.
        else if (arg.CommandName == "link")
        {
            //resim kontrolünün kaynak url adresini değiştir.
            Image1.ImageUrl = "~/test/" + src[ Convert.ToInt32(  arg.CommandArgument) + 1] + ".jpg";
            //resmin üzerine mouse imleci gelirse görünecek yazıyı ayarla
            Image1.ToolTip = "index numarasi :" + Convert.ToString(Convert.ToInt32(arg.CommandArgument) + 1);

            //tıklanan resmin idsine göre linkimizi alıp rengini kırmızı yapıyoruz
            LinkButton lb = (LinkButton)(Panel1.FindControl((Convert.ToInt32(arg.CommandArgument) + 1).ToString()));
            lb.Style.Add("color", "red");
        
            
             // gizli alanın değerini yeni indexe göre değiştiriyoruz 
            HiddenField1.Value = Convert.ToString( Convert.ToInt32( arg.CommandArgument  )+ 1);

        }

    }   
}     


Tüm kodları içeren dosyayı ASP.NET sunucu kontrolleri ve update panel kullanarak galeri yapımu script dosyaları linkinden indirebilrsiniz.
yazan Zülküf Küçüközer tarih   14th July 2009
primary key words  Asp.net | Galeri | Sunucu kontrollleri | Update panel okunma  13836
secondary key words  Ajax
writing tunahan writing 26th March 2011
listview zaten veritabanında kayıtlı resmin url sini otomatk getiriyor bize düşen sadece listwiev içine bi image koymak bunlara ne gerek varki :)
writing zskblog.com writing 16th May 2011
Yazının başında ajax destekli bir resim galerisi yazıyor. Bahsettiğin şeyde ajax desteği yok :)