AngularJS – $http Servis İle Sunucu İşlemleri

Merhaba,

Web tabanlı projelerde sunucu ile etkileşime girmek işin esas noktasını teşkil etmektedir. AngularJS frameworkünde sunucu ile etkileşime girmemizi sağlayan servis $http olarak ayarlanmıştır. Bu içeriğimizde $http servisini tüm yönleriyle ele alacağız.

Makale sürecinde Asp.NET MVC mimarisi üzerinde server işlemlerimizi gerçekleştireceğimizi ve aşağıdaki “Personel” isimli classı ve “ServerController” isimli controllerı örnek olarak kullanacağımızı belirterek konuya başlayabiliriz.

    class Personel
    {
        public string Adi { get; set; }
        public string SoyAdi { get; set; }
        public int PersonelNo { get; set; }
    }
    public class ServerController : Controller
    {
        List<Personel> PersonelListesi = new List<Personel>
        {
                new Personel{ Adi = "Gençay", SoyAdi = "Yıldız", PersonelNo = 1 },
                new Personel{ Adi = "Mehmet", SoyAdi = "İlker", PersonelNo = 2 },
                new Personel{ Adi = "Naci", SoyAdi ="Conker", PersonelNo = 3 },
                new Personel{ Adi = "Mustafa", SoyAdi = "Yıldız", PersonelNo = 4 }
        };
        public ActionResult Index()
        {
            return View();
        }
        [HttpGet()]
        public JsonResult PersonelGetir()
        {
            return Json(PersonelListesi, JsonRequestBehavior.AllowGet);
        }
        public JsonResult PersonelEkle(Personel model)
        {
            PersonelListesi.Add(model);
            return Json(PersonelListesi, JsonRequestBehavior.AllowGet);
        }
    }

$http Servisi İle Get İşlemleri

$http servisini get işlemlerinde aşağıdaki örnekte olduğu gibi kullanmaktayız.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.min.js"></script>
    <script>
        angular.module("UygulamaModule", [])
            .controller("UygulamaController", function ($scope, $http) {
                $scope.PersonelleriGetir = function () {
                    $http.get("@Url.Action("PersonelGetir", "Server")").then(function (gelen) {
                        $scope.TabloGoster = true;
                        $scope.PersonelListesi = gelen.data;
                    });
                }
            });
    </script>
</head>
<body ng-app="UygulamaModule" ng-controller="UygulamaController">
    <input type="button" value="Personelleri Getir" ng-click="PersonelleriGetir()" />
    <table ng-show="TabloGoster">
        <thead>
            <tr>
                <th>ID</th>
                <th>Ad</th>
                <th>Soyad</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="personel in PersonelListesi">
                <td>{{personel.PersonelNo}}</td>
                <td>{{personel.Adi}}</td>
                <td>{{personel.SoyAdi}}</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

AngularJS - $http Servis İle Sunucu İşlemleri

$http Servisi İle Post İşlemleri

$http ile post işlemini aşağıdaki örnekte detaylıca ele almış bulunmaktayız.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.min.js"></script>
    <script>
        angular.module("UygulamaModule", [])
            .controller("UygulamaController", function ($scope, $http) {
                $scope.PersonelEkle = function () {
                    var Personel = {
                        Adi: $scope.Adi,
                        SoyAdi: $scope.SoyAdi,
                        PersonelNo: $scope.PersonelNo
                    };
                    $http.post("@Url.Action("PersonelEkle", "Server")", Personel)
                        .then(function onSuccess(response) {
                            $scope.TabloGoster = true;
                            $scope.PersonelListesi = response.data;
                        });
                }
            });
    </script>
</head>
<body ng-app="UygulamaModule" ng-controller="UygulamaController">
    <div>
        Adı : <input type="text" ng-model="Adi" />
        <br />
        Soyadı : <input type="text" ng-model="SoyAdi" />
        <br />
        Personel No :<input type="text" ng-model="PersonelNo" />
        <input type="button" value="Personel Ekle" ng-click="PersonelEkle()" />
    </div>

    <table ng-show="TabloGoster">
        <thead>
            <tr>
                <th>ID</th>
                <th>Ad</th>
                <th>Soyad</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="personel in PersonelListesi">
                <td>{{personel.PersonelNo}}</td>
                <td>{{personel.Adi}}</td>
                <td>{{personel.SoyAdi}}</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

AngularJS - $http Servis İle Sunucu İşlemleri

Bir yazımızında sonuna gelmiş bulunmaktayız.

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

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

*

Copy Protected by Chetan's WP-Copyprotect.