Arda Çetinkaya » Ajax http://www.minepla.net Yazılım ve geri kalan her şey ile ilgili arada saçmaladıklarım... Fri, 09 Dec 2011 08:42:33 +0000 en hourly 1 http://wordpress.org/?v=3.3 Microsoft Asp.Net Ajax ve mouse event’leri… http://www.minepla.net/2009/11/microsoft-asp-net-ajax-ve-mouse-eventleri/ http://www.minepla.net/2009/11/microsoft-asp-net-ajax-ve-mouse-eventleri/#comments Tue, 17 Nov 2009 15:32:32 +0000 Arda http://www.minepla.net/?p=672 Mouse event’lerini web uygulamasında yakalamak çeşitli javascript kütüphaneleri ile daha zevkli hale geldi. Bunlardan bir taneside Microsoft’un Asp.Net Ajax kütüphanesi. Oldukça basit ancak bir çok hamallık olarak nitelendirebileceğimiz işten kurtarıyor bizi…Aşağıda Asp.Net Ajax kütüphanesini kullanarak bir “div” i hareket ettirmeye başlıyoruz…Bundan sonraki yazım umarım sürükle bırak ile ilgili olacak.(Üşenmezsem…:))

Öncelikle http://www.asp.net/ajax/ adresinden Asp.Net Ajax’ın client *.js’lerini indirmeniz gerekmekte. İndirdiğiniz dosyalar arasından şimdilik MicrosoftAjax.js’i kullanıyor olacağız.Öncelikle bu basit örneğimiz için sayfamızın body kısmını oluşturuyoruz.Aşağıdaki kod parçacığını body tag’inin içine yazmamız yeterli olacaktır.

27 <form id=“form1″ runat=“server”>

28 <div id=“divMain” style=“width: 100%; height: 100%; background-color: Gray;”>

29 <div id=“divClickMe” style=“width: 200px; height: 200px; background-color: Red”>

30 </div>

31 X:<asp:Label runat=“server” ID=“lblXCor” Text=“”></asp:Label>

32 Y:<asp:Label runat=“server” ID=“lblYCor” Text=“”></asp:Label>

33 </div>

34 </form>

Bu kod ile aşağıdaki gibi bir görüntü elde edeceğiz.

body

Şimdi amacımız, bu kırmızı kareyi(div) gri alan içinde hareket ettirmek olacak, ki bunu da Asp.net Ajax’ın sağladığı kolaylıklar ile yapacağız.

Bunun için aşağıdaki kod bloğunu sayfamızın head kısmına ekliyoruz.

27 //Asp.Net Ajax Client API’sini sayfamıza ekliyoruz.

28 <script src=“MicrosoftAjax.js” type=“text/javascript”></script>

29

30 <script>

31 //PageLoad methodu,sayfamız yüklendiğinde istemci tarafında

32 //otomatikman çalışacaktır.Aynı Asp.Net’in server tarafında olduğu gibi

33 function pageLoad(sender, args) {

34

35 //Sys.UI.DomEvent namespace’inde ki addHandler methodu ile, DOM objelerine

36 //olay ataması yapabiliyoruz.Aşağıdaki kod bloğunda, divMain id’li div’lerde

37 //fare ile ilgili bir olay olduğu zaman hangi metodların çağırılacağını belirtiyoruz.

38 //Fareye tıklandığı zaman ShowWhatHappened metodu,

39 //Fare hareket ettiğinde de WhereIsTheMouse metodu çalışacaktır.

40 Sys.UI.DomEvent.addHandler($get(“divMain”), “mousedown”, ShowWhatHappened);

41 Sys.UI.DomEvent.addHandler($get(“divMain”), “mousemove”, WhereIsTheMouse);

42

43 }

44

45 function ShowWhatHappened(e) {

46 //Sys.UI namespace’indeki MouseButton nesnesi ile, istemci tarafında

47 //gerçekleşen olayın özelliklerini kontrol edebiliyoruz. Burada sol tuşa

48 //tıklandığını anlıyoruz.

49 if (e.button == Sys.UI.MouseButton.leftButton) {

50 //Farenin hareketlerine göre divClickMe div’inin yerini değiştiriyoruz.

51 $get(“divClickMe”).style.position = “relative”;

52 $get(“divClickMe”).style.top = e.offsetY;

53 $get(“divClickMe”).style.left = e.offsetX;

54 }

55

56 }

57 function WhereIsTheMouse(e) {

58 //Farenin kordinatlarını ekrana yazdırıyoruz.

59 $get(“lblXCor”).innerHTML = e.offsetX;

60 $get(“lblYCor”).innerHTML = e.offsetY;

61 }

62 </script>

Bütün bunlardan sonra, gri alan içerisinde faremizi tıkladığımız yere kırmızı kare hareket edecektir.Bazı işlemler bu tarz javascript kütüphaneleri ile oldukça kolay hale geliyor…Ne güzel değil mi…:D

<script src=”MicrosoftAjax.js” type=”text/javascript”></script>
<script>
function pageLoad(sender, args) {
Sys.UI.DomEvent.addHandler($get(“divMain”), “mousedown”, ShowWhatHappened);
Sys.UI.DomEvent.addHandler($get(“divMain”), “mousemove”, WhereIsTheMouse);
}
function ShowWhatHappened(e) {
if (e.button == Sys.UI.MouseButton.leftButton) {
$get(“divClickMe”).style.position = “relative”;
$get(“divClickMe”).style.top = e.offsetY;
$get(“divClickMe”).style.left = e.offsetX;
}
}
function WhereIsTheMouse(e) {
$get(“lblXCor”).innerHTML = e.offsetX;
$get(“lblYCor”).innerHTML = e.offsetY;
}
</script>
]]> http://www.minepla.net/2009/11/microsoft-asp-net-ajax-ve-mouse-eventleri/feed/ 0 PageMethods vs. UpdatePanel http://www.minepla.net/2009/01/pagemethods-vs-updatepanel/ http://www.minepla.net/2009/01/pagemethods-vs-updatepanel/#comments Fri, 02 Jan 2009 13:13:11 +0000 Arda http://www.minepla.net/?p=237 Asp.Net Ajax ile, Ajax teknolojisinden oldukça kolay bir şekilde yararlanabiliyoruz. Bazı şeyleri o kadar kolaylaştırıyor ki, nasıl çalıştığını fazla sorgulamadan kullanıyoruz. Peki doğru mu kullanıyoruz?
Bazı şeyleri ajax ile halledip, sayfalarımızın fonksiyonlarını genişletsekte aslında bir çok yanlış yapabiliyoruz. Bunlardan en büyüğü Asp.net Ajax ile beraber karşımıza çıkan UpdatePanel’i kullanma şeklimiz.. Update Panel kontrolü, Asp.net’de ajax destekli bir uygulama yapmak istediğimizde sanırım en çok kullanacağımız kontrol. Temel olarak yaptığı şey Partial Rendering. Yani sayfanın belli bir kısmını, server tarafından gelen bilgi ile yeniden Render etmek.

<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” onclick=”Button1_Click” Text=”Button” />
   
    </ContentTemplate>
    </asp:UpdatePanel>

Codebehind’da ise Button1_Click methodunuz vardır.
protected void Button1_Click(object sender, EventArgs e)
{
            Label1.Text = “arda”;
}

 Yukarıdaki kod örneğinde de, UpdatePanel’in içine koyduğumuz Button’a tıkladığımız zaman server tarafındaki methodumuz çalışacak ve sayfa postback olmadan iligli Label değişecektir. Buraya kadar herşey iyi hoş. Peki server’a ne gidiyor ne geliyor? Bu kadar basit bir işlem için sadece “arda” yazısının server tarafından gelmesini umuyoruz.Ya da öyle sanıyoruz. Ama Web Development Helper gibi programlar ile giden sorguları ve gelen sonuçları gözlemlediğimiz zaman gelen bilgi oldukça farklı.Komple HTML yapısında, kontrolümüzün client tarafında render edilmesi gereken hali,server tarafında render edilmiş olarak geliyor.

219|updatePanel|UpdatePanel1|

        <span id=”Label1″>arda</span>
        <input type=”submit” name=”Button1″ value=”Button” id=”Button1″ />|220|hiddenField|__VIEWSTATE|/wEPDwUJLTMyMjU1MTk5D2QWA

gIDD2QWAgIDD2QWAmYPZBYCAgEPDxYCHgRUZXh0BVphcmRhCmFyZGEKYXJkYQphc

mRhCmFyZGEKYXJkYQphcmRhCmFyZGEKYXJkYQphcmRhCmFyZGEKYXJkYQphcmRhC

mFyZGEKYXJkYQphcmRhCmFyZGEKYXJkYQpkZGRJeTB5jsLrxLhDSFm1xhBPamTKRA==

|48|hiddenField|__EVENTVALIDATION|/wEWAgKbzLDvAgKM54rGBm6DEpmB2Hi6tmqot

9F2a91GT/Sp|0|asyncPostBackControlIDs|||0|postBackControlIDs|||13|updatePanelID

s||tUpdatePanel1|0|childUpdatePanelIDs|||12|panelsToRefreshIDs||UpdatePanel1|2|

asyncPostBackTimeout||90|13|formAction||WebForm1.aspx|

Bu basit işlem için gönderdiğimiz request’in sonucu yukarıdaki gibi. Böyle bir işlem için oldukça büyük bir veri. Daha büyük ve geniş içerikli operasyonlarda bu çok daha büyük bir veriye dönüşecektir. Bandwidth gibi kısıtlamaları olan sistemlerde bence çok büyük bir sorun. Bunun dışında da performans açısından zaten genel olarak büyük bir sorun. Bu sorunu UpdatePanel’i kullanmadan yapabiliriz.PageMethods kavramı bu noktada ortaya çıkıyor. Ki bence Asp.Net Ajax’ın en güzel özelliği.PageMethods sayesinde, client tarafından, server methodlarını çağırabiliyor olmamız. Asp.Net Ajax ile çağırdığımız eğer PageMethods’un sonucu bize JSON olarak dönüyor.Bundan dolayı dönen veri oldukça basit ve sade oluyor.

<script type=”text/javascript”>
    function Click() {
        PageMethods.SomeMethod(OnSucceeded, OnFailed);
    }

    function OnSucceeded(result, userContext, methodName) {
        $get(‘Label1′).innerHTML = result;
    }

    function OnFailed(error, userContext, methodName) {
        $get(‘Label1′).innerHTML = “Hata oluştu.”;
    }
</script>
…………….
……….
…..
……
..

<asp:ScriptManager ID=”ScriptManager1″ runat=”server”    EnablePageMethods=”true”></asp:ScriptManager>
   
   
        <asp:Label ID=”Label1″ runat=”server” Text=”Label”></asp:Label>
        <asp:Button ID=”Button1″ runat=”server” OnClientClick=”Click();return false;” Text=”Button” />
  
 
Codebehind’da ise;

[WebMethod]
public static string SomeMethod()
{
    return “arda”;
}

Burada önemli olan noktalar, codebehind’dan çağıracağımız methodun WebMethod attribute ile tanımlanmış olması,static bir method olması ve tabi ki string dönüyor olması. MarkUp tarafında ise ScriptManager’da EnablePageMethods’un true olması gerekmekte. Aksi takdirde methodları çağıramazsınız.  Client tarafından çağıralan SomeMethod()’un dönüş değeri JSON formatında olacaktır.Yukarıdaki kod bloğundan javascript ile nasıl çağırıldığına dikkat etmek gerekiyor. PageMethods.SomeMethod(); şeklinde çağıralan methoda parametre olarak 2 tane fonksiyon gönderiyoruz ve bunları tanımlıyoruz. Bunlardan biri bu SomeMethod() methodunun başarılı bir şekilde çalışmasının sonucu çalışacak method(OnSucceeded) diğeri ise tam tersi durumunda hata oluştuğunda çalışacak method(OnFailed).Server tarafında çalışan SomeMethod() sorunsuz olarak çalışırsa client tarafında yapılacak olan değişiklikleri OnSucceeded methodunda yaparız. Burada altını çizmek istediğim nokta server tarafından bu request sonucu dönen değer.

{“d”:”arda”}

Bu değer sadece yukarıdaki gibi JSON formatında olacaktır, ve boyut olarakta diğer yönteme göre kıyaslandığında çok daha küçük olacaktır.İhtiyaca göre bu tarz şeyleri göz önüne alarak geliştirme yapmak uygulamalarımız için daha sağlıklı olacaktır.Şimdilik bu kadar,ilerleyen yazılarda çoooook daha ilginç ayrıntılara değiniyor olacağım.Çok gaza geldim sormayın :D

]]> http://www.minepla.net/2009/01/pagemethods-vs-updatepanel/feed/ 0 Hangi kontrol PostBack oluyor? http://www.minepla.net/2008/08/hangi-kontrol-postback-oluyor/ http://www.minepla.net/2008/08/hangi-kontrol-postback-oluyor/#comments Mon, 25 Aug 2008 06:56:27 +0000 Arda http://www.minepla.net/?p=145 Asp.net’de bazen hangi kontrolün PostBack olduğunu anlamamız gerekebilir.Hangi kontrol PostBack işlemini tetikliyor bilgisi, bir sonraki işler için oldukça gerekebiliyor,özellikle Partial Rendering tarzı Ajax uygulamalarında işimize yarayabilir.Aşağıdaki kod parçacağı ile bu işlemi yapabilirsiniz…

ScriptManager sm = ScriptManager.GetCurrent(this);
string controlId = sm.AsyncPostBackSourceElementID;
Control cntrl = this.FindControl(controlId);

 

]]> http://www.minepla.net/2008/08/hangi-kontrol-postback-oluyor/feed/ 0 Ajax Control Toolkit v3.0.20229 http://www.minepla.net/2008/03/ajax-control-toolkit-v3020229/ http://www.minepla.net/2008/03/ajax-control-toolkit-v3020229/#comments Tue, 04 Mar 2008 08:20:27 +0000 Arda http://www.minepla.net/?p=129 .NET Framework 3.5 ve Visual Studio 2008′e tamamen uyumlu olarak ACT’in yeni versiyonu çıktı.
http://www.codeplex.com/AtlasControlToolkit/Release/ProjectReleases.aspx?ReleaseId=11121 adresinden indirebilirsiniz.

]]> http://www.minepla.net/2008/03/ajax-control-toolkit-v3020229/feed/ 0 ASP.NET Ajax’da UpdatePanel ve Trigger http://www.minepla.net/2007/09/aspnet-ajaxda-updatepanel-ve-trigger/ http://www.minepla.net/2007/09/aspnet-ajaxda-updatepanel-ve-trigger/#comments Sun, 09 Sep 2007 14:52:10 +0000 Arda http://www.minepla.net/?p=85 Ajax Extensions 1.0 ile gelen ve sanırım en çok kullanılan kontrol olan UpdatePanel’den biraz bahsetmek istiyorum. Kendi yaptığım uygulamalarda oldukça sık kullanıyor olmam böyle bir yazı yazmam için beni tetikledi. Tetikledi derken, trigger mantığından da biraz bahsedeceğimi söylemek isterim. Bu yazıda basit bir UpdatePanel örneği ve bu UpdatePanel’i dışarıdan başka bir kontrol ile nasıl tetikleriz bundan bahsedeceğim. Umarım bir şekilde işinize yarayan bir şeyler olmuşmasını sağlar. Yapacağımız şey oldukça basit bir örnek olacak; RadioButtonList’den seçtiğimiz elemanlara göre UpdatePanel içindeki ASP.NET kontrolünü güncelleme.

Öncelikle Visual Studio ile bir ajax enabled web projesi açalım. Dikkat ederseniz açılan sayfanın kaynak kodlarına baktığınız zaman aşağıdaki gibi bir kod bloğu göreceksiniz.


Bu sayfamızda ajax kontrollerini çalıştırabilmemiz için gerekli ASP.NET kontrollerinden olmazsa olmazı. Mutlaka bu kod bloğu ajax olacak sayfalarda bulunmalı. Ajax Extensions ile birlikte gelen kontroller(UpdatePanel,UpdateProgress…) bu ScriptManager olmazsa çalışmıyor. Aşağıdaki gibi bir yapı oluşturacak şekilde toolkit’den gerekli kontrolleri sayfaya ekliyoruz.

arayuz.JPG

İlk olarak UpdatePanel,içine Text property’si “Deneme” olan bir label, daha sonra altına da bir tane RadioButtonList kontrolü ekliyoruz. UpdatePanel kontrolü ne yapıyor peki? Bütün bir sayfa post back olmadan ya da refresh olmadan belli bir bölgedeki içeriği değiştirmek için ve “Partial-page rendering” olarak adlandıralan işlemler için tasarlanmış bir ASP.NET kontrolü. Belli bir bölge olarak bahsettiğim yer UpdatePanel’in yer aldığı kısım oluyor. UpdatePanel’in içine koyacağınız her hangi bir kontrolü sayfa post-back olmadan güncelleyebilirsiniz. Sanırım bu basit açıklama UpdatePanel için birazda olsa yeterli olmuştur.UpdatePanel’i ve içine az önce bahsettiğim Label’ı eklediğiniz zaman kaynak kod tarafında şu şekilde bir kod bloğu oluşacaktır.

 

Şimdi burda önemli olan kısım ContentTemplate olan yer. ContentTemplate tag’ı içerisindeki olan kodlar yani kontroller UpdatePanel tarafından işleme alınacak kısımdır. Yani bir işlem yaptığınız zaman post-back olmadan değişmesini istediğiniz kontrolleri ContentTemplate içeriğine yazıyorsunuz.

Şimdi bu UpdatePanel’i tetikleyecek diğer kontrolümüzü oluşturalım.Yukarıda bahsetmiş olduğum RadioButtonList bu kontrolümüz olsun. Burda dikkat etmeniz gereken şey RadioButtonList kontrolünü UpdatePanel kontrolünün dışına yani tagından sonra herhangi bir yere yazmamız.RadioButtonList’e 3 tane item ekliyoruz.Ve AutoPostBack özelliğinin true olmasına dikkat ediyoruz. Eğer true yapmazsak, ajax olayı sayfada istediğimiz gibi çalışmayacaktır. Ve ayrıca RadioButtonList kontrolündeki item’lara tıklandığı zaman olmasını istediğimiz event’i yazıyoruz, yani OnSelectedIndexChanged.

OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
Büyük
Orta
Küçük

Ayrıca kod tarafında aşağıdaki şekilde SelectedIndexChanged olduğu zaman ne olmasını istiyorsak onu yazıyoruz.

protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
{
if (RadioButtonList1.SelectedValue == "Big")
{
Label1.Text = "Büyük";
}
else if (RadioButtonList1.SelectedValue == "Mid")
{
Label1.Text = "Orta";
}
else if (RadioButtonList1.SelectedValue == "Small")
{
Label1.Text = "Küçük";

}
}
Oldukça basit bir şekilde, tıkladığımız item’a göre UpdatePanel içindeki Label’ı güncelliyoruz.Buraya kadar umarım herşey anlaşılır gidiyordur. Şimdi yaratmış olduğumuz RadioButtonList kontrolü ile UpdatePanel’i ilişkilendireceğiz.Yani RadioButtonList’de seçili olan item UpdatePanel’de post-pack olmadan güncellenecek. Bunun için tekrar UpdatePanel kontrolüne dönüyoruz, ve ContentTemaplate tagından sonra Triggers tagını açıyoruz. Zaten Visual Studio size bu konuda yardımcı olacaktır.




Burda dikkat ederseniz bir tane asenkron post-back tetiği yarattık. (PostBackTrigger diye bir eleman daha olduğunu göreceksiniz, bu normal post-back eventleri ile tetiklenmesini sağlar)Yani basitçe bütün sayfa komple post-back olmadan belli bir kontrol ile updatePanel’i tetikleyeceğiz. Bunun için ControlID özelliğine hangi kontrol ile tetiklemek istiyorsak onun ID’sini yazıyoruz. Burada RadioButtonList1 id’li kontrolümüz oluyor. Ayrıca bu kontrolün hangi event’i ile bu UpdatePanel’in tetikleneceğini de EventName özelliği ile belirtiyoruz. Bunada SelectedIndexChanged yazıyoruz.
Ve sayfamızı çalıştırıyoruz.RadioButtonList’de seçeneklerden birine tıkladığımız zaman sayfa postback olmadan label kontrolünün değiştiğini göreceksiniz.

Oldukça basit bir Ajax uygulaması yapmış olduk. Tabi ki bunu geliştirmek(data uygulamları, UI özellikleri gibi) sizin hayal gücünüze kalmış bir şey. Umarım bazı şeyler için yardımcı olmuştur. Her türlü sorunuz için iletişim kısmından benimle iletişime geçebilirsiniz.

]]> http://www.minepla.net/2007/09/aspnet-ajaxda-updatepanel-ve-trigger/feed/ 0