Veysel Uğur KIZMAZ

Asp.Net projelerinde Javascript ile server-side method (WebMethod) çağırma işlemini bir önceki makalede öğrenmiştik. Bu yazıda aynı işlemi ScriptManager kullanmadan Jquery ile nasıl yapacağımızı öğrenelim.

Örnek uygulamamızda sunucu tarafında (C# ile) yazdığımız bir metodu (WebMethod) Jquery ile nasıl çağırabileceğimizi, çağırırken parametrede sayfa içerisindeki TextBox kontrolünde yazılan değerleri nasıl göndereceğimizi öğreneceğiz.

C# ile WebMethod Oluşturma

C# ile codebehind’da oluşturduğunuz bir metodu javascript ile çağırabilmek için bu metodu WebMethod olarak tanımlamanız gerekmektedir. WebMethod tanımlaması için öncelikle using satırına System.Web.Services referansını ekleyiniz.

using System.Web.Services;

Şimdi geri dönüş değeri string olan GetirHosgeldin metodunu oluşturalım Method parametre olarak hoşgeldin mesajının yazılacağı kişinin isim bilgisini alsın.

[WebMethod]
public static string GetirHosgeldinMesaji(string isim)
{
    return "Hoşgeldin " + isim;
}

WebMethod’u Jquery ile Çağırma

Sayfanın arayüz kısmına bu metodu çağırmak için tetikleyici olan Button kontrolünü ve isim bilgisini yazacağımız TextBox kontrolünü ekleyelim.

<form id="form1" runat="server">
    <asp:TextBox ID="txbIsim" runat="server"></asp:TextBox>
    <br />
    <asp:Button ID="Button1" runat="server" Text="Button" />
</form>

Şimdi Jquery kodlamasına geçebiliriz. Jquery ajax fonksiyonundan önce parametre olarak webmethoda göndereceğimiz textbox kontrolünün değerini almamız gerekiyor. Bunun için document.getElementById fonksiyonunu kullanıyoruz.

Server-side kodladığımız WebMethod’a (GetirHosgeldinMesaji) erişebilmek için Jquery’nin ajax fonksiyonunu kullanacağımızı belirtmiştik.  Fonksiyonun çalışması için parametrelerini tanımlamamız gerekmektedir. Tanımlayacağımız parametreler:

url: Hangi webmethod’un çağırılacağını, ajax fonksiyonunun url özelliğinde tanımlıyoruz (Default.aspx/GetirHosgeldinMesaji).

data: Webmethod’un parametrelerini burada tanımlıyoruz. isim parametresine txbIsim textboxının değerini (value)atıyoruz.

contentType: WebMethod’dan geri dönen değerin içerik tipini belirtiyoruz. Dönüş tipini json olarak tanımlayalım.

dataType: WebMethod’dan geri dönen değerin veri tipini belirtiyoruz. Bunu da json olarak tanımlayalım.

success: İşlem başarılıysa (webmethod çalıştıysa) sonucu msg parametresiyle alıyoruz. Geri dönen değer, msg parametresinin d özelliğinde tanımlıdır. Fonksiyon içerisinde sonucu ekranda göstermek için mesaj penceresi (alert) kullanıyoruz.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
<script type ="text/javascript">
    $(document).ready(function () {
        $('#<%=Button1.ClientID %>').click(function () {
            var txbIsim = document.getElementById('<%=txbIsim.ClientID%>');
            $.ajax({
                type: "POST",
                url: "Default.aspx/GetirHosgeldinMesaji",
                data: "{'isim':'" + txbIsim.value + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    alert(msg.d);
                }
            })
            return false;
        });
    });
</script>

Sayfayı çalıştırıp textbox kontrolüne “Veysel Uğur Kızmaz” yazıp butona tıkladığımızda uyarı mesajı olarak C# metodundan (WebMethod > GetirHosgeldinMesaji) döndürdüğümüz “Hoşgeldin Veysel Uğur Kızmaz” yazısının geldiğini göreceğiz.

 

Yepyeni makalelerde görüşmek dileğiyle :)

Veysel Uğur KIZMAZ
Bilgisayar Mühendisi
veysel@ugurkizmaz.com
www.ugurkizmaz.com