Asp.Net AJAX Ogreniyorum Serisi 02
- Sevdanur GENC
- Feb 4, 2012
- 2 min read
UpdatePanel Nesnesi Asp.Net AJAX Ogreniyorum Serisi 00'da da bahsettigimiz gibi; Web Uygulamalarimizdaki guncelleme islemlerinde kullanacaginiz parcali kisimlarda sadece o parca ile ilgili kisimlari guncellemek icin kullanabileceginiz bir paneldir... Simdi bunlari sirasiyla aciklayalim ve birer basit uygulama gelistirelim.
UpdatePanel Nesnesi ;
Web Uygulamalarimizda, olusturdugumuuz ve de icerisinde bir ScriptManager barindirdigimiz yeni sayfalarimizda o sayfa icerisinde paneller halinde parcalayarak islemlerimizi ayri ayri guncellemeler ile calistirabilecegimiz bir kontroldur. Daha onceden yapmis oldugunuz Asp.Net uygulamalarinizda kullandiginiz Panel kontrolu ile karsilastirilabilir. Cunku tipki Panel kontrolu gibi UpdatePanel kontrolude uzerine ekledigimiz nesneleri icerisinde barindirarak calisabilir. Tabi en bastan beri dedigimiz sayfalari parcalara bolerek guncelleme yapma islemi iste simdi burada fark gosteriyor olacaktir. Cunku kullandigimiz UpdatePanel kontrolu ile sayfa icerisinde ki her bir bolum, parca yada panel olarak adlandiracagimiz kisimlar kendi iclerinde update islemlerini gerceklestiriyor olacaklardir. UpdatePanel'in properties'ine goz attigimizda bizim en cok isimize yarayacak ve ister istemez en cok kullanacagimiz ozellik olan Triggers ozelligini gormekteyiz.
Triggers Ozelligi ;
Ister istemez bu ozelligi kullaniyoruz cunku UpdatePanel kontrolunun olaylarini (event'larini) yine bu kontrolun Triggers Koleksiyonuna eklemek bizim icin bir secenektir, mecburi bir islem degildir. Adindanda anlasilabilecegi gibi bir tetikleme olayi gerceklestirmektedir. Birbirini tetikleyerek calisacak ve update islemlerini gerceklestirecektir. Bu koleksiyona eklenen kontrolun icerisindeki olaylari asenkron bir sekilde butunuyle sunucuya gondermeye baslamasi mumkun olacaktir. Bu olaylari belirtebilmemiz icin Triggers ozelligi yaninda ki uc noktali kutucu tiklayarak karsimiza gelen UpdatePanelTrigger Collection Editor penceresi yardimiyla olaylarimizi ekleyebilir ve duzenleyebiliriz.
Uygulama ;
Simdi dilerseniz basit bir uygulama ile UpdatePanel nesnesini ve Triggers ozelligini inceleyelim...
Oncelikle Visual Studio'da yeni bir Web Application projesi baslatalim, ve icerisinde yeni bir Web Form olusturalim. Bu Web form'um design kismina yandaki tools icerisine aktarilmis olan Ajax Extensions arac kutusu vasitasiyla ScriptManeger nesnesini design gorunumu icerisinde ki body'nin icerisine surukleyerek birakalim(!) Hatirlarsaniz; Bunu yapmamizda ki sebep; bu kontrol tasarim ekraninda tum Ajax kontrollerinin en ustunde olmasi gerekiyor ki uygulama icerisinde ki tum Ajax nesnelerinin scriptlerine ulasabilsin.
Hemen ardindan Uygulamaya bir UpdatePanel surukleyerek birakalim, ki bu nesne sayesinde ProgressBar’da herhangi bir degisme olmadan yani PostBack islemi gerceklesmeden kullanicilara verileri tekrardan aktarabilmemizdir.
Ve yine panel icerisine birer adet Label ve Button nesneleri ekleyelim...
Panel uzerinede asagida ki gibi Triggers ozelliginden AsyncPostBack i Add butonu ile Members listesine ekliyoruz. Hemen ardindan yan tarafta Behavior sekmesinde ControlId' yi Button1 ve EventName' ini Click olarak seciyoruz.
Peki kod tasarimlarimiza Triggers komutlari nasil eklenmis hemen gorelim ;
WebForm.Aspx Kaynak Kodu ;
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Isim Yazdir..." onclick="Button1_Click" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
WebForm.Aspx.Cs Kaynak Kodu ;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication1
{
public partial class WebForm7 : System.Web.UI.Page
{
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Nano'nun Gunlugu";
}
}
}
Gelistirdigimiz basit uygulamanin ekran ciktisi asagida ki gibidir...
Sirada ki ilgili makale icin ; Asp.Net Ajax Ogreniyorum Serisi 03 ; https://sevdanurgenc.com/archives/1532
Comments