Asp.Net Web User Control İçinden Jquery ile WebMethod Kullanımı

Web User Control içinden, kontrolün server-side’ına yazdığımız bir webmethod’a nasıl ulaşılacağını öğrenelim.

01.03.2016

4818

Önceki makalemizde Asp.Net projelerinde JQuery kullanarak sunucu tarafında oluşturulan WebMethod’lara nasıl erişim sağlandığını öğrenmiştik. Şimdi bu işlemi Asp.Net Web User Control içinden nasıl yapacağımızı, yani Web User Control içinden, kontrolün server-side’ına yazdığımız bir webmethod’a nasıl ulaşılacağını öğrenelim.

İlk yöntem, server-side kodu, oluşturacağımız user controlü içerisinde barındıran sayfaya eklemek olacaktır.

WebUserControl isimli user controlü oluşturalım. Kontrol içine bir adet input > button ekleyelim. Butona tıklandığında sunucu tarafındaki Goster isimli WebMethod’u çağırsın. User controlü de Default.aspx içerisine yerleştirelim.

NOT: Bu işlemin benzerini Asp.Net'te Jquery ile C# Methodlarını (WebMethod) Çağırma makalesinde yaptığımız için tekrar anlatmıyorum, ilgili makaleyi inceleyebilirsiniz.

WebUserControl.ascx

<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 () {
        $('#buton').click(function () {
            $.ajax({
                type: "POST",
                url: "Default.aspx/Goster",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    alert(msg.d);
                }
            })
            return false;
        });
    });
</script>
<input type="button" value="Tıkla" id="buton" />

Default.ascx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Src="~/WebUserControl.ascx" TagName="Kontrol" TagPrefix="uc" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <uc:Kontrol runat="server" ID="kontrol" />
    </form>
</body>
</html>

Default.aspx.cs

public partial class _Default : System.Web.UI.Page
{
    [WebMethod]
    public static string Goster()
    {
        return "İşlem başarılı";
    }
}

Projeyi çalıştırıp Default.aspx içindeki butona tıkladığınızda Goster metodundan geri dönen “İşlem başarılı” metni, uyarı mesajı (alert) olarak görünecektir.

Asp.Net Web User Control İçinden Jquery ile WebMethod Kullanımı

Bu kullanım user controlün doğasına aykırı bir kullanımdır. Çünkü user control içerisinde bulunan Ajax fonksiyonuna tanımladığımız url parametresi, bir sayfaya bağımlı olarak çalışacaktır. Oluşturacağımız user controlün sayfa bağımsız çalışması gerekmektedir. Bu sebeple kodlamamızı buna uygun hale getirmeliyiz.

İlk adımımız, user control için interface oluşturmaktır. Bu interface sayesinde user controlün eklendiği tüm sayfalarda, user control içindeki metodlara kolaylıkla erişebileceğiz. Interface’in adı IWebUserControl olsun. İçinde de webmethod olarak tanımlayacağımız metodu ekleyelim.

public interface IWebUserControl
{
    string Goster();
}

User control sınıfına IWebUserControl interfaceinin kalıtımını verip Goster metodunu oluşturalım.

public partial class WebUserControl : System.Web.UI.UserControl, IWebUserControl
{
    public string Goster()
    {
        string result = "İşlem başarılı";
        return result;
    }
}

User controldeki verilere sayfa içerisinden erişmemiz gerekecektir. Bunu sayfa bazlı olarak yapmak yerine bir base sınıf oluşturalım ve bu base sınıf üzerinden gerçekleştirelim. Oluşturacağımız sınıftan da System.Web.UI.Page sınıfının kalıtımını aldığımız taktirde bunu web form (Default.aspx)’e katılım olarak verebiliriz.

Oluşturacağımız base sınıfın adı BaseWebUserControl olsun.

public class BaseWebUserControl : System.Web.UI.Page
{
    private static System.Web.UI.Page _page;
    private static System.Web.UI.Page Page
    {
        get
        {
            if(_page == null)
                _page = new System.Web.UI.Page();
            return _page;
        }
    }

    [WebMethod]
    public static string Goster()
    {
        IWebUserControl userControl = ((IWebUserControl)Page.LoadControl("~/WebUserControl.ascx"));
         
        return userControl.Goster();
    }
}

Page ile Goster metodunda kullanacağımız System.Web.UI.Page türündeki nesneyi tanımlıyoruz.

Goster metodu, static bir web method, yani sayfa (Default.aspx) içinde Jquery ile çağıracağımız metoddur. Bu metodda oluşturduğumuz WebUserControl.ascx dosyasını yükleyip içindeki Goster() metodunu çağırıyoruz. Biraz önce oluşturduğumuz IWebUserControl isimli interface’i Goster metodunu almak için burada kullanıyoruz.

Şimdi Default.aspx’te System.Web.UI.Page sınıfının kalıtımını kaldırıp BaseWebUserControl sınıfının kalıtımını verelim.

public partial class _Default : BaseWebUserControl
{

}

Default.aspx içerisine herhangi bir kod yazmaya gerke kalmadı, çünkü gerekli tüm işlemleri BaseWebUserControl isimli sınıfta tanımladık.

Projeyi çalıştırıp Default.aspx’e gelip butona tıkladığınızda “İşlem başarılı” mesajını alacaksınız.

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

Yazar Hakkında

Veysel Uğur KIZMAZ

www.ugurkizmaz.com

YazılımDilleri.Net projesinin lideri olan Veysel Uğur Kızmaz, Gazi Üniversitesi Bilgisayar Mühendisliği bölümü mezunudur. Bir çok projede çalışmış, yazılım alanında birçok eğitimler vermiştir. Şu an özel bir yazılım danışmanlık firmasında Sharepoint proje danışmanlığı ve proje yöneticiliği yapmaktadır. Veysel Uğur Kızmaz, dahil olduğu projelerin çeşitliliği sebebiyle farklı alanlarda uzmanlaşmıştır: .Net, Sharepoint, Java, Php, Javascript, SQL Server, Oracle, MySQL.

Yazar Hakkında

Sosyal Medya

0 Yorum

Yorum Yaz / Soru Sor

Son Yorumlar

En Güncel Sorular

En Son Cevap Verilen Sorular

Twitter

En Çok Okunanlar

Sponsorlar