Posts Tagged With 'Ajax'

  • Nov
  • 17
  • 2009

Microsoft Asp.Net Ajax ve mouse event’leri…

Tags: , , , | View: 626 | Comments:

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>
  • Jan
  • 02
  • 2009

PageMethods vs. UpdatePanel

Tags: , , | View: 1,021 | Comments:

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

  • Aug
  • 25
  • 2008

Hangi kontrol PostBack oluyor?

Tags: , | View: 399 | Comments:

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);

 

  • Mar
  • 04
  • 2008

Ajax Control Toolkit v3.0.20229

Tags: , | View: 238 | Comments:

.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.

  • Sep
  • 09
  • 2007

ASP.NET Ajax’da UpdatePanel ve Trigger

Tags: , , | View: 992 | Comments:

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.