Makale Özeti

Jquery Nedir,nerelerde kullanılır , neler yapabiliriz , Asp.Net içinde nasıl kullanılır ve webservislerinden veri nasıl çekilir.bunları hep beraber öğreneceğiz.

Makale

Merhaba Arkadaşlar bu ilk makalem Malum Jquery Duymayan Kalmamıştır Türkçe ve İngilizce Olarak Bir Çok Kaynak bulabilirsiniz. Kısaca Jquery hakkından bahsetmek gerekirse

Nedir bu Jquery ?

2006 Yılında John Resig tarafından geliştirilmeye başlanmış. Bir javascript frameworkdur.Şu anda 15 kişilik ekip tarafından geliştirilmektedir.Jquery lisans olarak GPL ve MIT lisansları altında geliştiricilere sunulmaktadır.Lisans ile ilgi daha detay bilgi için www.jquery.com sitesini ziyaret edebilirsiniz.

Şu Anda Kimler Kullanıyor  ?

Digg,Google ,Dell, NBC,Technorati, Mozilla.org,Drupal , Wordpress

Jquery ile Neler Yapabiliriz ?.

Sayfanız içinde Ajax kullanmaya ihtiyaç duyduğunuzda,ileri düzey css müdahale etmek istediğinizde,elementlere çeşitli efektler vermek istediğinizde.Bir Web kaynağından yada web servisinden json veya xml veri okumak istediğinizde.Kısacası eğer client-side tarafına hükmetmek istiyorsak jquery bizim için her şeyi yapabilir.

Jquery ‘ e Giriş,

Jquery Kullanmak diğer frameworklere(mootools,extjs vs) göre daha basittir.Diğer frameworklar hakkında daha bilgi almak için aşağıda yazmış olduğum web sitelerini ziyaret edebilirsiniz

·         Mootools

·         Ext.Js

·         Yahoo IU

·         Prototype

 

Normalde Javascript’te sayfa içindeki id si belli olan bir input elemanını içeriğini okuyalım  Alert(document.getElementById("txtAd").value);  iken jquery’de Alert($("# txtAd ").val()); şeklindedir burda val() ifadesi select,textarea yani aspnet deyimiyle dropdownlist ve textboxnesinde geçerlidir. Örneğin sayfa içersindeki tüm p elemanlarımıza css olarak yazdığımı classımızı atayalım $(“p”).addClass(“kalın”); burda kısaca sorgu olarak acıklamak gerekirse sayfadaki p elemanlarını seç ve onlara class olaran “kalın” ata. Evet Arkadaşlar aslında jquery bir ajax kütüphanesinden çok seçici olarak tarif edilir. Bunlar sadece birkaç örnekti. Bence jquery eşsiz kılan (The Magic of jQuery) dir . Yani Zincirlenebilirlik kısaca ifade etmek gerekirse

$(“#gridListe tr”).Not(“:first,:last”).find(“td”).filter(“eq(1)”).text(); burada şunu diyoruz gridliste içindeki tüm tr leri seç fakat ilk ve son satırları alma daha sonra bunlar içinden td olan elemanları ayır ve td’ninde 1 dizideki elemanları metinini getir. Arkadaşlar bu şekilde örnek çok var  şimdi kısaca eventlerden yani olaylardan bahsetmek istiyorum.

Örneğin bir butona tıklandığında Ekrana “Merhaba Dünya” Yazalım. Şimdi biz sayfa yüklendikten sonra sayfa içinde olan butonun eventine olay atıycağımız için şöyle başlıyoruz..

$(document).ready(function() {

     $("#cmdKaydet").click(function() {

        alert("Merhaba Dünya")

     });

});

 

 

Daha Geniş Kaynak için Jquery Dökümanlar Bölümünü İnceleyiniz.

Ben İlk Olarak Asp.Net Scripting Olarak Kullanacağım İlerleyen Makalelerde Datagrid ve diğer Nesneler ile Kullanılmasını Ayrı Ayrı Yazmaya Çalışıcağım...

Bir çok web sitesinde görmüşsünüzdür il seçtiğimizde ilçeler gelmektedir şimdi kısa bu örneğimizi yapalım.bu örneğimde webservisleri kullanıcağım..

İlk önce Jquery indirelim.

Aşağıdaki gibi forma Tasarlayın

 <asp:ScriptManager ID="ScriptManager1" runat="server">

            <Scripts>

                <asp:ScriptReference Path="~/jquery.js" />

            </Scripts>

        </asp:ScriptManager>

        <asp:DropDownList ID="cboIller" runat="server">

          <asp:ListItem Value="" Text="İl Seçiniz" />

          <asp:ListItem Value="34" Text="İstanbul" /> 

 

        </asp:DropDownList>

 <asp:DropDownList ID="cboIlceler" runat="server"></asp:DropDownList>

Şimdi Javascript Kodumuzu Yazalım. Burada change olayında Web Servisimizden seçilen ilin ilçelerini getireceğiz. Fakat ben burada veritabanı kullanmadığım için web servisinden kendim göndereceğim.

Şimdi yeni bir web servisi ekleyelim ve kodlarımızı yazalım

Web servisindeki kod satırlarına başlamadan önce aşağıdaki gibi bir ilce class oluşturalım

Web servisinden geri dönen ilçe sayısı birden fazla olacağı için list yapısını kullanacağız aşağıdaki gibi servisimizi yazalım

Aşağıdaki gibi public class WebService : System.Web.Services.WebService {

Hemen üstündeki acıklama satırı olarak duran [System.Web.Script.Services.ScriptService] aktif yapalım.

 

Şimdi sıra geldi jquery kütüphanesinde bulunan ajax metodu ile verimizi cekmeye

Arkadaşlar burada web servisinden veri tipi olarak biz json formatını isteyeceğiz.

Ve geri dönen json formatını okuyup dropdown kontrolümüze ekleyeceğiz.

 

Json hakkında daha fazla bilgi için lütfen http://www.json.org/json-tr.html

Ziyaret ediniz

 

Sayfamızı içinde </form> tağından hemen sonra şu kodları yazalım kodların açıklamasını javascript içinde açıklama olarak yazdım

 

<script type="text/javascript">

 

        $(document).ready(function() {

            //Sayfamızdaki cboiller nesneisin client idsini alıyoruz

            $("#<%=cboIller.ClientID %>").change(function() {

                //Val() ifasesi  secilen elamanın value sunu verir kısaltılmışıdır.

                //Geçerli olan nesneler ise html tarafında input,select dır.diğer html elemanlar için geçerli değildir.

 

                var secilen = $(this).val();

                $.ajax({ type: "Post",

                    dataType: 'json',

                    url: "WebService.asmx/IlceleriGetir",

                    contentType: "application/json; charset=utf-8",

                    data: '{ilKodu:"'+ secilen +'"}',

 

                    beforeSend: function() {

                        //Eğer Göndermeden önce kontrol etmek istediğiniz değerler veya

                        //mesajınız varsa bu fonksiyon için de yapınız

                    },

                    complete: function() {

                        //İşlem bittiğinde bu fonksiyon calışır

                    },

                    success: function(html) {

        

                        //veri istenen sayfada gelen bilgi başarılı ise hata oluşmadıysa bu fonksiyon calışır.

                        //microsoft webservislerinden veri istenildiğinde json içinde fonksiyonda gelen değer "d" düğümü içindedir.

 

 

                        //şimdi gelen verilerimizi cboIlceler  listemize yazdıralaım.

                        //gelen list kümesi içindeki elemanları dönmek için $.Each yöntemini kullanıcağız

                        //her seferinde il değişeceği için ilk önce cboilceleri temizleyelim

                        $("#<%=cboIlceler.ClientID %>").empty();

                        $(html.d).each(function() {

                         //cboilceler İçeriğine Ekleyelim

                         //gelen veri içerğindeki eleman ulaşmak için this.clasımızdaki memberın ismi ile ulaşıyoruz  

                            $("#<%=cboIlceler.ClientID %>").append("<option value='" + this.IlceKod + "'>" + this.IlceAdi + "</option>");

                         

                        });

                    }

                });

 

            });

 

        });

    </script>

 

 

Ve Son Olarak sayfamızı Çalıştıralım. İşte Sonuç

 

 

Örnek Uygulamayı indirin

Bir sonraki makelede görüşmek dileğiyle