WebMethod Kullanımı (JavaScript Array ve jQuery AJAX)

WebMethod Kullanımı (JavaScript Array ve jQuery AJAX)

WebMethod Kullanımı (JavaScript Array ve jQuery AJAX)

17.9.2015

Arkadaşlar, bildiğiniz üzere .NET Web teknolojileri üzerine pek çok özellik barındırıyor. Bunlardan bir tanesi ise WebMethod'lardır. WebMethod'lar, bize anlık işlemler yapmamızı sağlayan servislerdir. Bu yüzden onlara "web servisleri" de denmektedir.

Biz kendi örneğimizde direkt sayfa içerisinde -code behind- WebMethod kullanacağız. Aslında buna PageMethod deniyor ama kodlanırken yine [WebMethod] şeklinde yazıyoruz.

Hemen şöyle bir yapısına bakacak olursak:

 
[WebMethod] 
public static void WebMethodDenemesi { 
// WebMethod kodları... 
}

Aslında method yazmaktan pek bir farkı yok. Sadece method'un başına [WebMethod] ekliyoruz. Tabiki AJAX ile kullanırsak AJAX'ta yapacağımız değişiklikler olacaktır. AJAX yapısı ise şöyle olacaktır:

<script>
    $.ajax({
        type: "POST",
        url: "sayfaadi.aspx/WebMethodismi",
        data: "{'firstName':'Ahmet','lastName':'Yaşar'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json"
    });
</script>

Burada dikkat edilecek kısımlar data: "{'firstName':'Ahmet','lastName':'Yaşar'}", contentType: "application/json; charset=utf-8", dataType: "json". data JSON formatında olmalıdır. data JSON formatında olduğuna göre contentType ve dataType'ı ona göre düzenlememiz gerekecektir. Bu yüzden örnekte göründüğü gibi olacaktır.

Peki, bunlarda bir sorun yok. Varsayalım elinizde bir Array mevcut ve bununla işlem yapmak zorundasınız. İşte tam burada JSON araya giriyor ve Array'inizi JSON formatına dönüştürüyor "JSON.stringify();". Artık JSON formatında Array'iniz hazır durumda ve AJAX ile kullanıma hazır. İsterseniz gelin yapacağımız örneğin kodlarına bi bakalım ve olayı pekiştirelim.

<script>
    var list = []; // Array oluşturuldu. 
    $(function () {
        // btnGet id'si olan bir button oluşturduk ve click event'ını atıyoruz. 
        $("#btnGet").on("click", function () {
            $("#divOgrenci").html("Yükleniyor..."); list = [];
            // Burada Array'i her defasında boşaltıyoruz ve yeni değerleri atıyoruz. 
            $("input:checkbox[name=ogrenci]:checked").each(function () {
                // varolan checkboxlardan checked olanların değerlerini alıyoruz. 
                list.push($(this).next("label").text());
            });
            var jsonText = JSON.stringify({ list: list });
            // Array'i JSON formatına çeviriyoruz. 
            $.ajax({
                type: "POST",
                url: "webmethod.aspx/GetListAndReturnNew",
                data: jsonText,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    $("#divOgrenci").html(data.d);
                    // divOgrenci id'si olan div'e gelen verimizi işliyoruz. 
                }
            });
        });
    }); </script>

Bütün kodlarımızı yazmış olduk. Artık örneğimiz sorunsuz bir şekilde çalışacaktır.

İLETİŞİM

İletişim Bilgileri

Adres
Kızlarpınarı Mh. Spor Cd. Can Apt. No:28/A Alanya, Antalya
Telefon
(+90) 242-966-2119
Email
info@tulparyazilim.com

İletişime Geç