Sayfalar

16 Eylül 2013 Pazartesi

ASP.NET MVC DERSLERİ ( 8.1 ) AJAX - JQUERY NEDİR?

Günümüzde artık ajax kullanmadan yapılan uygulama neredeyse yok gibi. Teknik olarak AJAX, asenkron javascript ve XML 3 lüsünün kısaltmasıdır. Yani, web sayfası üzerinde istediğimiz alanları, parçalı olarak güncellemeyi sağlamaktadır.
Pratikte ise, uyumlu (responsive) web uygulamarı yapmaya yarar. Responsive, tam olarak uyumlu manasında değildir aslında, aynı zamanda esnek, farklı ihtiyaçlara duyarlı gibi manalarada gelir. Yani kullanıcının uygulama üzerindeki rahatlığını, hakimiyetini, takibini, kullanım kolaylığını sağlaması açısından, web uygulamasında muhakkak bulunması gereken bir özellik. 

ASP.NET MVC uygulamaları AJAX için genel olarak JQuery kütüphanesini kullanır. AJAX ın özellikleri ve genişletilebilirliği JQuery üzerindedir. Bundan dolayı AJAX konusuna girmeden önce JQuery nedir? anlamaya çalışalım. JQuery i anladıktan sonra, örnekler ile AJAX tam olarak anlaşılacaktır. AJAX ı bir kere anlayıp kullanmaya başlayınca artık vazgeçmek kolay olmayacaktır.

JQUERY NEDİR? 

Teknik kısa tanımı : Bir javascript kütüphanesidir.
İşlevsel kısa tanımı: “write less, do more” , yani  "az kod, çok iş".

JQuery açık kaynak kodlu, esnek, hafif, kullanımı kolay ve daha bir çok avantajlı yönü olan bir javascript kütüphanesidir. En büyük özelliklerinden biriside tüm modern tarayıcılar tarafından desteklenmesidir. JQuery sadece az kod yazmak değil, aynı zamanda kolay kod yazmayıda sağlar. Javascriptle, tüm tarayıcılarda aynı sonucu verebilecek kodlar yazmak için bazen takla bile atmak gerebilir. JQuery bizi bu zorluklardan da kurtarır.

JQuery kütüphanesi, ASP.NET MVC projelerinde de standart olarak gelmektedir. İsterseniz kendinizde jquery.com adresinden indirebilirsiniz. MVC ile kullanımına geçmeden önce, JQuery nin özelliklerine bir göz atalım.

ÖZELLİKLER

JQuery Function:

JQuery function, JQuery nin özelliklerini kullanmaya yarar. Kısaca $ sembolü de kullanılabilir. $ sembolü ile başlayan deyimlerin JQuery fonksiyonu olduğu anlaşılır. $ sembolü ile başlayan deyimlerin içerisine tipi belli olmayan fonksiyonlar parametre olarak gönderilir.

Örnek üzerinde daha iyi anlaşılacaktır.
$(function () {
    $("#kategori-list img").mouseover(function () {
        $(this).animate({ height: '+=25', width: '+=25' })
        .animate({ height: '-=25', width: '-=25' });
    });
});

İlk satırda: $(function () {... JQuery fonksiyonuna tipi belli olmayan bir javascript metodunu parametre olarak gönderiyoruz. Bunun anlamı, server dan gelen HTML dökümanının yüklenmesi bittiği anda bu fonksiyonu çalıştır. Yani HTML sayfasının yüklenmesi bittiğinde bu fonksiyon çalışır.

İkinci satırda: $("#kategori-list img").mouseover(function () { JQuery fonksiyonuna bir string değer gönderiyoruz. Gelen bu string değer JQuery fonksiyonu tarafından bir eleman seçiçi olarak algılanır. Yani hangi HTML elemanı seçilecese onu sayfa içerisinde arar. Elemanları, farklı özelliklerine göre arayabilirsiniz. Elemanın id, class, attribute, ... ve daha birçok özelliğine göre arayabilirsiniz. İkinci satırdaki bu seçici fonksiyon, kategori-list adındaki elemanın içerisindeki tüm img elemanlarını bulur.

Ayrıca yine ikinci satırdaki, seçiciden sonraki metod, yani mouseover metodu, eşleşen tüm elemanlar için geçerli bir metoddur. Eşleşen tüm resimler için, mouseover olayını etkinleştirir.

mouseover olayı, işaretçinin, seçilen elemanın üzerine gelindiğinde ne yapacağını belirler. mouseover metodu içerisindeki fonksiyonlara bakarsak; $(this).animate yani seçilen elemanlar birden fazla ise üzerine gelinen elemana animate metodunu uygula demektir.Üzerine gelinen elemanın tekrar seçmek için $(this) ile tekrardan bir seçiciyi JQuery fonksiyonana gönderip, bu elemanada bir metod uygulamış oluyoruz.

JQuery Seçiciler (Selectors)

Bir HTML döküman içerisindeki, HTML elemanını seçmek için, JQuery fonksiyonu içerisine gönderdiğimiz string değerdir. Yukarıdaki örneklerde kullandığımız gibi $("#kategori-list img") . Bu seçiciler CSS yazarken kullandığımız seçiciler ile aynıdır. Tabi ek özellikleri ile beraber.  Aşağıdaki tabloda bazı JQuery seçicilerinden örnekler var.

örnekanlamı
$(˝#header˝)id si "header" olan elemanı seç
$(˝.editor-label˝)class ı "editor-label" olan tüm elemanları seç
$(˝div˝)Tüm "div" elemanlarını seç
$(˝#header div˝)id si "header" olan elemanın altındaki tüm "div" elamanlarını seç  
$(˝#header > div˝)"header" elamanın sadece bir alt elemanı olan "div" elemanlarını seç 
$(˝a:even˝)indeksi çift sayı olan "a" elemanlarını seç

gördüğünüz gibi CSS seçiciler ile aynıdır.

JQuery Events

JQuery nin en güçlü özelliklerinden biriside DOM elemanları üzerindeki olay tabanlı etkileşimidir. Yani bir elemana bir olay karşısında nasıl tepki vereceğini söyleyebilirsiniz. Yani fare üzerine geldiğinde, tıklandığında, postalandığında, klavye tuşu basıldığında ne tepki verecek. Sanırım örnek daha iyi anlatacak.
$("#kategori img").mouseover(function () {
    animateElement($(this));
});
 
function animateElement(element) {
    element.animate({ height: '+=25', width: '+=25' })
    .animate({ height: '-=25', width: '-=25' });
}

yukarıdaki örnekte, kategori adındaki elemanın içerisindeki resmin üzerine gelince, resim genişleyip tekrar küçülür. Bunu animate sayesinde, efektli bir şekilde yapar. Aşağıdaki adresten tüm jquery olaylarına detaylı olarak bakabilirsiniz.

http://api.jquery.com/category/events/

Jquery ve Ajax

Jquery içerisinde tüm ajax olaylarını yönetebilecek içerik mevcuttur. POST ve GET metodlarını kullanarak, asenkron veri yönetimi yapabilir. Jquery ile bu AJAX olayları oldukça basittir.

Sonraki derslerde jquery ve AJAX kullanımı ile alakalı detaylara geçiyor olacağız. MVC framework içerisinde AJAX Html Helper lar da mevcuttur. Bunların kullanımını anlatmayacağım. Tam ve esnek bir AJAX kullanımı için, saf JQuery kodları ile AJAX işlemleri yapacağız. Böylece, teknoloji bağımsız bir AJAX yapısını öğrenmiş olacağız. Özellikle JQuery ile yazılmış olan plug-in lerin örnek kullanımlarında, hep saf jquery kullanılmıştır. Böylece, yeni plug-in eklerken, yazılmış örnek kodlar daha iyi anlaşılacaktır.

2 yorum:

  1. Ali bey merhaba,
    Sizden json,ajax kullanarak bir crud işlemi mvc de nasıl yapılır örneklemenizi istiyorum. Veriyi json olarak döndürüp javascript ile binding olaylarını özellikle anlatmanızı istiyorum. Yeni başlayanlar için gerçekten faydalı olacaktır. iyi çalışmalar.

    YanıtlaSil
    Yanıtlar
    1. Haklısınız. Aslında yaptığım uygulamalardan örnek kodlar var fakat derli toplu olması açısından, biraz mesai harcamak gerekiyor. Özellikle grid üzerinde inline-editing ile alakalı bir paylaşım yapmak istiyorum...

      Sil