"/>"/>
Yazılım Dilleri
Asp.Net 4.5 Kitabı
Skip Navigation Links

Asp.Net'te Jquery ile C# Methodlarını (WebMethod) Çağırma

Jquery kullanarak Asp.Net'te C# codebehindda oluşturulan webmethodları nasıl çağıracağımızı öğrenelim.

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

 

Yorumlar (1)

  1. Avatar

    Öncelikle katkılarınızdan dolayı teşekkür ederim. Ben Ajax kodları ile static bir fonksiyonu çağırıyorum. Ancak static fonksiyon içinde [ Page.Master.FindControl("UCFProductCriterias") as UserControl ] komutu maalesef derleme sırasında An object reference is required for the non-static field, method, or property 'System.Web.UI.Page.Master.get' mesajı alıyorum. BU durumu nasıl giderebilirim acaba? Yardımcı olursanız çok sevinirim. Başarılar dilerim.

Yorum Yap

Mail listesine katılmak için tıklayınız

Hakkımdaki son bilgilere anlık erişmek için mail listesine katılabilirsiniz.