AngularJS Template (Asp.net WebService)

Bu yazıda oluşturduğumuz ürünler template sayfasını ile veri tabanındaki kayıtları birleştireceğiz.

Öncelikle bilmeniz gereken bu kavram bir önceki yazının devamı olduğu için bir önceki yazının sonunda paylaştığım dosyayı indirip onun üzerinden devam etmeniz gerekir.

Bir önceki yazıda index sayfası için anasayfa.html adında bir template dosyası oluşturmuştuk. Bu anasayfa.html sayfası içinde anaSayfaController adında bir kontrol tanımlamıştık.

2.Adım: hakkimizda.html dosyası açıp aşağıdaki html kodlarını yapıştırın.


<h1>{{baslik}}</h1>

<div>
   Kurumda Çalışan Personel Listesi
</div>

<ul>

    <li ng-repeat="personel in personeller">

        {{personel.ad}}

    </li>

</ul>

<h1>{{baslik}}</h1>

<div>

Kurumda Çalışan Personel Listesi

</div>

<ul>

</li>

</ul>

3.Adım: jskod.js dosyasını açıp 23.satırdan sonraki hakkimizdaController bağlantısını 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 ediyorum.


.controller("hakkimizdaController", function ($scope,$http) {
$scope.baslik = "Kurumsal Bilgi";
$scope.aciklama = "Personel Bilgilerimiz";
$http.get("PersonelServis.asmx/tumPersoneller")
.then(function (cevap) {
$scope.personeller = cevap.data;
})
});

.controller("hakkimizdaController", function ($scope,$http) {

$scope.baslik = "Kurumsal Bilgi";

$scope.aciklama = "Personel Bilgilerimiz";

$http.get("PersonelServis.asmx/tumPersoneller")

.then(function (cevap) {

$scope.personeller = cevap.data;

})

});

4.Adım: Projeye personel.cs adında bir sınıf ekleyip, aşağıdaki kodları yapıştırın.


namespace WebApplication2
{
public class Personel
{
public int id { get; set; }
public string ad { get; set; }
public string soyad { get; set; }
public string cinsiyet { get; set; }
}
}

namespace WebApplication2

{

public class Personel

{

public int id { get; set; }

public string ad { get; set; }

public string soyad { get; set; }

public string cinsiyet { get; set; }

}

5.Adım: Bu aşamada SQL Server ile tblPersoneller tablosunu aşağıdaki gibi oluşturup, içerisine bir kaç tane örnek kayıt giriniz.


Create table tblPersoneller
(
Id int primary key identity,
Ad nvarchar(50),
Soyad nvarchar(10),
Cinsiyet nvarchar(10)
)
Go



Insert into tblPersoneller values ('Ali', 'Sade', 'Erkek')
Insert into tblPersoneller values ('Yusuf', 'Yurdun', 'Erkek')
Insert into tblPersoneller values ('Ayşe', 'Kürekçi', 'Kadın')
Insert into tblPersoneller values ('Nurettin', 'Başer', 'Erkek')
Insert into tblPersoneller values ('Emel', 'Uyak', 'Los Kadın')

Go

Create table tblPersoneller

(

Id int primary key identity,

Ad nvarchar(50),

Soyad nvarchar(10),

Cinsiyet nvarchar(10)

)

Insert into tblPersoneller values ('Ali', 'Sade', 'Erkek')

Insert into tblPersoneller values ('Yusuf', 'Yurdun', 'Erkek')

Insert into tblPersoneller values ('Ayşe', 'Kürekçi', 'Kadın')

Insert into tblPersoneller values ('Nurettin', 'Başer', 'Erkek')

Insert into tblPersoneller values ('Emel', 'Uyak', 'Los Kadın')

6.Adım: PersonelServis.asmx servisini oluşturup aşağıdaki şekilde düzenliyoruz. PersonelServis.asmx dosyasının tamamını yazdım, kendinize göre düzenlemeniz gerekebilir.


using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Serialization;

namespace WebApplication2
{
/// <summary>
/// Summary description for PersonelServis
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 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 PersonelServis : System.Web.Services.WebService
{
SqlConnection con;

[WebMethod]
public void TumPersoneller()
{
List<Personel> listPersoneller = new List<Personel>();

/*sql bağlantı cümlenizi kendi sunucunuza göre düzenleyin*/
using (con = new SqlConnection("server=.\\SQLEXPRESS; Initial Catalog=yazilimbilisim;Integrated Security=SSPI"))
{
SqlCommand cmd = new SqlCommand("select * from tblPersoneller", con);
con.Open();
SqlDataReader rdr = cmd.ExecuteReader();
while (rdr.Read())
{
Personel personel = new Personel();
personel.id = Convert.ToInt32(rdr["Id"]);
personel.ad = rdr["Ad"].ToString();
personel.soyad = rdr["Soyad"].ToString();
personel.cinsiyet = rdr["Cinsiyet"].ToString();
listPersoneller.Add(personel);
}
con.Close();
}

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

}
}

using System;

using System.Collections.Generic;

using System.Configuration;

using System.Data.SqlClient;

using System.Linq;

using System.Web;

using System.Web.Services;

using System.Web.Script.Serialization;

namespace WebApplication2

{

/// <summary>

/// Summary description for PersonelServis

/// </summary>

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[System.ComponentModel.ToolboxItem(false)]

// 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 PersonelServis : System.Web.Services.WebService

{

SqlConnection con;

[WebMethod]

public void TumPersoneller()

{

List<Personel> listPersoneller = new List<Personel>();

/*sql bağlantı cümlenizi kendi sunucunuza göre düzenleyin*/

using (con = new SqlConnection("server=.\\SQLEXPRESS; Initial Catalog=yazilimbilisim;Integrated Security=SSPI"))

{

SqlCommand cmd = new SqlCommand("select * from tblPersoneller", con);

con.Open();

SqlDataReader rdr = cmd.ExecuteReader();

while (rdr.Read())

{

Personel personel = new Personel();

personel.id = Convert.ToInt32(rdr["Id"]);

personel.ad = rdr["Ad"].ToString();

personel.soyad = rdr["Soyad"].ToString();

personel.cinsiyet = rdr["Cinsiyet"].ToString();

listPersoneller.Add(personel);

}

con.Close();

}

JavaScriptSerializer JSONCevir = new JavaScriptSerializer();

this.Context.Response.ContentType = "application/json; charset=utf-8";

this.Context.Response.Write(JSONCevir.Serialize(listPersoneller));

}

Yapılan işlemini özetleyecek olursak. index.html içindeki <ng-view></ng-view> içinde şablonlarımız bağlantılara tıkladıkça yüklenecektir. hakkımızda şablonu yüklendiğinde hakkimizdaController çalıştırılacak ve post işlemini gerçekleştirip sql server üzerinden okuma yaparak personeller modelini oluşturacaktır.

Bir sonraki yazıda aynı işlemlerin PHP ile nasıl yapılacağını anlatacağım.

Örnek uygulamayı indirip sql dosyasını ve sql bağlantısını doğru şekilde yapıp örneği çalıştırın. veritabani.sql dosyası ile veritabanını oluşturabilrisiniz.

Uygulamanın ASP.NET ile yapılmış örneğini indirmek için tıklayın

AngularJS Template (Asp.net WebService)

İlgili

1 Yorum

Yorum Yap X

Bunu paylaş:

İlgili

İlginizi Çekebilir

1 Yorum

Yorum Yap X