5. syonu [SimuPaie] – sürüm 2 – AJAX / ASP.NET

5.1. Introduction

AJAX teknolojisi (Asynchronous Javascript And Xml), bir dizi teknolojiyi bir araya getirir:

• Javascript: Bir tarayıcıda görüntülenen bir HTML sayfası, Javascript kodu içerebilir. Kullanıcı tarayıcısında Javascript kodunun çalıştırılmasını engellemediyse, bu kod tarayıcı tarafından yürütülür. Bu teknoloji, web'in ilk günlerinden beri mevcuttur ve 2005 yılından bu yana AJAX sayesinde yeniden ilgi görmektedir.
• DOM: Belge Nesne Modeli (Document Object Model). Bir HTML sayfasına gömülü JavaScript kodu, belgeye bir nesne ağacı, yani DOM biçiminde erişebilir. Belgedeki her bir öğe (bir giriş alanı, adlandırılmış bir <div> etiketi, bir <select> etiketi vb.) ağacın bir düğümüyle temsil edilir. Javascript kodu, DOM'i değiştirerek görüntülenen belgeyi değiştirebilir. Örneğin, bu alanı temsil eden DOM düğümü aracılığıyla bir giriş alanında görüntülenen metni değiştirebilir.

AJAX, arka planda tarayıcı/sunucu iletişimi gerçekleştirmek için JavaScript kullanır. Bir düğmeye tıklama gibi bir olaya tepki vermek için, tarayıcı tarafından bir JavaScript kodu çalıştırılarak sunucuya bir HTTP isteği gönderilir. Bu istek, sunucuya ne yapması gerektiğini belirten parametreler içerir. Sunucu, istenen eylemi gerçekleştirir. Yanıt olarak tarayıcıya, o anda görüntülenen sayfanın kısmi güncellenmesini sağlayan verileri içeren bir HTTP akışı gönderir. Bu güncelleme, belgedeki DOM aracılığıyla ve belgeye gömülü JavaScript kodunun çalıştırılmasıyla gerçekleştirilir. Sunucu tarafından geri gönderilen veriler farklı biçimlerde olabilir: XML, HTML, JSON, biçimlendirilmemiş metin, ...

Bu teknolojinin avantajı, görüntülenen belgenin kısmi olarak güncellenmesinden kaynaklanmaktadır. Bu da şu anlama gelir:

• istemci ile sunucu arasında daha az veri alışverişi ve dolayısıyla daha hızlı yanıt
• kullanıcının eylemleri sayfanın tamamen yeniden yüklenmesine neden olmadığı için daha akıcı bir grafik arayüz.

Ağ iletişiminin hızlı olduğu bir intranette, AJAX, klasik Windows arayüzlerine benzer davranış sergileyen web uygulamaları oluşturulmasına olanak tanır. Nitekim, bir listede seçim değişikliği gibi olayları yönetebilir ve bu seçim değişikliğini yansıtmak için sayfayı anında ve kısmen yenileyebiliriz. Sayfanın tamamen yeniden yüklenmemesi, kullanıcıya Windows uygulamalarında olduğu gibi akıcı bir deneyim hissi verir. Tepki sürelerinin uzun olabileceği internet uygulamaları için AJAX teknolojisi kullanılabilir olmaya devam eder, ancak akıcılık hissi ağın performansına bağlıdır.

AJAX'teki en büyük zorluk JavaScript dilidir. Web'in ilk günlerinde geliştirilen bu dil,

• nesne yönelimli programlama yapmak için pek pratik değildir. Örneğin, bu bir türlü dil değildir. İşlenen verilerin türü beyan edilmez. Bu açıdan Perl veya PHP gibi dillere benzemektedir.
• Tüm tarayıcılar tarafından kabul edilen bir standardı yoktur. Her tarayıcının kendine özgü "JavaScript" uzantıları vardır; bu nedenle, IE için yazılmış bir JavaScript kodu Mozilla Firefox'ta çalışmayabilir ve bunun tersi de geçerlidir.
• Hata ayıklaması zordur; tarayıcılar, çalıştırdıkları JavaScript kodları için etkili hata ayıklama araçları sunmamaktadır.

Javascript’in tüm bu sorunları, AJAX ortaya çıkana kadar bu dilin pek kullanılmamasına neden olmuştu. Javascript kodunu arka planda çalıştırmanın, web sunucusuna HTTP istekleri göndermenin ve sunucunun yanıtını kullanarak, görüntülenen belgenin kısmi güncellemesini gerçekleştirmek için, geliştirme ekipleri işe koyuldu ve geliştiricinin JavaScript kodu yazmasına gerek kalmadan AJAX işlemlerini gerçekleştirebilen çerçeveler sundu. Bunun için, istemci tarayıcısına uyum sağlayabilen JavaScript kütüphaneleri yazılmıştır. Tarayıcıya gönderilen sayfaya JavaScript kodunun eklenmesi, kullanılan AJAX çerçevesine göre farklılık gösteren tekniklere göre sunucu tarafında gerçekleştirilir. Java, .NET, PHP, Ruby gibi diller için de Ajax çerçeveleri mevcuttur. AJAX, Visual Web Developer 2008'e entegre edilmiştir.

5.2. [web-ui-ajax] katmanındaki Visual Web Developer projesi

Yeni sürüm, önceki sürümün kopyalanmasıyla elde edilir. Yalnızca [Default.aspx] sayfası değiştirilecektir.

• [1] olarak, Windows Gezgini ile [pam-v1-adonet] proje klasörünü kopyalayıp [pam-v2-adonet-ajax] adını veriyoruz. Ardından Visual Web Developer ile bu yeni [2] klasöründeki projeyi açıyoruz (Dosya / Proje Aç)
• ve projeye [3] adını verin, ardından

• verin. Yeni projenin özelliklerinde, [4] adlı derlemenin adını ve varsayılan ad alanını [5] olarak değiştirin.

Bu işlem tamamlandıktan sonra, [Default.aspx, Default.aspx.cs, Default.aspx.designer.cs, Global.asax, Global.asax.cs] dosyalarında [pam_v1] ad alanını, varsayılan ad alanıyla tutarlı olması için [pam_v2] ad alanıyla değiştiririz. Örneğin, [Default.aspx] [6] şu şekilde değişir:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="pam_v2._Default" %>
...

[Default.aspx] sayfası şu şekilde değiştirilecektir:

• [Default.aspx] formuna Ajax bileşenleri eklenir (yukarıdaki [2]'e bakınız).
  • 2A: <asp:ScriptManager> bileşeni, tüm AJAX projeleri için gereklidir
  • 2B: <asp:UpdatePanel> bileşeni, kullanıcının POST işlemi sırasında yenilenecek alanı sınırlamak için kullanılır. Bu bileşen, sayfanın tamamen yeniden yüklenmesini önler.
  • 2C: <asp:UpdateProgress> bileşeni, aşağıda gösterildiği gibi güncelleme süresince kullanıcıyı bilgilendirmek amacıyla bir metin veya resim görüntülemek için kullanılır:

• (devamı)
  • 2D: Label adlı bir bileşen, sayfanın Load olay işleyicisinin yürütüldüğü saati gösterecektir.
  • 2E: Label türünde, LabelHeureSalaire olarak adlandırılmış ve [Salaire] düğmesi üzerindeki Click olay işleyicisinin çalıştırıldığı saati gösterecek olan olay işleyicisi. [Salaire] düğmesine tıklandığında Ajax'ın sayfanın tamamını yeniden yüklemediğini göstermek istiyoruz. Bu, önceki ekran görüntüsünde de görüldüğü gibi; burada iki farklı Labels öğesinde iki farklı saat gösterilmektedir.

Formun Ajax ile uyumlu hale getirilmesi, [Default.aspx]'in kaynak koduna Ajax uzantı etiketleri eklenerek doğrudan gerçekleştirilebilir:

...
<body style="text-align: left" bgcolor="#ffccff">
  <h3>
    Feuille de salaire
    <asp:Label ID="LabelHeureLoad" runat="server" BackColor="#C0C000"></asp:Label></h3>
  <hr />
  <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />
    <asp:UpdatePanel runat="server" ID="UpdatePanelPam" UpdateMode="Conditional">
      <ContentTemplate>
        <div>
          <table>
            <tr>
...
            <tr>
              <td>
                <asp:DropDownList ID="ComboBoxEmployes" runat="server">
                </asp:DropDownList></td>
              <td>
                <asp:TextBox ID="TextBoxHeures" runat="server" EnableViewState="False">
                </asp:TextBox></td>
              <td>
                <asp:TextBox ID="TextBoxJours" runat="server" EnableViewState="False">
                </asp:TextBox></td>
              <td>
                <asp:Button ID="ButtonSalaire" runat="server" Text="Salaire" CausesValidation="False" /></td>
                <td>   <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                  <ProgressTemplate>
                    <img src="images/indicator.gif" />
                    <asp:Label ID="Label5" runat="server" BackColor="#FF8000" EnableViewState="False"
                      Text="Calcul en cours. Patientez ...."></asp:Label>
                  </ProgressTemplate>
                </asp:UpdateProgress>
          <asp:Label ID="LabelHeureSalaire" runat="server" BackColor="#C0C000"></asp:Label></td>
            </tr>
            <tr>
...
            </tr>
          </table>
        </div>
        <br />
....
          <table>
            <tr>
              <td>
                Salaire net à payer :
              </td>
              <td align="center" bgcolor="#C0C000" height="20px">
                <asp:Label ID="LabelSN" runat="server" EnableViewState="False"></asp:Label></td>
            </tr>
          </table>
          &nbsp;</asp:Panel>
      </ContentTemplate>
    </asp:UpdatePanel>
  </form>
</body>
</html>

• 8. satır: Ajax'a uyarlanmış her form, <asp:ScriptManager> etiketini içermelidir. Yeni Ajax bileşenlerinin kullanılmasını sağlayan bu etikettir:

• <asp:ScriptManager> etiketi, yukarıdaki [ScriptManager] bileşenine çift tıklanarak elde edilebilir. Bu etiketinin kaynak koddaki <form> etiketi içinde yer aldığından emin olunmalıdır. 8. satırdaki [EnablePartialRendering= "true "] özniteliği varsayılan olarak yoktur. Varsayılan değeri "true" olduğundan, bu öznitelik zorunlu değildir.

• 9. satır: <asp:UpdatePanel> etiketi, sayfanın kısmi güncellenmesi sırasında güncellenmesi gereken alanları sınırlamaya yarar. [UpdateMode="Conditional"] özniteliği, alanın yalnızca o alandaki bir bileşenin AJAX olayında güncellenmesi gerektiğini belirtir. Diğer değer [UpdateMode="Always"]'tir ve bu varsayılan değerdir. Bu öznitelik kullanıldığında, meydana gelen Ajax olayı başka bir alan olan UpdatePanel'in bir bileşeninden gelse bile, UpdatePanel alanı her zaman güncellenir. Genellikle bu davranış istenmez.

<asp:UpdatePanel> etiketi iki alt etiket kabul eder: <ContentTemplate> ve <Triggers>.

• 10. ve 53. satırlardaki <asp:ContentTemplate> etiketleri, sayfanın kısmen güncellenecek alanını sınırlar.
• 27-33. satırlar: Sayfanın güncellenmesi süresince bir metni görüntülemeye olanak tanıyan bir Ajax bileşeni <asp:UpdateProgress>. Örneğin, [Salaire] düğmesine tıklandığında arka planda bir POST işlemi tetiklenir. Bu durumda tarayıcı kum saati simgesini göstermez ve kullanıcı bu nedenle formu kullanmaya devam etmek isteyebilir. <asp:UpdateProgress> etiketi, sayfanın güncellenmekte olduğunu bildiren bir metin görüntülenmesini sağlar. Ayrıca bir resim de görüntülenebilir. Burada, bir animasyonlu resim (29. satır) ve bir metin (30-31. satırlar) görüntülenmektedir:

• 28-32. satırlar: <ProgressTemplate> etiketi, UpdateProgress etiketinin bulunduğu UpdatePanel alanının güncellenmesi süresince görüntülenecek içeriği sınırlar.
• 29-31. satırlar: UpdatePanel alanının güncellenmesi sırasında görüntülenecek animasyonlu resim ve metin.
• 5. satır: LabelHeureLoad etiketi, AJAX'la güncellenen alanın dışına yerleştirilir
• 34. satır: LabelHeureSalaire etiketi, AJAX ile güncellenen alanın içine yerleştirilir

[Default.aspx.cs] sayfasının kodu ( ) ise şu şekilde değişir:

    protected void Page_Load(object sender, System.EventArgs e)
    {
        // her sayfa yükleme zamanı
        LabelHeureLoad.Text = DateTime.Now.ToString("hh:mm:ss");
        // ilk isteğin işlenmesi
        if (!IsPostBack)
        {
....
}

• 4. satır: Sayfanın yüklenme saatinin güncellenmesi

   protected void ButtonSalaire_Click(object sender, System.EventArgs e)
    {
        // maaş hesaplama saati
        LabelHeureSalaire.Text = DateTime.Now.ToString("hh:mm:ss");
        // veriler kontrol ediliyor
....
}

• 4. satır: maaş hesaplama saatinin güncellenmesi

[Default.aspx] sayfasını tamamlamak için, sayfanın aşağıdaki kaynak kodunun 4. satırında referans verilen animasyonlu görüntüyü eklememiz gerekiyor:

            <td>
              <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                <ProgressTemplate>
                  <img src="images/indicator.gif" />
                  <asp:Label ID="Label5" runat="server" BackColor="#FF8000" EnableViewState="False"
                    Text="Calcul en cours. Patientez ...."></asp:Label>
                </ProgressTemplate>
              </asp:UpdateProgress>
              <asp:Label ID="LabelHeureSalaire" runat="server" BackColor="#C0C000"></asp:Label>
</td>

Windows Gezgini ile [images/indicator.gif] dosyasını [1] proje klasörüne ekliyoruz:

• [2]'te, projenin tüm dosyalarını görüntüleyelim
• [3]'te, [images] klasörünü
• [4]'te, [images] klasörünü projeye ekliyoruz

• [5]'e, [images] klasörü projeye dahil edildi
• [6]'te, projeye dahil olmayan dosyalar gizlenir
• [7]'te, yeni proje

5.3. Ajax çözümünün testleri

Projenin (CTRL-F5) çalıştırılması istendiğinde, aşağıdaki sayfa görüntülenir:

• [1]'te, sayfanın yüklenme süresi

Denemeler yapın ve [Salaire] düğmesinin sayfanın tamamen yeniden yüklenmesine neden olmadığından emin olun. Bunu, [Salaire] ve [2] düğmelerine tıklama işleminin gerçekleştirildiği saatten, sayfanın ilk yüklendiği saat olan [3] ile aynı olmadığı görülebilir:

ScriptManager1 bileşeninin EnablePartialRendering özelliğini False olarak ayarlayarak testleri tekrarlayın:

Bu durumda, AJAX kullanılmayan bir sayfanın davranışının geri geldiğini gözlemleyin. [Salaire] düğmesine tıklandığında sayfa tamamen yeniden yüklenir. Testleri başka bir tarayıcıyla tekrarlayın. Çoklu tarayıcı testi, ASP / AJAX sunucu bileşenleri tarafından oluşturulan JavaScript'in farklı tarayıcılar tarafından doğru şekilde yorumlandığını göstermeyi amaçlamaktadır.

Son olarak, <asp:UpdateProgress> etiketinin rolünü ele alalım. [Default.aspx.cs]'in [ButtonSalaire_Click] yordamının koduna, yordamı 3 saniye boyunca durduran bir komut ekleyelim:

using System.Threading;
   ...
protected void ButtonSalaire_Click(object sender, System.EventArgs e)
    {
        // maaş hesaplama saati
        LabelHeureSalaire.Text = DateTime.Now.ToString("hh:mm:ss");
        // bekleme 
        Thread.Sleep(3000);
        // veriler kontrol ediliyor
....
}

1. satır, [ButtonSalaire_Click] prosedürünü çalıştıran iş parçacığını 5 saniye bekletir. Bunu yaptıktan sonra, testleri tekrar yapalım (ScriptManager1 bileşeninin EnablePartialRendering özniteliğini tekrar True olarak ayarladıktan sonra). Bu sefer, maaş hesaplaması sırasında [UpdateProgress]'in metnini ve hareketli görüntüyü görüyoruz:

5.4. Conclusion

Önceki çalışmamız, mevcut ASP.NET uygulamalarını AJAX ile uyumlu hale getirmenin mümkün olduğunu göstermiştir. AJAX uzantıları, ASP.NET'te görülenlerin ötesine geçmektedir. Okuyucuların [http://ajax.asp.net] sitesini ziyaret etmeleri önerilir.