JavaScript Zincirleme Method Kullanımı

Merhaba Arkadaşlar,

Bu bölümde javascript 'te zincirleme method kullanımına bakıyor olacağız.Aynı zamanda ajax web servis işlemlerine de değiniyor olacağız.Uygulamamı visual studio 2013 idesi içinde gerçekleştiriyor olacağım.Uygulamamız içinde ajax işlemlerimizde olacağı için jquery adresinden download bölümünden güncel olanını indirebilirsiniz.

                                                                                           Resim 1
ilk olarak bir web form uygulaması başlatarak devam edelim.Projemizi isimlendirdikten sonra
açılan proje üzerinde sağ tıklayıp add folder diyip ismini js olarak verip indirdirmiş olduğunuz jquery dosyasını içine atıyoruz(Resim2)

Resim 2
   
 Gene projemiz üzerine sağ tıklayıp bir adet web form ekleyip adını Default.aspx olarak verelim.Ve Default.aspx üzerinde iken sağ tıklayıp Set As Start Page seçelim.Evet şimdi işlemlerimizi yapmaya başlayabiliriz.İlk olarak head tagları arasına indirdiğimiz jquery dosyasını sürükleyip bırakalım.Daha sonra  <script type="text/javascript">Yazılacak kodlar buraya</script>. Tagları arasında kodlama işlemlerimiz yapıyor olacağızUygulamamızın genel amacı javascripte iç içe function kullanmak


=============================Örnek 1=====================================

       function Kisi(){
        this.Adi;
        this.Soyadi;
        this.Ulke;
        }

        var instance = new Kisi(); //Kişi adlı sınıfdan örnek türetildi yani instance alındı
        instance.Adi = "Sinan"; //Propertieslere deger atamaları gerçekleştirildi
        instance.Soyadi = "Arslan";
        instance.Ulke = "Türkiye";

     alert(instance.Adi + "-" + instance.Soyadi + "-" + instance.Ulke);//Tamamen mantığımız c# üzerine ilerliyor olacağız.Şimdi ise farklı nasıl yapabiliriz

Ca# daki gibi class mantığı aşagıdaki Kişi functionını kişi sınıfı gibi ele aldığımızda this.Adi,this.Soyadi,this.Ulke gibi bölümler propertiesleri olmakta


=============================Örnek 2=====================================

Parametre alarak propertieslerimize değer atama işlemlerini gerçekleştiriyoruz

        function Kisi(adi,soyadi,ulke){
        this.Adi=adi;
        this.Soyadi=soyadi;
        this.Ulke=ulke;
        }

        var instance = new Kisi("Sinan", "Arslan", "Turkiye");//Yazmış olduğumuz Kişi functionımız artık örneğini aldığımızda bizden aldığı parametrelere göre deger istemekte
        alert("Sayın "+instance.Adi+"-"+"ülke Bilgisi  "+instance.Ulke);

=============================Örnek 3=====================================

        function Kisi(){
        this.Adi;
        this.Soyadi;
        this.Ulke;
        }
       // Kisi.prototype var olan bir classın propertieslerine yeni propertiler eklemeye olanak sağlar .Amacda zaten bu sepette ürün Adeti* fiyat=Tutar demek için

        Kisi.prototype.SetAdi = function (adi) {
            this.Adi = adi;
            return this;
        };
        //Burda yapılan işlemlerden birini açıklamak yeterli olacaktır sanırım.Hepsi aynı işlemi gerçekleştiriyor.Öncelikle  Kisi.prototype.SetAdi = function (adi) {} bölümünde gecici alianz isimli properti degerimizi yarattık prototype ile ve adına SetAdi dedik daha sonra functionımız içindeki parametreyi tanımlamış olduğumuz classımız(function Kisi() (!--42 satır ) içersinde gelen adi propertieine parametremizden gelen degeri atadık ve bize return this diğerek objenin kendisini dönmesini sağladık amacımız ise alınan instance üzerinden tek bir seferde tüm degerleri atamak (!65 satır)  

        Kisi.prototype.SetSoyadi = function (soyadi) {
            this.Soyadi = soyadi;
            return this;
        };
        Kisi.prototype.SetUlke = function (ulke) {
            this.Ulke = ulke;
            return this;
        };

        var instance = new Kisi();
        instance.SetAdi("Sinan").SetSoyadi("Arslan").SetUlke("Turkiye");

=============================Örnek 4=====================================


        function Kisi() {
            this.Adi;
            this.Soyadi;
            this.Ulke;

            this.SetAdi =  function (name) {
                this.Adi = name;
                return this;
            };
            this.SetSoyadi = function (soyadi) {
                this.Soyadi = soyadi;
                return this;
            };
            this.SetUlke = function (ulke) {
                this.Ulke = ulke;
                return this;
            };
            this.GetDataRead = function () {
                return this.Adi + "--" + this.Soyadi + "--" + this.Ulke;//Veri Okuma işlemi için yazdım
            };
        }

        var instance = new Kisi();
        instance.SetAdi("Sinan").SetSoyadi("Arslan").SetUlke("Türkiye");
        alert(instance.GetDataRead());

        instance.SetAdi("Sinan");
        alert("Sayın : " + instance.Adi + "" + instance.Soyadi + " ülkesi " + instance.Ulke);
       Bu Bölüm Projeyi İndirenler içindir Class içinde Kullanılan return this; mantığını analamak için satır 90 yorum satırı haline getirip satır 91 aktif hale getirilip alert() ilemi gerçekleştirildiğinde deger almayan propertiler undefined olarak gelmektedir. Yani aynı c# daki gibi ram üzerine alınan ilk data içindeki degerleri boş olan kısımlar null (undefined) olarak deger ataması yapılır

        Yukarda verilen ilk 5 örnek zincirleme method kullanına örnek olması amaçlı yazılmıştır

=============================Örnek 5=====================================
Şimdi ise ajax jquery kullanarak bir web servisden dönen değerleri yakalıp kullanacak belirli bir hesabı gerçekleştiren uygulamamızı javascript sınıflarımızda gerçekleştirelim.Uygulamanın basit anlaşılır olması amacıyla Urun fiyatı indirim oranı hesabı yapan bir web servis oluşturmak için proje üzerine sağtıklayıp add diyip webservice ekliyoruz ve ismini SepetHesapla.asmx olarak verelim.Gene servisimiz içindeki methodu aşağıdaki gibi değiştirelim

/// <summary>
    /// Summary description for SepetHesapla
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
    [System.Web.Script.Services.ScriptService]
    public class SepetHesapla : System.Web.Services.WebService
    {

        [WebMethod]
        public double Hesapla(Siparis sip)
        {
            int adet = sip.Adet;
            List<Urun> urun = new List<Urun>();
            urun.Add(new Urun { Fiyat = 100, UrunID = 1 });
            urun.Add(new Urun { Fiyat = 150, UrunID = 2 });
            urun.Add(new Urun { Fiyat = 200, UrunID = 3 });
            urun.Add(new Urun { Fiyat = 300, UrunID = 4 });
            urun.Add(new Urun { Fiyat = 400, UrunID = 5 });

            Urun urunler = urun.FirstOrDefault(x => x.UrunID == sip.UrunID);
            double fiyat = urunler.Fiyat;
            double indirim;
            if (adet <= 3)
            {
                indirim = 0.9;
            }
            else
            {
                indirim = 0.8;
            }
            double toplam = adet * indirim* fiyat;
            return toplam;
        }
    }

Ajax işlemleri gerçekleştireceğimiz için  [System.Web.Script.Services.ScriptService] üzerindeki yorum satırını  kaldıralım. Daha sonra Default.aspx sayfamızın Source bölümüne geçip kodlarımızı yazmaya başalaylım.

  <script type="text/javascript">

function Urun() {
            this.UrunID;
            this.Adet;
            this.SetUrunID = function (urunID) {
                this.UrunID = urunID;
                return this;
            };
            this.SetAdet = function (adet) {
                this.Adet = adet;
                return this;
            };
            this.ToplamTutar = function () {
                var deger = this;
                var donusdeger;
                $.ajax({
                    type: "Post",
                    data: JSON.stringify({ sip: deger }),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: false,
                    url: "SepetHesapla.asmx/Hesapla",
                    success: function (sonuc) {
                        donusdeger = sonuc.d;
                    }
                });
                return donusdeger;
            };
        }

       //var ur = new Urun();
       // var toplamdeger = ur.SetAdet(3).SetUrunID(1).ToplamTutar();

        //alert(toplamdeger);

        $(document).ready(function () {
            $("#btnHesapla").click(function () {

                var gelenid = $("#Urunlist").val();
                var gelenadet = $("#txtadet").val();

                var ur = new Urun();
                var toplamdeger = ur.SetAdet(gelenadet).SetUrunID(gelenid).ToplamTutar();
                $("#txtHesap").text(toplamdeger);
            });
        });
    </script> 

Şimdi ratgele bir tasarım üzerinden ilerliyor olacağım.

<body>
    <form id="form1" runat="server">
        <div>
            <table>
                <thead>
                    <tr>
                        <th>Ürün
                        </th>
                        <th>Adet
                        </th>
                        <th>Fiyat
                        </th>
                        <th>Tutar
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <select id="Urunlist">
                                <option value="1">Birinci Ürün</option>
                                <option value="2">İkinci Ürün</option>
                                <option value="3">Üçüncü Ürün</option>
                                <option value="4">Dördüncü Ürün</option>
                                <option value="5">Beşinci Ürün</option>
                            </select></td>
                        <td>
                            <input type="text" id="txtadet" /></td>
                        <td>
                            <button id="btnHesapla" type="button" >Hesapla</button>
                        </td>
                        <td id="txtHesap">
                          
                        </td>
                    </tr>

                </tbody>
            </table>

        </div>
    </form>
</body>
</html>

Bu uygulamada asıl amaç olan javascript zincilerleme method kullanıma değinmek amaçlı yazdım.Projede kullanılan webservis içindeki method yada web service ne gerek var diye düşünülebilinir farklı yöntemler izlenilebilinir.Uygulamayı yazarken ana amaç zincirleme method kullanımına (fluent Interface ajax webservice) basit anlamda değinilmiştir

Projeyi indirmek için tıklayınız