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">
//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