31 Mart 2016 Perşembe

C# ref/out Anahtar Sözcükleri Kullanımı

     Bu yazımda sizlere çok kısa olarak c# üzerinden ref/out parametre yapılarını anlatıyor olacağım.Bu yapıları hemen herkesin bildiğini varsayabiliriz, ama bilmeyen arkadaşlar için şu kısa ve öz olarak şu şekilde anlatabiliriz.

ref Anahtar Sözcüğü :
    Normalde metodlara parametre olarak geçirilen değer tipleri aslında kopyalanarak gönderilirler. Metod içerisinde parametre olarak gönderilen değerler üzerinde aslında işlem yapılmaz, bellekteki kopyaları üzerinde işlemler yapılır ve metod bittiğinde bellekte tutulan bu kopyalar silinir. Dolayısıyla metod geri dönüşlerinde parametre olarak gönderilen değer tiplerinde herhangi bir değişiklik olmaz. Fakat bazen parametre olarak gönderilen değer tiplerini referanslarıyla birlikte  yani bir nevi nesnenin kendisini göndermek isteyebilir ve bu gönderdiğimiz parametre üzerinde işlemlerin yapılmasını isteyebiliriz. C ve C++ dillerinde bunun için Pointer yapısı kullanılırken, C# dilinde ref anahtar sözcüğü kullanılır.
   Bunu kısa bir örnekle şu şekilde gösterebiliriz.

Örnek 1 :
  Hemen bir web form oluşturup içine bir Listbox nesnesi attık, "Islem" ve "RefIslem" adında 2 metod yazarak çağırdık."Islem" metodu klasik 2 int değer alan bir metod, "RefIslem" metodu ise 2 tane int tipli referans alan metodtur."Islem" metoduna parametre olarak gönderilen değerlerin aslında bellekte birer kopyası oluşturulur, "RefIslem" metoduna ise referansları(adresleri, bir nevi kendileri) gönderilir ve kopya oluşmadan direk ilgili parametreler üzerinde işlemler yapılır.



Sonuç :







    Dikkat edilmesi gereken noktalar, "ref" anahtar sözcüğünün metod yazılırken ve çağırılırken kullanılmak zorunda olduğu ve ikinci olarak ref olarak verilen parametrenin, metod çağırılmadan önce ilk değerinin mutlaka verilmesi gerektiğidir.İlk değer verilmeden metod çağırılmaya çalışıldığında hata alınacaktır.

out Anahtar Sözcüğü :
     "out" anahtarı metodlarda geri dönüş amaçlı kullanılmaktadır. Normalde yazdığımız metodlarda return ile tek bir değer döndürülürken, "out" anahtarı ile birden fazla değer döndürülebilir. "out" anahtarı aslında "ref" anahtarı ile çok büyük benzerlik gösterir.Aralarında 2 temel fark vardır.

 -  ref kullanırken parametreye ilk değer atamak zorunlu iken, out kullanımında zorunlu değildir
 -  out anahtarının kullanıldığı metodlarda, out tipinde belirtilmiş parametreye mutlaka metod sonlanmadan önce geri dönüş değeri atanmalıdır. Aksi halde hata alınacaktır.

Örnek 2 :
   Şimdi bir önceki örnekteki gibi bir web form yaratıp, içine listbox attım.Daha sonra "OutIslem" adında bir metod yazıp, metodun parametre olarak gönderilen sayının karesini almasını ve aynı zamanda yarıya bölüp bu iki değişkeni return etmesini sağladım.






















Sonuç :







  Görüldüğü üzere "out" anahtarının kullanımı "ref" ile aynıdır, metod parametresi "out" olarak belirtilmişse, metodun çağırıldığı yerde de aynı parametre "out" anahtarı ile etiketlenmelidir.Aynı zamanda ilk değer vermek gibi bir zorunluluğumuz da yoktur.
  ref/out anahtarlı parametreler int,double,string,char,byte,bool ve bunlar haricinde data yapısı olarak kullanmak istersek List,Array,Class yapıları olabilir. Örneğin bir metoda out anahtarlı bir List<int> parametresi gönderilip, bu liste geri dönüş olarak alınabilir.


















Örnek 3 :
  Aslında Generic Type bölümüne başka bir yazımda değinecektim, ama elim değmişken ref/out anahtarlarının generic type yapıları içinde geçerli olduğunu göstermek istedim.Aşağıdaki örnekte generic array tanımlayıp, bu generic array içindeki elemanları aynı tipteki generic list' e atan örneği inceleyebilirsiniz.



30 Mart 2016 Çarşamba

USER CONTROL (ASP.NET KULLANICI KONTROL YAPISI)

      Bu yazımızda Web User Control yapılarından bahsediyor olacağız. Nedir bu User Control? diye soracak olursanız, User Control aslında hepimizin her zaman kullandığı Toolbox menüsünden sürükleyip forma bıraktığımız herhangi bir nesnenin kullanıcı tarafından biçimlendirildiği halidir.Masaüstü uygulamalarında veya web uygulamalarında kullanıcı tarafından istenilen şekilde tasarlanan formdur da denilebilir.Biz bu yazımızda ASP.Net Web User Control yapısından bahsediyor olacağız.
      User Contol, ASP.Net kontrol sarmalının en basit biçimidir.Aslında HTML ve arkada Code Behind (c#,vb..) birleşiminden oluşan .ascx uzantılı yapılardır.Her User Control kendi olaylarına sahip olup, hepsinin birer Page_Load olayı vardır.Normal bir web sayfası gibi tasarlanıp olayları yazılabilir. Fakat normal bir web formdan farkı, direk sayfa içinden çağırılamamasıdır.User Control yapılarının çağırılması ancak başka bir form içinden olabilir.Bunu şuna da benzetebilirsiniz, nasıl ki bir Textbox yada Combobox yapısına link verip çağıramıyorsak, bu yapıları bir web formun içine eklememiz gerekiyorsa aynı mantık.
      User Controller aslında birer sınıftır ve bu sınıfa ait değişkenler olabilir, bu değişkenler User Controlün kullanıldığı formun değişkenleri ile birbirine karışmaz.Tasarlanan User Control proje aynı içindeki tüm web formlarda kullanılabilir,çünkü projeye eklenen bir sınıftır.Bu User Controlün başka web uygulamalarında kullanılabilmesi için web control library şeklinde tasarlanıp, dll oluşturmak ve ve farklı projeler için Toolbox yapısından oluşturduğumuz bu Web User Control yapısını eklemek gerekmektedir.Bu yapıldıktan sonra herhangi bir Textbox,Table veya Panel'den farkı olmadan kullanılabilecektir.

Avantajları :
  1 - Programcının kendi ihtiyaçları doğrultusunda özelliştirilmiş kontroller yazabilmesini sağlar. Örnek olarak bir Textbox nesnesine sadece rakam girilebilmesi, ya da DateTime nesnesine başlangıç tarihi olarak bugünden önceki bir zaman diliminin girilememesi, veya ekrana belli formatlarda çıkartılacak bir Popup uyarı formunun tasarlanması verilebilir.Tüm bu kontroller defalarca tekrarlanarak yazılmak yerine User Control olarak 1 defa yazılıp, istenen sayfada bu yapı kullanılabilir
   2  -   Tamamen programcının hayal dünyasına kalmış bir şekilde, herhangi bir kısıtlamaya bağlı kalmazsızın tek başına bir nesne kontrolü için yazılabileceği gibi, birden fazla nesne kontrolü hatta belli standart form kontrolü olarak bile yazılabilir..Örneğin kullanıcı adı ve şifresi istenen ve bunu kontrol eden 2 textbox ve 1 butondan oluşan küçük bir form gibi.
  3  -  User Controller birbiri içerisinden çağırılabilir.Tasarlanan user control, başka user controllerde herhangi bi nesne olarak kullanılabilir.
 4  -  Bir user control, aynı web sayfası içinde birden fazla kullanılabilir.Bu herhangi bir karışıklığa sebep olmaz.Bunu bir formda birden fazla Label yada Textbox kullanabilmek gibi düşünebilirsiniz.
  5  -   ASP.Net User Controlleri Vb,C#  farklı dillerde yazılabilir.
  6 - User Control yapıları programcının kullanıcı ara birimini bölümlere ayırıp tekrar tekrar kullanabilmesine olanak verir.

User Control Oluşturabilmek İçin :
  1  -  Proje üzerine sağ tıklanıp Add - New Items - Web Form User Control seçilir ve isim verilerek kaydedilir.Bu işlem sonucunda .ascx uzantılı bir yapı oluştuğu görülür.
  2  -  Daha sonra bu yapı içerisine girilerek Toolbox kısmında herhangi bi nesne sürüklenip bırakılabilir yada HTML kodu ile eklenebilir, bu nesneye ait kontroller F7 ye basılıp Code Behind tarafında yazılabilir.

Örnek 1 :
   Daha öncekilerden farklı olarak Devexpress kullanarak, herhangi bir sayfada kullanıcıya uyarı yada açıklama vermek amaçlı bir popup kontrol yazıyoruz.Üstteki adımları tekrarlayıp "ucPopControl.ascx" adında bir user control yazıp,Code Behind tarafında Show adında bir metod olusturarak, içine parametre olarak göndereciğim string alanın ekrana çıkmasını sağladım.

ascx :







Code Behind :





















User Control yapımızı olusturduk.Şimdi bunu başka bir form içinde çağırabiliriz.Hemen projeye "Test.aspx" adında bir web form ekleyip, tasarladım user controlü sürükleyip bırakıyorum ve bu formun açılışta çıkmasını sağlamak için Page_Load da kontrolü çağırıp, içeriğini set ediyorum.

aspx :
Kontolü sayfaya sürükleyip bıraktıktan sonra sayfaya bu kontrolün Register edildiğini görebilirsiniz.

















Code Behind:













Sonuç :


















  Yukarıdaki örnekte yapmış olduğum popup control yapısını artık tüm web sayfalarına sıradan bir nesne gibi, ister uyarı ister bilgilendirme amaçlı kullanabiliriz. 

Örnek 2 :
    Şimdi ki örneğimizde ise kullanıcı adı ve şifresini isteyen bir control tasarlayalım.Hatta bir önceki örnekte tasarladığımız User Controlü bu Control içerisinde kullanalım.Böylelikle User Control yapılarının birbiri içerisinden çağırılabilen kontroller olduğunu görebiliriz.

design:

ascx:


























Code Behind :





















 Şimdi tasarladığımız bu User Control formunu web sayfası oluşturup kullanalım.Gerekli kontrolleri User Control kısmına yaptığımız için sayfanın code behind tarafında herhangi bir şey yazmama gerek kalmadan çalışacaktır.
aspx:















Sonuç :



















Örnek 3 :
  Son örneğimizde de kademeyi bir tık daha yükseltip, daha önce ki bir örnekte Repeater olarak kullandığım yapıya benzer Listview yapısı kullanarak herhangi bir siteye ait ürün resim ve özelliklerinin gösterilmesini sağlayan User Control tasarladım. Bu yapıda ürünlere ait resimler ve özellikler liste halinde gösterilecektir. Biz aslında bu listenin her bir Item'ını tasarlamış olacağız.

ascx:











Code Behind:
User Controlün, CodeBehind tarafında "ProductViewDataBind" adında bir metod yazıp, kontrolü kullanacağım yerden listeye bind etmek istediğim datayı parametre olarak yollamak istiyorum.























Şimdi bu tasarladığım User Control Formu, yeni bir web form oluşturup içine ekliyorum.Ekranda sadece bu listeyi göstermek amacında olduğumdan, tasarladığım user control nesnesini sürükleyip formun html tarafına bırakıyorum.

aspx:
















Code Behind :
Yeni oluşturduğum formun code behind kısmında, eklediğim User Control nesnesini dolduruyorum.Eklediğim kontrole ait "ProductViewDataBind" metodunu çağırıp, ilgili dataları bind ettiğimi görebilirsiniz.




























Sonuç :










Görüldüğü üzere ilgili klasöre 3 resim ekledim, ve bu resimlerin birer ürün resmi olduğunu düşünürsek, sitemizde ürün özelliklerini bu şekilde bir User Control tasarlayıp bunu farklı sayfalarda çağırarak gösterebiliriz.

Son olarak yaptığım örneklere ait Solution' u görmek isterseniz:





28 Mart 2016 Pazartesi

SERVER SIDE - CLIENT SIDE PROGRAMMING

      Bu yazımızda web siteleri yapılırken ki programlama çeşitlerinden bahsediyor olacağız.Kullanıcı ile etkileşime geçmek için dinamik web siteleri programlanırken yazdığımız kodların bir kısmı Server Side (Sunucu Taraflı) bir kısmı ise Client Side (İstemci Taraflı) çalışmaktadır.Daha açıklayıcı olmak gerekirse işlemler web sayfasının çağrıldığı istemci bilgisayarında yapılıp sonuçlar sunucuya gönderiliyorsa Client Side, istemciden aldığı verilerle işlemler sunucuda yapılıp sonuç istemciye gönderiliyorsa Server Side taraflı programlamadan bahsediyor olacağız.

      Yazılan kodların Server Side taraflı mı yoksa Client Side taraflı mı çalıştığını bilmemiz ve hangi tür programlama yapacağımıza artı ve eksilerini bilerek ona göre karar veriyor olmamız gerekmektedir.Peki kodların çalıştığı ortamı bilmek bize ne fayda sağlayacak, sonuç itibariyle yazdığımız kodlar çalışıyor diyebilirsiniz.İşte sorunuzun cevabi..

Server Side Programming (Sunucu Taraflı Programlama)
      Yazılan kodların Client tarafında browser'a gitmeden Server Side da çalıştığı kodlama tarzıdır. Server Side Programlamada  kodlar sunucu üzerinde çalışır ve sonuçlar HTML olarak Client tarafına  (browser) gönderilir.Sunucu üzerinde çalışan kodların sonuçları HTML çıktısı olarak browser'a gönderildiği için hangi browser olursa olsun( IE, Chrome, Mozilla, Netscape) sorunsuz çalışacaktır.Peki bahsettiğimiz Server Side çalışan kodlamalar hangi dillerde yapılır?

-  C, C# ,C++ , VB
-  Java, Perl, Python, Ruby
-  ASP , PHP
-  Node.js (Javascript'in Sunucu tarafında çalışan halidir.Client side değil, Server Side Çalışır)(express.js)

   Programlama dilleri ile yazılan kod parçaları Server Side(Sunucu Taraflı) çalışmaktadır.Örnek verecek olursak web sayfasının herhangi bir yerinde yazılan C# kodu kesinlikle Server Side olarak çalışacaktır.Örnek verecek olursak herhangi bir E-Ticaret sitesinde kredi kartı ödemelerinin yazıldığı kodlar, yada önemli hesaplamalar gerektiren ve çok ciddi büyük datalar üzerinde yapılan performans gerektiren işlemler Server Side taraflı yazılırlar.



     ASP ve PHP kodları browserda görülmez, görülecek olan sadece kodlar sunucuda çalıştıktan sonra kodların ürettiği çıktılardır, yani HTML çıktısıdır.

Avantajları Nelerdir ?

1 - Kaynak kodları sunucudan istemciye gönderilmediği için, herhangi biri tarafından görülemez. Erişimi istenmeyen kişilere karşı güvenlidir.
2 -  Kaynak kodlar sunucu tarafında çalıştırıldığı için browser'a olan bağımlılık ortan kalkar, herhangi bir browser ile istenilen sayfa görüntülenebilir. Yani yazılan kodun IE' de çalışıp Mozilla' da çalışıp çalışamayacağı gibi bir derdimiz olmaz.

Dezavantajları Nelerdir ?

1 -  Kodların tamamı sunucu tarafında çalışacağından, sunucuya çok iş düşer. Örneğin Facebook yada LinkedIn gibi web sitelerinin aynı anda milyonlarca kullanıcıya açık olduğunu düşünürsek, tüm işlerin Server Side taraflı yaptırılmasının ne kadar maliyetli ve site performansının ne kadar düşebileceğini tahmin edebilirsiniz.
2 -  Server Side ağırlıklı kodlarla yazılan sitelerde, sunucu özelliklerinin (RAM, CPU, HDD) iyi olması gerekmektedir.

Örnek 1 :
    Şimdi Server Side taraflı çalışan küçük bir uygulama yapıp inceleyelim. Sayfanın Page_Load metodu görüldüğü üzere  C# ile Server Side olarak yazılmıştır.(Bu kod Code Behind tarafında da yazılabilir, farketmez. Ben kolaylık olması açıcından aspx sayfasının içine gömdüm. )

Aspx:


















Çıktısı :







Web sayfasına sağ tıklayıp kaynağı görüntülersek, Server Side taraflı kodların Cliente gönderilmediği için, browserda bu kodları göremeyiz.
















Örnek 2 :
      Şimdiki örnekte ise bir repeater nesnesine Server Side taraflı data bind etme işlemini gerçekleştirip, bu yapılan işleme Client tarafında herhangi bir şekilde erişilemediğini görelim.

Aspx :






































Çıktısı :
















Yine sayfa kaynağı görüntülenirse, rapeater nesnesinin doldurulduğu Server Side taraflı kodun sunucuda çalıştığı, browsera sadece sonuç üretilmiş HTML kodlarının gönderildiği görülebilir.


Client Side Programming (İstemci Taraflı Programlama)
     Yazılan kodların Client tarafında browser üzerinde çalıştığı kodlama tarzıdır.Bunun en güzel örneği Javascript kodlarıdır.Bu kodlar sunucuda çalışmaz, browser tarafından yorumlanırlar. Yapılan işlem, sunucuyla irtibata geçmeden Client bilgisayarında çalışıp sonuç ekrana basılır.
        Örnek verecek olursak herhangi bir buton üzerine tıklanınca herhangi bir nesnenin renginin değişmesi, ekranın herhangi bir yerindeki saat animasyonunun olması, yada herhangi bir event ile editörlerden herhangi birinin görünümünün değişmesi işlemleri Javascript ve CSS kodları ile Client Side taraflı yapılabilir.Peki Client Side çalışan kodlamalar hangi dillerde yazılır?

-  HTML,AJAX
-  Javascript ( Hemen hemen tüm tarayıcılarda desteklenmektedir)
-  VBScript, JScript, CSS
-  Flash, Silverlight

ile yazılan koda parçaları Client Side (İstemci Taraflı) çalışırlar.

Avantajları Nelerdir ?

1 -  Sunucuya fazla yük binmez, kodlar her istemcinin kendi bilgisayarında çalışır.
2 -  Editörlerin visible, enable, font, color gibi basit özelliklerini değiştirmek yada CSS animasyonları yapmak için Server meşgul edilmez, bu basit işlemler Client tarayıcısında halledilir.

Dezavantajları Nelerdir ?

1 -  Her browser her script dilini desteklemez. Eğer Client Side işlemlerle uğraşıyorsanız "Ekranı X browserda açtığımda sorunsuz çalışıyor, fakat Y browserda açınca çalışmıyor" gibi şeylerle bolca karşılaşırsınız. Bunun sebebi yazılan kodun tamamen Client tarayıcısına bağlı çalışmasıdır. Eğer tarayıcı ilgili script dilini desteklemiyorsa çalışmayacaktır
2 -  Kodlar Client' a olduğu gibi gönderildiğinden, sayfa üzerine sağ tıklanır ve sayfa kaynağına bakılırsa, yazılan kaynak kodlar görülebilir. Bu da güvensiz ve risk taşıyan bir yapıdır, ayrıca hiç bir kurum yada kuruluş ticari olarak sattığı yazılım ürünlerine ait kaynak kodların başkaları tarafından görülmesini istemez.
3 -  Olayın başka yönü de güvenliktir.Örneğin database insert, update işlemlerinin yapıldığı kaynak kodlar Client side taraflı yazılmışsa, kaynak kodlarını inceleyen birisi database bilgilerini, tablo adını, şifresini vs görebilecektir.Bu SQLInjection gibi yöntemlerle siteyi hack saldırılarına maruz bırakabilecek ve DB' nin silinmesi ihtimalini düşünürsek geri dünüşümü olmayan sorunlara dahi sebep olabilecektir.

Örnek 3 :
      Şimdi de Client Side Taraflı çalışan bir örnek yapıp inceleyelim.Textboxdan girilen sayı için arka planda bir takım hesaplamalar yapıp ekrana uyarı veren bir yapı olduğunu düşünürsek;

Aspx:


















Çıktısı :









Sayfa kaynağını görüntülersek, yazılan kodların ( biz Javascript olarak yazdık) Client'a gönderildiği ve kaynak kodda yapılan işlemin direk görülebildiği açık bir şekilde ortaya çıkacaktır.



















Örnek 4 :
     Son örneğimizde de kullanıcıdan adını girmesini istediğimiz ve bu girdiği isimle kullanıcıyı selamladığımız ufak bir uygulama yazalım. Tabi ki bunu Server'a hiç gitmeden, tamamen Client Side taraflı yapalım.

Aspx:
















Çıktısı:











   Bu işlemler sırasında sayfa PostBack olmaz, çünkü yazılan kodlar direk client tarafındaki browser' da çalıştırılmaktadır. Sayfanın PostBack olmaması bu tip küçük ama kullanıcıya büyük kolaylık sağlayan özellikler eklemek için önemli bir avantaj sağlamaktadır.

9 Mart 2016 Çarşamba

UPDATE PANEL MANTIĞI VE KULLANIMI

     Bu yazımızda Asp.Net Ajax uygulamalarında kullanılan Update Panel kontrolünün ne işe yaradığını, neden ve nasıl kullanıldığını anlatmaya çalışıyor olacağız.

   Update Panel web sayfalarında belli kısımlar, bölümler oluşturup bu bölümlerin Postback olmadan sayfadan bağımsız bir şekilde Asenkron olarak güncellenmesine yarayan Asp.Net kontrolüdür.Sayfamızda bir çok nesne ve veri olduğunu düşünürsek, bazen tüm sayfanın server-client arasında Postback ile gidip gelmesi hem yavaşlığa hem sistem performans sorunlarına sebep olabilir.Güncellenmesini istediğimiz küçük bir alan (Textbox,Grid vb) için tüm sayfanın gereksiz yere Postback olması genelde istemediğimiz bir durumdur.Bu tip durumlara Update Panel kullanılırsa Server-Client arasındaki gereksiz veri trafiği engellenmiş ve sadece Update Panel içindeki alanlar asenkron olarak güncellenmiş olur.

Update Panel kontrolü;

1 -  <ContentTemplate>  </ContentTemplate>
2 -  <Triggers>  </Triggers>

adında 2 kısımdan oluşmaktadır.Update Paneli kullanabilmemiz için sayfamıza ScriptManager'i eklememiz gerekmektedir.ScriptManager ,AJAX kontrollerini kullanırken mutlaka eklememiz gereken yönetici görevindeki kontroldür ve en üstte bulunması gerekmektedir.ScriptManager sayfaya ilgili AJAX kontrolleri için scriptlerin yüklenmesini ve yönetilmesini sağlar.Hem ScriptManager'i hem de UpdatePanel'i Toolbox -> AJAX Extensions altında bulabilirsiniz.



ContentTemplate(İçerik Şablonu):
        ContentTemplate içerisinde Asp.Net ve Html kontrolleri yer almaktadır.Bu alana Update Panelde güncellenmesini istediğimiz alanları eklemekteyiz.Web sitesinde yer alabilecek her türlü nesne,resim,yazı,metin bu alana eklenebilir.Update Panel kullanılırken sadece bu alan içerisindeki alanlar asenkron olarak güncellenecektir.

Triggers:
       Bu alanda ContentTemplate içeriğinin UpdatePanel dısındaki herhangi bir nesneye ait hangi olay veya olaylarla tetiklenip update edileceği belirtilir.Örnek verecek olursak, UpdatePanel dışına konulan bir butonun "click" eventi buraya eklenirse, butona her tıklandığında sayfa PostBack olmadan sadece UpdatePanel içi güncellenir.Ya da herhangi bir Dropdown'ın SelectedChange eventi UpdatePanel'e bağlanabilir.Trigger içine yazılabilecek 2 kavram mevcuttur.

"AsyncPostBackTrigger" : Bu seçenekle eklenen event sadece asenkron olarak PostBack olmadan UpdatePanel içerisinin güncellenmesini sağlar.(Default)
"PostBackTrigger" : Bu seçenekle eklenen event ise, sadece UpdatePanel içerisinin değil, PostBack yaparak tüm sayfanın güncellenmesini sağlar. UpdatePanel içerisine konulan tetikleyici bir kontrolün tüm sayfayı PostBack yapması istenildiği durumlarda kullanılabilir.

   UpdatePanel'in sayfadan asenkron olarak güncellenebilmesi için tetiklenmesi gerekmektedir.Bu tetikleme işlemi temel olarak tetikleyici kontrolün(Buton,Dropdown,ComboBox vs) yerine bağlıdır.Durumlar bu kontrolün UpdatePanel'in içinde veya dışında  olmasına göre değişecektir.

Örnek -1 :
      İlk örneğimizde UpdatePanel kullanılmadığı zaman sayfanın tümünün her butona tıklandığında PostBack olarak yeniden yüklendiğini göreceğiz.

Aspx:


Code Behind:

Çıktısı:














      Görüldüğü üzere sayfada UpdatePanel kullanılmadığı için, textbox alanına herhangi bir yazı girilip her butona tıklandığında kırmızı çizgili alanın(burası sonraki örnekte UpdatePanel içine alınacak)içi ve dışı PostBack ile aynı anda refresh olacaktır.Sayfanın,butona her basıldığında PostBack olduğunu üst kısımdaki "refresh" ifadesinden de takip edebilirsiniz.

Örnek -2 (Tetikleyici Konrol UpdatePanel İçinde):
        Şimdi aynı örnekteki kırmızı çizgili alanımızı UpdatePanel içine alalım.Böylelikle butona her tıklandığında yalnızca kırmızı çizgili alanın güncellendiğini, sağ tarafındaki UpdatePanel dışında kalan alanın safya PostBack olmadığı için güncellenmediğini izleyelim.CodeBehind tarafında hiç bir değişiklik yapmadan sadece Aspx tarafında aşağıdaki değişikliği yapalım.

Aspx:















Çıktısı:















    Görüldüğü gibi text alana girilen yazıdan sonra butona her basıldığında sadece UpdatePanel içerisi güncellenmiş,UpdatePanel dışında kalan alanlar sayfa PostBack olmadığı için güncellenmemiştir.CodeBehind kısmında herhangi bir değişiklik yapmadık ve sağ taraftaki div içeriği update olmadı.Bu bize sayfanın PostBack olmadığını,UpdatePanelin doğru çalıştığını gösterir.Konuyu daha iyi kavramak adına UpdatePanel dışına bir buton koyup, bu butonun eventinde sağ taraftaki div içeriğini olduğu gibi yazdırmayı denerseniz, o zaman yeni eklediğiniz butona her tıkladığınızda sayfanın komple PostBack olduğunu görür ve sağ taraftaki div içeriğinin update olduğunu görebilirsiniz.

Soru ?
     UpdatePanel içerisindeki "Trigger" alanını boş bırakmamıza rağmen UpdatePanel nasıl olduda tetiklendi? Eğer "Trigger" alanı boş bırakılarak da UpdatePanel tetkilenebiliyorsa bu alan neden var?

  UpdatePanelin  "ChildrenAsTrigger" özelliğinin default değeri "true" olduğu için ("UpdateMode" özelliğinin de default olarak "Always"), UpdatePaneli tetikleyecek kontrol eğer UpdatePanel içerisinde yer alıyorsa herhangi bir trigger yazmadan otomatik olarak UpdatePaneli tetikleyecektir.Eğer bu değer "false" yapılırsa, o zaman UpdatePaneli tetikleyecek olan kontrol, UpdatePanel içinde dahi olsa otomatik olarak tetiklenmez ve trigger alanında belirtmemiz gerekecekti.Tabi "ChildrenAsTrigger" özelliğinin "false" olabilmesi için "UpdateMode" özelliğinin "Conditional" a çekilmesi gerekmektedir.

Örnek -3 :













     Yukarıdaki gibi tanımlamalar yapılırsa, butona istediğiniz kadar tıklayın UpdatePanel güncellenmeyecektir.

Örnek -4 :
      UpdatePanelin güncellenebilmesi için aşağıdaki gibi Trigger tanımlanması gerekecektir.Bu tanımlamadan sonra butona basıldığında UpdatePanel tetiklenecek ve içeriği asenkron olarak güncellenecektir.














   UpdatePanelin Trigger ve diğer özelliklerini Aspx sayfasında direk olarak yazabileceğiniz gibi, dizayn moda geçip "Properties" üzerinden de yapabilirsiniz, Aspx sayfasına döndüğünüzde ilgili kodların otomatik olarak yaratıldığını göreceksiniz.
















Örnek -5 (Tetikleyici Kontrol UpdatePanel Dışında):
      Tetikleyici kontrol nesnenin UpdatePanel içerisinde olması durumunda default ayarlarda tetikleme yapması için herhangi bir Trigger yazmamız gerekmediğinden bahsettik.Fakat tetikleyici kontrol UpdatePanel dışında bir yerde ise ve biz bu kontrolle UpdatePaneli tetiklemek istiyorsak "ChildrenAsTrigger" özelliğine bakmaksızın Trigger tanımlaması yapmak zorundayız.Eğer ilgili kontrolü UpdatePanele bağlamazsak yani Trigger tanımlaması yapmazsak, tüm sayfanın PostBack olacağını unutmayalım.

      Şimdi ekranımıza bir UpdatePanel ekleyip, içine sistem tarih ve saatini basıp, ayrıca butona her basıldığında sırayla açılıp kapanacak 2 panel ekleyelim.Bunlardan sonra da UpdatePanel dışına sistem tarih saati basıp ayrıca 2 adet buton ekleyip, bir tanesini Trigger olarak UpdatePanele bağlayalım.

Aspx:



















CodeBehind:
























Çıktısı:












     Sonuçta görüldüğü gibi "Button1" kontrolünün "Click" eventini UpdatePanele bağladığımız için, bu butona basılınca panel içerisi PostBack olmadan asenkron olarak güncellendi(saatlerin farklı olduğuna dikkat ediniz, ilk açılışta saatler aynıydı).Button2' ye tıklandığında, bu butonun UpdatePanelle herhangi bir ilgisi olmadığı için sayfa komple PostBack olur ve hem UpdatePanel içi, hemde UpdatePanel dışı aynı anda senkron bir şekilde güncellenir.

Birden Fazla Update Panel Kullanımı (Önemli Nokta):
      Bir sayfada birden fazla UpdatePanel olabilir.UpdatePanel tanımlamalarında herhangi bir sıkıntı yada değişiklik olmaz.Burada dikkat edilmesi gereken nokta örneğin A ve B adında 2 UpdatePanel olduğunu düşünürsek, birini tetikleyen olayın diğerini de tetikleyeceği gerçeğidir.Aslında A UpdatePanelinin trigger olayının, B panelini tetiklememesi gerekir diye düşünülebilir, bunun sebebi UpdatePanellerin "UpdateMode" özelliklerinin "Always" olmasıdır. Örneğin A UpdatePanelin "UpdateMode" özelliği "Conditional" olarak değiştirilirse, B UpdatePanel'in tetikleyicisinden etkilenmeyecektir.Dolayısıyla A paneli sadece kendi trigger tanımında yer alan kontrol tarafından tetiklenecektir, fakat B paneli halen "Always" olduğundan A panelin kontorü tarafından da tetiklenecektir."UpdateMode" özelliği "Always" olan UpdatePaneller sayfada yer alan herhangi bir UpdatePanel tetiklendiği zaman otomatik olarak tetiklenecektir.

İç İçe Update Panel Kullanımı:
    Bazı durumlarda iç içe UpdatePanel kullanılmak istenebilir.Örneğin ekranın tamamını kaplayan bir UpdatePanel düşünülürse, bu UpdatePanelin içine 1 veya 1 den fazla UpdatePanellerde gömülebilir.Eklenen bu UpdatePanel' lerinde birbirinden farklı asenkron olarak güncellenmesi istenebilir.Bu durumda yine "UpdateMode" özelliğinden faydalanarak iç içe geçmiş UpdatePanel yapılarının birbirinden bağımsız tetiklenmesini sağlıyor olacağız.

Örnek -6 :
     Şimdiki örneğimizde dış kısma bir master UpdatePanel ekleyip içerisine sistem saatini yazdıralım ve birde otomatik tetikleyici buton ekleyelim.Daha sonra master UpdatePanelin ContentTemplate kısmına bir tanede child UpdatePanel ekleyelim, aynı işlemleri bu panele de uygulayalım.Aşağıdaki koddan dikkat edersiniz her iki panelin de "UpdateMode" özelliği default "Always" olduğu için herhangi birinin tetikleyicisi diğerini de tetikler ve ekrandaki sistem saati aynı anda güncellenir.

Aspx:




















Çıktısı:























  Sonuçta da görüldüğü gibi hangi butona tıklanırsa tıklansın, UpdatePanellerin ikisi de aynı olaydan tetikleniyor.Sistem saatinin aynı olmasından anlayabilirsiniz.

Örnek -7 :
   Şimdi child UpdatePanel tetikleyicisini Master panelin tetikleyicinden ayırmak istiyorum, bunun için tek yapmam gereken şey  master panelin "UpdateMode" özelliğini değiştirip "Conditional" yapmaktır.Böylelikle master paneli sadece kendi tetikleyicisine bağlamış oluyorum, child UpdatePanel refresh butonuna tıkladığımda sadece child panel içeriğinin güncellendiğini, master panelin güncellenmediğini görebilirim.

Aspx:

















Çıktısı:

























Not: 
  İç kısımda yer alan child UpdatePanelin "UpdateMode" özelliğini değiştirip "Conditional" yapmanız herhangi bir şey değiştirmeyecektir, içinde bulunduğu Master UpdatePanel'in tetikleyicisinden her halukarda otomatik olarak tetiklenecektir.Dolayısıyla master panelde yer alan buton her durumda içinde bulunan tüm UpdatePanelleri tetikleyecektir.

Örnek -8 :
   Konunun daha net anlaşılması için bir alt kısma bir panel daha ekleyip, tüm panellerin "UpdateMode" özelliğini değiştirip "Conditional" yapalım.Bu durumda master panele ait buton iç kısımdaki tüm panelleri tetikleyecek, fakat child1 ve child2 paneli içindeki butonlar sadece kendi UpdatePanellerini tetikleyip, diğer panellerden bağımsız çalışacaklardır.

Aspx:

























Çıktısı: