Perşembe , 23 Şubat 2017
Anasayfa » JavaScript » AngularJS » AngularJS ASP.NET Servise Bağlanma

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.

4Screenshot_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

 

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

 

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

 

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

 

Ö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.

 

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

 

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

Screenshot_20

 

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/

 

 

 

 

Hakkında Hayri

İlginizi Çekebilir

AngularJS Route Yapma #2

Route ve template kavramı ile ilgili ikinci yazımızda oluşturduğumuz kontrolleri template dosyalarına bağlamayı anlatacağım.  Bu …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir