Uzun süredir bloğa yazı eklemiyordum ama bugun bunu telafi edecek güzel bir örnek ile geri dönüş yapmak istiyorum Smile Yapacağımız örnekte bir XML Web Service olacak ve bu Service Northwind veritabanının Categories tablosundan aldıgı verileri öncelikle bizim yazacağımız CategoryCollection sınıfına aktaracak ve daha sonra bu koleksiyonu JSON formatına çevirip servisten geri döneceğiz.Daha sonra JSON formatındaki bu veriyi bir javascript fonksiyonu içerisinden yakalayıp Html tablosuna convert edecek, bu tabloyu ise istemci taraflı button kontrolünün onClick eventinde sayfada göstereceğiz..biraz karışık gibi gözükebilir ama zevkli olacağına inanıyorum..

Öncelikle bir Asp.net projesi açalım , içine bir adet XML Web Service ekleyelim ve ihtiyacımız olacak class'ları oluşturmaya başlayalım ;

Öncelikle Veritabanından kayıt döndüreceğim tabloya karşılık gelen bir Category sınıfı oluşturalım ;

 

    public class Category
    {
        public string CategoryName { get; set; }
        public string Description { get; set; }
    }

 

Daha sonra bu kategorileri ekleyebileceğimiz bir koleksiyon oluşturalım , bunun için CollectionBase sınıfından türeyen bir sınıf oluşturmak yeterli olacak ;

 

    public class CategoryCollection : CollectionBase
    {
        public void Add(Category kat)
        {
            this.List.Add(kat);
        }
 
        public void Remove(Category kat)
        {
            this.List.Remove(kat);
        }
 
    }


Veritabanından çekeceğimiz kategorileri Web Servisten geriye JSON formatında döndüreceğimizi ve bu verinin istemci tarafında bir Javascript methodu içerisinden yakalanacağını söylemiştik ,bunun için Object tipinde parametre alıp geriye string tipinde JSON verisi döndüren bir Extension method yazmak yeterli olacak ;

 

    public static class ExtManager
    {
    
        public static string ToJson(this object obj)
        {
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            return serializer.Serialize(obj);
        }
 
    }

 

Şimdi XML Web Service'imiz içerisinde veritabanından çektiğimiz kaydı , önce yazdığımız koleksiyona ekleyelim daha sonrada JSON formatına çevirip geriye string olarak dönelim ;

    // 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 MyService : System.Web.Services.WebService
    {  
        string conString = ConfigurationManager.ConnectionStrings["NorthConString"].ConnectionString;
        SqlConnection conn;
        SqlCommand cmd;
        SqlDataReader dr;
        Category kat;
        CategoryCollection catCol;
     
        [WebMethod]
        public string JsonCategories()
        {
            conn = new SqlConnection(conString);
            cmd = new SqlCommand("SELECT CategoryName , Description FROM Categories", conn);
            cmd.CommandType = CommandType.Text;
            conn.Open();
            dr = cmd.ExecuteReader();
            catCol = new CategoryCollection();
            while (dr.Read())
            {
                kat = new Category { CategoryName = dr[0].ToString(), Description = dr[1].ToString() };
                catCol.Add(kat);
            }
            conn.Close();
            return catCol.ToJson();
 
        }

ToJson methodunu extension method olarak yazdığımız için CategoryCollection instance'i üzerinden direk çağırabildik.Burada önemli bir nokta ScriptService attribute'ünün uncomment edilmesi , zaten gerekli bilgi commet satırı ile bize verilmiş ;

  // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
    [System.Web.Script.Services.ScriptService]

Bu web servisin AJAX kullanılarak script içerisinden çağırılabilmesi için alt satırı uncomment edin diyor , bizim de bu örnekte yapmak istediğiniz aslında tamamen bu Smile

Şimdi uygulamaya bir web sayfası ekleyin ve içerisinde herhangi bir yere aşağıdaki gibi bir div elementi açın , veriyi bu div'in içerisinde göstericez ;


   <div id="divCategories">
   </div>

Şimdi uygulamaya bir ScriptManager ekleyin ve içerisinde Services tag'ı açıp Web Servisinizin referansı gösterin ;

 

  <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
            <asp:ServiceReference Path="~/Services/MyService.asmx" InlineScript="true" />
        </Services>
    </asp:ScriptManager>

 

Javacript içerisinden Web Servis methodlarını kullanmak için yapmamız gereken aslında sadece bu kadar ve çok basit.

Şimdi , Javascript fonksiyonlarımız yazmak için enternal bir js dosyası oluşturmak istiyorum , sayfanın içinede direk yazılabilir ama böylesi her zaman daha güzel ;

<head runat="server">
    <title></title>
    <script src="Ajax/GetCategories.js" type="text/javascript"></script>

function CallService() {
    WebApplicationWebService.Services.MyService.JsonCategories(OnResult);
}
 
function OnResult(result) {
 
    //CallService methodundan gelen json verisi
    var jsonData = result;
    //Json'u html table'a çevir
    var htmlTable = CreateTableView(jsonData, 'jsonTable');
    // table'i div'in html'ine ekle.
     document.getElementById("divCategories").innerHTML = htmlTable;
 
}

CallService js methodunda gördüğünüz gibi Web Service'e direk olarak ulaşabilmekteyim , daha sonra dönen veriyi OnResult fonksiyonu içerisinde jsonData değişkenine aktarmaktayım.Aşağıda yazacağım CreateTableView methodu ise Json verisini alıp html tabloya dönüştürüyor.. aldığı ikinci parametre ise tabloya uygulamak istediğim css class'i. Geriye dönen html'ide DivCategories div'inin html'ine aktarıyorum.

 

.jsonTable, td, th
 {
 border:1px solid green;
 }
 .jsonTable th
 {
 background-color:green;
 color:white;
 }


function CreateTableView(objArray, theme, enableHeader) {
   
    if (theme === undefined) {
        theme = 'mediumTable'; //default theme
    }
 
    if (enableHeader === undefined) {
        enableHeader = true; //default enable headers
    }

    var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
 
    var str = '<table class="' + theme + '">';
 
    // table head
    if (enableHeader) {
        str += '<thead><tr>';
        for (var index in array[0]) {
            str += '<th scope="col">' + index + '</th>';
        }
        str += '</tr></thead>';
    }
 
    // table body
    str += '<tbody>';
    for (var i = 0; i < array.length; i++) {
        str += (i % 2 == 0) ? '<tr class="alt">' : '<tr>';
        for (var index in array[i]) {
            str += '<td>' + array[i][index] + '</td>';
        }
        str += '</tr>';
    }
    str += '</tbody>'
    str += '</table>';
    return str;
}

 

Şimdi yapmamız gereken tek şey js CallService fonksiyonunu bir html butonu altında onclick event'ine eklemek.

 

  <input id="Submit1" type="button" value="Kategori Listele!" onclick='CallService();' />


artık sonuca bir tık kadar uzaktayız Smile