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
//
}
}

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;

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;
}

[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));

}

[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));

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="https://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>

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>

<thead>

<tr>

<th>Soyad</th>

</tr>

</thead>

<tbody>

<td> {{ personel.Id }} </td>

<td> {{ personel.Ad }} </td>

<td> {{ personel.Soyad }} </td>

</tr>

</tbody>

</table>

</div>

</body>

Faydalanılan Kaynaklar

http://stackoverflow.com/questions/211348/how-to-let-an-asmx-file-output-json

http://stackoverflow.com/questions/19563641/how-to-get-json-response-from-a-3-5-asmx-web-service

http://www.c-sharpcorner.com/UploadFile/8ef97c/web-service-in-Asp-Net-part-4/

http://www.codeproject.com/Questions/775153/Asp-net-Web-service-return-json-format-data

http://www.c-sharpcorner.com/article/consuming-asp-net-web-service-in-angularjs-using-http/

İlgili

Yorum

AngularJS Template (Asp.net WebService) | Yazılım Bilişim Programlama dedi ki:

Kasım 29, 2016, 10:29 pm

[…] aşağıdaki şekilde değiştirin. Daha önceki yazılarda asp.net servis ile angularjs bağlantısı hakkında yazı yazmıştım. Bu kavram üzerinden anlatıma devam […]

Cevapla
AngularJS Dersleri | Yazılım Bilişim Programlama dedi ki:

Ağustos 23, 2016, 4:20 am

[…] Konu:19: AngularJS ASP.NET Servise Bağlanma […]

Cevapla

Faydalanılan Kaynaklar

Bunu paylaş:

İlgili

İlginizi Çekebilir

Yorum

Yorum Yap X