Bu yazımda Jquery ve Ajax işlemlerinde yazmış olduğumuz class'ları kullanmayı göreceğiz. Ajax metodunda yazmış olduğumuz class'a istekte bulunup class
- Yazılım Uzmanları
- 14 Mayıs 2018
- 342 kez görüntülendi.
Bu yazımda Jquery ve Ajax işlemlerinde yazmış olduğumuz class'ları kullanmayı göreceğiz. Ajax metodunda yazmış olduğumuz class'a istekte bulunup class'a ait özellikleri elde edeceğiz. Daha önce yapmak istediğim ancak başaramadığım bu durumu aşağıda linkini vereceğim siteden edindiğim bilgiler ile yapabildim. Böylece Jquery ile Ajax işelemlerini daha etkin daha esnek olarak kullanabileceğiz. Ayrıca bu türlü kullanım ile çok farklı uygulamalar geliştirebiliriz. Önümüzdeki dönemde düşündüğüm bazı uygulamaları bu yöntem ile hazırlayıp kullanacağım. Şimdi bu işlemleri nasıl yapacağımıza bakalım.
Öncelikle Ajax işlemleri için Web Service kullandım ve kodlamalarımı Web Service'te yaptım. Örnek olması için iki farklı örnek hazırladım. Hem tek bir class'a istek yapacağız hem de List olarak düzenlediğimiz class'a istek yapacağız. Bunun için hazırladığımız kodlar şöyle olmalı.
[WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.Web.Script.Services.ScriptService] public class web : System.Web.Services.WebService { [WebMethod] public kisi getir() { kisi ks = new kisi(); ks.adi = "Mehmet"; ks.soyadi = "Duran"; ks.kimlik_no = 12345; return ks; } [WebMethod] public List<kisi> kisiler() { List<kisi> ks = new List<kisi> { new kisi(){adi = "Mehmet", soyadi = "Duran", kimlik_no = 12345}, new kisi(){adi = "Sinan", soyadi = "Özkan", kimlik_no = 12346}, new kisi(){adi = "Semih", soyadi = "Öztürk", kimlik_no = 12347} }; return ks; } } public class kisi { public string adi { get; set; } public string soyadi { get; set; } public int kimlik_no { get; set; } }
Bu şekilde hazırladığımız Ajax kodlarımıza Jquery içinde yer alan Ajax metodu ile istekte bulunacağız. Bunun için yazmamız gereken kodlar ise şöyle olmalı.
<script type="text/javascript"> $(document).ready(function(){ $.ajax({ type: "POST", url: "web.asmx/getir", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(msg){ // Tek class'a yaptığımız istek ve dönen sonucu okumamız $("#data1").html(msg.d.adi + " " + msg.d.soyadi + " " + msg.d.kimlik_no); } }); $.ajax({ type: "POST", url: "web.asmx/kisiler", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(msg){ // List olarak belirttiğimiz class'a yaptığımız istek ve sonuçları okumamız $.each(msg.d, function(i){ $("#data2").append(this.adi + " " + this.soyadi + " " + this.kimlik_no + "<br/>"); }); } }); }); </script>
Bu şekilde basit bir örnek hazırladım. Ancak bu yöntem ile birçok farklı ve kullanışlı Ajax uygulaması hazırlanabilir. Önümüzdeki dönemde sitemde kullanmak üzere birkaç uygulama hazırlayacağım.
Daha önce bu konu ile ilgilenmiş ancak tam olarak yapamamıştım. Ancak yabancı bir sitede karşılaştığım bilgi ile bu sorunu çözdüm. Sorun ise istekte bulunduğumda gelen sonucu almak için ajax metodumda msg.d olarak almaya çalışmamdı. Ancak bu şekilde undefined olarak sonuç elde ediyordum. Ama json tipinde dönen sonucu okumak için msg.d.ozellik_adi gibi bir kodlama yapmamız gerekiyormuş.
İyi Çalışmalar!
Bu yazıya 0 yorum yapılmış.