KMRT BSRN

"Hiç kimsenin ilgisine ihtiyaç duymadığın gün olgunlaşırsın. Hiç kimseden beklentiye girmediğin gün yara almazsın. Ve hiç kimseye bağımlı kalmazsan kazanırsın." OSHO

AJAX Extension ve Update Panel Hakkında ! (About AJAX Extension And Update Panel)

Yorum bırakın


AJAX Extension Visual Studio 2010 ‘da Toolbox’a dahil edilmiştir. Visual Studio’nun bundan önceki sürümlerinde kendimiz indirerek kuruyorduk. Toolbox üzerinde şu şekilde bulunmaktadır.

image

Bu yazıda kısaca AJAX Extension’ın UpdatePanel kontrolü ile ilgili bazı ipuçlarından bahsedeceğim. Update Panel kullananlar bilirler, AJAX işlemlerimizde bize JavaScript ile uğraşmadan işlemlerimizi yapmamızda süper kolaylıklar sağlayan bir kontrolümüzdür. Kısaca bahsetmek gerekirse, asenkron işlemlerimizi kolaylaştıran, bir web sayfasının tamamının sunucuya gönderilmeden ihtiyaç duyulan kadarının gönderilmesi ve sunucu üzerinde yapılmasını istediğimiz işlemi yaparak bize sonucun geri dönmesini sağlayan bir kontroldür.

Yazının ilerleyen bölümlerinde örnekleri ve web sayfanın sunucu üzerinde giden-gelen trafik verisinide sizlerle paylaşacağım. Böylece UpdatePanel’in bize sunduklarını daha iyi görebileceksiniz.

Şunuda belirtmek gerektiğini düşünüyorum. Toolbox ‘daki AJAX Extension kontrollerinden “Script Manager” kontrolü, diğer kontrollerin; Timer, Update Panel, Update Progress kullanılması için sayfanıza mutlaka eklemeniz gereken bir kontroldür. Çalışma zamanında bir görünüme sahip olmayan bir kontroldür. AJAX request’lerinin başlatılması, sonlanması ve ilgili javascript kütüphanelerinin yüklenmesinden sorumlu kontrolün ta kendisidir.


HARİCİ JAVASCRIPT KÜTÜPHANESİNİN KAYIT EDİLMESİ

Harici javascript dosyalarımızın Script Manager’a kayıt ettirilmesi ile AJAX Client Script kütüphanesine ulaşabilmemiz sağlanır. Böylece büyük JavaScript kodlarımızın ScriptManager ile kullanımındaki sorunlar giderilebilir. Ufak kodlar için sorun yaşanmayabilir fakat bu işlemin mutlaka yapılması gerekmektedir.

ASP.NET
<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference Path="myFile.js" />
    </Scripts>
</asp:ScriptManager>

 

JS
function SomeFunctions() {
    alert("Burada i?lem yapilabilir");
}

// Bu satir ile Script Manager 'a JS dosya yuklendigini bildiriyoruz.
if (typeof (Sys) !== "undefined") Sys.Application.notifyScriptLoaded();


SCRIPT MANAGER PROXY

Script Manager kontrolünün direkt ekli omadığı fakat dolaylı yoldan eklendiği WebPage ya da WebUserControl için ScriptManager nesnesine ulaşılmasını sağlar.


UPDATE PANEL – UPDATE MODE

Update Mode’un conditional olması ile bir conditional ajax request başlatıldığında sayfadaki request’i başlatan conditional alan ve “always” UpdateMode seçili alanlar sunucuya gider. “Always” olan zaten sürekli sunucuya gidecektir. “Conditional” olanlarda request’i başlatan alan sadece gidecektir. Eğer request’i “always” UpdateMode olan bir update panel başlattı ise “conditional” olanlar sunucuya gitmez.

ASP.NET
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="True" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:TextBox ID="t1" runat="server"></asp:TextBox><br />
                <asp:TextBox ID="t2" runat="server"></asp:TextBox><br />
                <asp:Button ID="Button1" runat="server" Text="Button1" OnClick="Button1_Click" /><br />
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
        <hr />
        <asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="True">
            <ContentTemplate>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
                <asp:Button ID="Button2" runat="server" Text="Button2" OnClick="Button2_Click" /><br />
                <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
        <hr />
        <asp:UpdatePanel ID="UpdatePanel3" runat="server" ChildrenAsTriggers="True" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox><br />
                <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox><br />
                <asp:Button ID="Button3" runat="server" Text="Button3"
                    onclick="Button3_Click"  /><br />
                <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>

 

C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace JSSampleAJAX
{
    public partial class WebForm2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e) {

        }

        protected void Button1_Click(object sender, EventArgs e) {
            this.Label1.Text = (int.Parse(this.t1.Text) * int.Parse(this.t2.Text)).ToString();
        }

        protected void Button2_Click(object sender, EventArgs e) {
            this.Label2.Text = (int.Parse(this.TextBox1.Text) * int.Parse(this.TextBox2.Text)).ToString();
        }

        protected void Button3_Click(object sender, EventArgs e) {
            this.Label3.Text = (int.Parse(this.TextBox3.Text) * int.Parse(this.TextBox4.Text)).ToString();
        }
    }
}

image

Fiddler ile request’lerin bayt cinsinden boyutları..

image

3 no’lu request ile sunucuya gönderilen ve sunucudan gelen update panel’lerin verileri.

1|#||4|295|updatePanel|UpdatePanel1|
<input name="t1" type="text" value="2" id="t1" /><br />
<input name="t2" type="text" value="3" id="t2" /><br />
<input type="submit" name="Button1" value="Button1" id="Button1" /><br />
<span id="Label1">6</span>

|303|updatePanel|UpdatePanel2|
<input name="TextBox1" type="text" id="TextBox1" /><br />
<input name="TextBox2" type="text" id="TextBox2" /><br />
<input type="submit" name="Button2" value="Button2" id="Button2" /><br />
<span id="Label2">Label</span>

4 no’lu request ile sunucuya gönderilen ve sunucudan gelen update panel’lerin verileri.

1|#||4|320|updatePanel|UpdatePanel2|
<input name="TextBox1" type="text" value="4" id="TextBox1" /><br />
<input name="TextBox2" type="text" value="5" id="TextBox2" /><br />
<input type="submit" name="Button2" value="Button2" id="Button2" /><br />
<span id="Label2">20</span>

5 no’lu request ile sunucuya gönderilen ve sunucudan gelen update panel’lerin verileri.

1|#||4|320|updatePanel|UpdatePanel2|
<input name="TextBox1" type="text" value="4" id="TextBox1" /><br />
<input name="TextBox2" type="text" value="5" id="TextBox2" /><br />
<input type="submit" name="Button2" value="Button2" id="Button2" /><br />
<span id="Label2">20</span>

|320|updatePanel|UpdatePanel3|
<input name="TextBox3" type="text" value="6" id="TextBox3" /><br />
<input name="TextBox4" type="text" value="7" id="TextBox4" /><br />
<input type="submit" name="Button3" value="Button3" id="Button3" /><br />
<span id="Label3">42</span>

 


UPDATE PANEL – TRIGGERS

Triggers’lar ile UpdatePanel dışındaki bir kontrolün UpdatePanel’i yenilemesi yani bir ajax request’i başlatması sağlanabilir. Yada bir UpdatePanel içindeki kontrolün başka bir UpdatePanel’in ajax request’ini başlatması sağlanabilir. Triggers’lar ile Update Panel içindeki kontrolün tüm sayfayı sunucuya göndermesi ve ajax request değil normal asp.net request yapmasıda sağlanabilir. UpdatePanel içindeki kontrollerin ajax request başlatmasının engellenmesi için “ChildrenAsTriggers” özelliğinin “False” olması gerekmektedir. Böylece ilgili Update Panel içindeki kontrollerin ajax request başlatması engellenmiş olur.

ASP.NET
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="True" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:TextBox ID="t1" runat="server"></asp:TextBox><br />
                <asp:TextBox ID="t2" runat="server"></asp:TextBox><br />
                <asp:Button ID="Button1" runat="server" Text="Button1" OnClick="Button1_Click" /><br />
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button4" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="Button4" runat="server" Text="Button" OnClick="Button1_Click" />
        <hr />
        <asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="True">
            <ContentTemplate>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
                <asp:Button ID="Button2" runat="server" Text="Button2" OnClick="Button2_Click" /><br />
                <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
        <hr />
        <asp:UpdatePanel ID="UpdatePanel3" runat="server" ChildrenAsTriggers="True" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox><br />
                <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox><br />
                <asp:Button ID="Button3" runat="server" Text="Button3" OnClick="Button3_Click" /><br />
                <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>
    </div>
    </form>
</body>

 

Button4’ün updatepanel dışından UpdatePanel1 ‘i sunucuya göndermesi.(UpdatePanel2’nin UpdateMode’u “Always” o sebeple o da gidiyor.)

1|#||4|297|updatePanel|UpdatePanel1|
<input name="t1" type="text" value="13" id="t1" /><br />
<input name="t2" type="text" value="2" id="t2" /><br />
<input type="submit" name="Button1" value="Button1" id="Button1" /><br />
<span id="Label1">26</span>

|303|updatePanel|UpdatePanel2|
<input name="TextBox1" type="text" id="TextBox1" /><br />
<input name="TextBox2" type="text" id="TextBox2" /><br />
<input type="submit" name="Button2" value="Button2" id="Button2" /><br />
<span id="Label2">Label</span>

Button1’in hem UpdatePanel1’i hem de UpdatePanel3 ‘ü sunucuya göndermesi.(UpdatePanel2’nin UpdateMode’u “Always” o sebeple o da gidiyor.)

1|#||4|297|updatePanel|UpdatePanel1|
<input name="t1" type="text" value="13" id="t1" /><br />
<input name="t2" type="text" value="2" id="t2" /><br />
<input type="submit" name="Button1" value="Button1" id="Button1" /><br />
<span id="Label1">26</span>

|303|updatePanel|UpdatePanel2|
<input name="TextBox1" type="text" id="TextBox1" /><br />
<input name="TextBox2" type="text" id="TextBox2" /><br />
<input type="submit" name="Button2" value="Button2" id="Button2" /><br />
<span id="Label2">Label</span>

|303|updatePanel|UpdatePanel3|
<input name="TextBox3" type="text" id="TextBox3" /><br />
<input name="TextBox4" type="text" id="TextBox4" /><br />
<input type="submit" name="Button3" value="Button3" id="Button3" /><br />
<span id="Label3">Label</span>

 


CODE BEHIND’ DA SCRIPT MANAGER’A ASENKRON POSTBACK KONTROLÜ TANIMLAMA

DesignTime ‘da yaptığımız işlemleri birde CodeBehind tarafında nasıl yapıldığına bakalım. Yani UpdatePanel’e bir ajax request başlatacak kontrolün eklenmesi ve bu kontrolün ilgili olayında UpdatePanel’i nasıl güncelleyeceğimize bakalım.

ASP.NET
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>

 

C#
using System;

namespace JSSampleAJAX
{
    public partial class WebForm4 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e) {
            this.Label1.Text = DateTime.Now.ToString();

            this.ScriptManager1.RegisterAsyncPostBackControl(this.Button1);
        }

        protected void Button1_Click(object sender, EventArgs e) {
            this.Label1.Text = "updated – " + DateTime.Now.ToString();
            UpdatePanel1.Update();
        }
    }
}

Fiddler ile gelen veri..

1|#||4|86|updatePanel|UpdatePanel1|
<span id="Label1">updated – 24.01.2012 16:28:48</span>

 


UPDATE PANEL’LERİ FAYDALI KULLANMAK / İÇ İÇE UPDATE PANEL KULLANIMI

Yazdığımız kod ve tasarımlarımızda sunucu ile ne kadar az veri alışverişinde olursak web sitemizin / web sayfamızın daha performanslı ve hızlı çalışmasını sağlarız. Ayrıca kullanıcıya da bir o kadar windows uygulamasındaki gibi rahatlık ve hissiyat vermiş oluruz. Bu konuyla ilgili aşağıdaki örneğimizde iç içe Update Panel’ler kullanılmadığı ve kullanıldığı zamanlardaki veri trafiğini inceleyeceğiz. Öncelikle kullanmadığımız durumu oluşturacağız ve bunun üzerinden devam edeceğiz.

ASP.NET
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Repeater ID="Repeater1" runat="server">
                    <ItemTemplate>
                        <asp:Label ID="Label1" runat="server" Text='<%# Eval("Deger") %>'>
                        </asp:Label>&nbsp;
                        <asp:Button ID="Button1" runat="server" Text="Snucuya Git" /><br />
                    </ItemTemplate>
                </asp:Repeater>
            </ContentTemplate>
        </asp:UpdatePanel>
        <hr />
        <hr />
        <asp:Repeater ID="Repeater2" runat="server">
            <ItemTemplate>
                <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                        <asp:Label ID="Label1" runat="server" Text='<%# Eval("Deger") %>'></asp:Label>
                        &nbsp;
                        <asp:Button ID="Button1" runat="server" Text="Snucuya Git" />
                        <br />
                    </ContentTemplate>
                </asp:UpdatePanel>
            </ItemTemplate>
        </asp:Repeater>
    </div>
    </form>
</body>

 

Code Snippet
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace JSSampleAJAX
{
    public partial class WebForm3 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e) {
            List<object> list = new List<object>();

            for (int i = 0; i < 10; i++) {
                list.Add(
                    new { Deger = "Deger-" + i.ToString() });
            }

            this.Repeater1.DataSource = list;
            this.Repeater1.DataBind();

            this.Repeater2.DataSource = list;
            this.Repeater2.DataBind();
        }
    }
}

image

Fiddler ile UpdatePanel1 in durumu..

1|#||4|2322|updatePanel|UpdatePanel1|

<span id="Repeater1_Label1_0">Deger-0</span>&nbsp;
<input type="submit" name="Repeater1$ctl00$Button1" value="Snucuya Git" id="Repeater1_Button1_0" /><br />

<span id="Repeater1_Label1_1">Deger-1</span>&nbsp;
<input type="submit" name="Repeater1$ctl01$Button1" value="Snucuya Git" id="Repeater1_Button1_1" /><br />

<span id="Repeater1_Label1_2">Deger-2</span>&nbsp;
<input type="submit" name="Repeater1$ctl02$Button1" value="Snucuya Git" id="Repeater1_Button1_2" /><br />

<span id="Repeater1_Label1_3">Deger-3</span>&nbsp;
<input type="submit" name="Repeater1$ctl03$Button1" value="Snucuya Git" id="Repeater1_Button1_3" /><br />

<span id="Repeater1_Label1_4">Deger-4</span>&nbsp;
<input type="submit" name="Repeater1$ctl04$Button1" value="Snucuya Git" id="Repeater1_Button1_4" /><br />

<span id="Repeater1_Label1_5">Deger-5</span>&nbsp;
<input type="submit" name="Repeater1$ctl05$Button1" value="Snucuya Git" id="Repeater1_Button1_5" /><br />

<span id="Repeater1_Label1_6">Deger-6</span>&nbsp;
<input type="submit" name="Repeater1$ctl06$Button1" value="Snucuya Git" id="Repeater1_Button1_6" /><br />

<span id="Repeater1_Label1_7">Deger-7</span>&nbsp;
<input type="submit" name="Repeater1$ctl07$Button1" value="Snucuya Git" id="Repeater1_Button1_7" /><br />

<span id="Repeater1_Label1_8">Deger-8</span>&nbsp;
<input type="submit" name="Repeater1$ctl08$Button1" value="Snucuya Git" id="Repeater1_Button1_8" /><br />

<span id="Repeater1_Label1_9">Deger-9</span>&nbsp;
<input type="submit" name="Repeater1$ctl09$Button1" value="Snucuya Git" id="Repeater1_Button1_9" /><br />

Fiddler ile UpdatePanel2 ‘nin durumu..

1|#||4|281|updatePanel|Repeater2_UpdatePanel2_7|
<span id="Repeater2_Label1_7">Deger-7</span>
&nbsp;
<input type="submit" name="Repeater2$ctl07$Button1" value="Snucuya Git" id="Repeater2_Button1_7" />
<br />

 

Böylece Update Panel ile ilgili birçok konuyu netleştirdik. Bu bilgiler ışığında yazdığınız kodlarda daha net görüşlere ve hıza önem vereceğinizi düşünüyorum. Kısaca değindiğimiz konular; AJAX Extension ile Update Panel ‘in bize sunulması, Harici JavaScript dosyalarının Script Manager ‘a kaydedilmesi, Script Manager Proxy, Update Panel ‘in Update Mode özelliği, Code Behind’da Script Manager’a Asenkron Postback Kontrolü Tanımlama, Update Panel’i faydalı kullanmak, iç içe Update Panel kullanmak..

Herkese faydalı olması dileğimle..

Reklamlar

Yazar: K. Murat BAŞEREN, MBA, MCP

I am a senior software developer, MCP, consultant, blogger, former chemist and software trainer. My interests range from software developer to technology. I am also interested in web development, education, and coffee.

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Connecting to %s