AngularJS ASP.NET Servise Bağlanma

Angularjs ve asmx servis kullanarak JSON formatında servisten okuma yapıp, kayıtları listeleyeceğiz.

1.Adım :Öncelikle bağlantı için asp.net projemizi oluşturduk.

Screenshot_43

2.Adım: Web Servis Dosyasını oluşturduk.

4 Screenshot_1

Screenshot_2

3.Adım : Kendi servis sınıfımızı kullanacağız. İsterseniz Visual Studio tarafından oluşturulan .cs dosyasını silebilirsiniz.

Screenshot_3

4.Adım :Kendi servis sınıfımızı ve personel sınıflarımız aşağıdaki şekilde oluşturuyoruz.

Screenshot_4

Screenshot_5

Screenshot_6

5.Adım: Personel sınıfını aşağıdaki gibi oluşturuyoruz.

Screenshot_7

public class Personel
{
public int Id { get; set; }
public string Ad { get; set; }
public string Soyad { get; set; }
public Personel()
{
//
// TODO: Add constructor logic here
//
}
}

6.Adım: asmx dosyasını açıp kullanılacak olan servis dosyasını şekildeki gibi değiştiriyoruz.(Servis ismi için verdiğimiz sınıfın ve dosyanın adını yazın)

Screenshot_8

7.Adım: servis.cs dosyasını açıp using kısmını aşaşıdaki gibi kullanılacak olan kütüphaneleri yazın.

Screenshot_9

using System.Web.Services;
using System.Web.Script.Services;
using System.Web.Script.Serialization;

8.Adım: Servis sınıfına miras olarak System.Web.Services.WebService sınıfını belirtiyoruz.

Screenshot_14

9.Adım: Hazırladığımız web serviste veriyi XML ve JSON formatlarında almak için iki tane metod tanımlıyoruz.

GetPersonelXML()

GetPersonelJSON()

10.Adım: GetPersonelXML metodunun oluşturup [WebMetod] ajax ile çalışacağı bildirimini yapıyoruz.

Screenshot_15

[WebMethod]
public Personel[] GetPersonelXML()
{
Personel[] personeller = new Personel[]
{
new Personel()
{
Id=1,
Ad="Ali",
Soyad="Ver"
},
new Personel()
{
Id=2,
Ad="Murat",
Soyad="Dal"
}
};

return personeller;
}

11.Adım: GetPersonelJSON içinde yine aynı attribute [WebMetod] bildirimini yapıyoruz. Bu metodda dikkat edilmesi gereken kısım metod geriye değer döndürmüyor ve JSON ifadesini metod içinde ekrana basıyoruz.

Screenshot_16

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public void GetPersonelJSON()
{
Personel[] personeller = new Personel[]
{
new Personel()
{
Id=1,
Ad="Ali",
Soyad="Ver"
},
new Personel()
{
Id=2,
Ad="Murat",
Soyad="Dal"
}
};
JavaScriptSerializer JSONCevir = new JavaScriptSerializer();
this.Context.Response.ContentType = "application/json; charset=utf-8";
this.Context.Response.Write(JSONCevir.Serialize(personeller));

}

ÖNEMLİ: Eğer return kullanarak yapmış olsaydık aşağıdaki gibi bir kod oluşacaktı. XML içinde JSON dosyasını angularjs içinde kullanmak çok zor olacaktı.

Screenshot_18

ÖNEMLİ: Aşağıdaki kod ile JSON formatına çevirip ekrana yazdırdığımızda ise elde edeceğimiz görüntü aşağıdaki gibi JSON formatında ve angularjs hiç bir değişiklik yapmadan kullanılacak formatta oldu.

JavaScriptSerializer JSONCevir = new JavaScriptSerializer();
this.Context.Response.ContentType = "application/json; charset=utf-8";
this.Context.Response.Write(JSONCevir.Serialize(personeller));

Screenshot_17

12Adım: Örnek uygulama için bir tane Web Form oluşturuyoruz.

Screenshot_12

Screenshot_13

13.Adım: AngularJS kodlarını oluşturduğumuz Web Forma yazıyoruz.

Screenshot_19

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>

var app = angular
.module("persModul", [])
.controller("persController", function ($scope, $http) {

var islem = $http({
method: "post",
url: "WebService.asmx/GetPersonelJSON"
});


islem.success(function (data) {
console.log(data);
$scope.personeller = data;
});

});

</script>

14.Adım : Kayıtları ekran listelemek için ng-repeat oluşturma

Screenshot_20

<body ng-app="persModul">
<div ng-controller="persController">

<table border=1>
<thead>
<tr>
<th>Id</th>
<th>Ad</th>
<th>Soyad</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="personel in personeller">
<td> {{ personel.Id }} </td>
<td> {{ personel.Ad }} </td>
<td> {{ personel.Soyad }} </td>
</tr>
</tbody>
</table>
</div>
</body>