Birbirine Bağlı ComboBoxları AngularJS ve WebApi Kullanarak Doldurma

Selamlar;

Bugün bana birçok sefer sorulan birbirine bağımlı, yani biri seçilmeden diğerinin seçilemeyeceği “<select>” html elementlerinin AngularJs ve WebApi kullanılarak nasıl doldurulacağını hep beraber inceleyeceğiz.

Öncelikle Visual Stuio 2015’de bir WebApi projesi oluşturulur. İlgili comboları dolduran data modelleri aşağıdaki gibidir: İlk combo oyun konsolu(Console) seçimidir. 2. combo seçilen oyun konsoluna göre oyunun belirlenmesidir(Game). Son combo seçilen oyuna göre satıldığı dükkanların(Shop) listesidir.

Şimdi sıra geldi örnek olması amacı ile ilgili modellerin data ile doldurulmasına. Aşağıda “Consoles, Games ve Shops” listelerinin birbirine bağımlı olarak, dummy data ile nasıl doldurulduğu görülmektedir.

Console

Şimdi sıra geldi ilk sayfa yani “Index.cshtml” yüklenir iken aşağıda görüldüğü gibi Console datasını döndüren Get() methoduna:

İkinci olarak seçilen konsola göre oyunların listesinin çekilmesi aşağıdaki gibidir:

Son olarak seçilen oyunlara göre dükkanların listesinin çekilmesi aşağıdaki gibidir:

Yukarıda dikkat edilmesi gereken bir nokta da “id”‘ye göre 2 farklı Get() methodunun çağrılmasıdır. Bunun sağlanabilmesi için “App_Start/WebApiConfig.cs” altına aşağıdaki route tanımlamaları yapılmalıdır. Aksi halde ilgili methodlara Web Api üzerinden erişilemez.

WebApiConfig.cs:

Web Api’de ValuesController.cs( Full):

Şimdi yeni bir Mvc projesi yaratıp solution’a ekleyelim. Öncelikle aşağıdaki paketleri NuGet’den indirelim. Burada angularJs  javacript framework’ünü kullanarak ilgili comboboxları dolduracağız.

lib

Aşağıda öncelikle angularjs ve jquery kütüpahaneleri sayfaya eklenmiştir. AngularJS kodları “<html>” tagları arasında “ng-app=’app'” ile tanımlı module arasında çalışmaktadır. AngularJS ile ilgili detaylı yazımı yandaki link‘den erişebilirsiniz. Sayfa yüklendiği zaman “Get()” methodu çalışmakta ve “GetConsoles” ile ilgili konsol kaydı json olarak çekilerek “$scope.Consoles” modeline doldurulmaktadır. Ayrıca konsol combosunda seçili eleman “$scope.selectedConsoles” parametresine atanmakta ve en başta “null” değer verilmektedir. Oyun kombosunun görünümü “$scope.isShow” parametresine bağlıdır. Ve daha henüz konsol seçilmediği için “false” değeri atanarak gizlenmesi sağlanmıştır.

Index.cshtml:

Server side tarafı için öncelikle aşağıdaki paket NuGet’den indirilir.

Newton

Aşağıdaki namespace’ler HomeController.cs sayfasına dahil edilir.

HomeController.cs tarafında ilk sayfa yüklenirken “script” tarafından çağrılıp, tüm konsolları çeken “GetConsoles()” methodu aşağıdaki gibidir: WebApi servisi “http://localhost:65330” url’inden yayın yapmaktadır. İlgili servis, “HttpClient” ile(“http://localhost:65330/api/Games”) url’inden asenkron olarak request çekip, dönen string datayı “Console” sınıfına convert edip “Json” olarak geri döndürür.

Games

HomeController.cs/GetConsoles():

consolsec

Index.cshtml/Konsol Combosu: İlk konsol combosu aşağdaki gibi “$scope.Consoles” modeline “ng-model” directive ile bağlanır. Bir diğer “ng-options” directive ile name ve value değerlerini, herbir Item için çeker ve ilgili listeyi doldurur. Herhangi bir eleman seçildiği zaman “ng-change” directive’i ile “GetGames()” angularjs methodu çağrılır.

“GetGames()” methodu aşağıdaki gibidir: Amaç seçilen konsol tipine göre oyun combosunu doldurmaktır. Bunun için HomeController’daki “GetGames()” methoduna request atılır. Parametre olarak consol combosundan seçilen eleman “$scope.selectedConsoles” değeri gönderilir. Dönen result “$scope.Games” parametresine atanır. Böylece “ConsoleID” parametresi ile ilgili oyun combosu doldurulacaktır. Bu arada seçili oyunu temsil eden “$scope.selectedGames”‘e null değeri atanır. “$scope.isShopShow=false” ile de dükkanlar combosunun gizlenmesi sağlanır. Request sonucu olumlu dönmüş ise “$scope.isShow=true” ile ilgili oyun combosu görünür hale getirilir.

HomeController.cs/GetGames(): Aşağıda client tarafında konsol seçildiği zaman buna bağlı oyunların web api servisinden çekildiği method görülmektedir. WebApi servisi “http://localhost:65330” url’inden yayın yapmaktadır. İlgili servis, “HttpClient” ile(“http://localhost:65330/api/Games/”+ConsoleID) url’inden asenkron olarak request çekip, dönen string datayı “Game” sınıfına convert edip “Json” olarak geri döndürür.

Game

Index.cshtml/Oyun Combosu: Oyun combosu aşağdaki gibi “$scope.selectedGames” modeline “ng-model” directive ile bağlanır. “ng-options” directive ile name ve value değerlerini, herbir oyun elemanı için çeker ve ilgili listeyi doldurur. Herhangi bir eleman seçildiği zaman “ng-change” directive’i ile “GetShops()” angularjs methodu çağrılır.

“GetShops()” methodu aşağıdaki gibidir: Amaç seçilen oyun tipine göre dükkan combosunun doldurulmasıdır. Bunun için HomeController’daki “GetShops()” methoduna request atılır. Parametre olarak “GameID” için oyun combosundan seçilen eleman “$scope.selectedGames” değeri gönderilir. Dönen result “$scope.Shops” parametresine atanır. Böylece “GameID” parametresi ile ilgili shop yani seçilen oyunun satıldığı dükkanlar combosu doldurulacaktır. Request sonucu olumlu dönmüş ise “$scope.isShopShow=true” ile ilgili dükkan combosu görünür hale getirilir.

HomeController.cs/GetShops(): Aşağıda client tarafında oyun seçildiği zaman buna bağlı dükkanların web api servisinden çekildiği method görülmektedir. WebApi servisi “http://localhost:65330” url’inden yayın yapmaktadır. İlgili servis, “HttpClient” ile(“http://localhost:65330api/GetShops/”+GameID) url’inden asenkron olarak request çekip, dönen string datayı “Shop” sınıfına convert edilip “Json” olarak geri döndürür.

shop

Index.cshtml/Dükkan Combosu: Dükkan combosu aşağdaki gibi “$scope.selectedShops” modeline “ng-model” directive ile bağlanır. “ng-options” directive’i ile name ve value değerlerini, herbir dükkan elemanı için çeker ve ilgili listeyi doldurur.

Index.cshtml(Full):

HomeController.cs(Full):

Yukarıdaki örnekde de görüldüğü gibi birbirine bağlı, açılır liste elemanları AngularJS Javascript Framework’ü kullanılarak ajax post ile ilgili datayı web api bir servisten çekip asenkron olarak yüklemektedir.

Geldik bir makalenin daha sonuna. Yeni bir makalede görüşmek üzere hoşçakalın.

Source Code: http://www.borakasmer.com/projects/TrigerCombo.rar

Herkes Görsün:

Bunlar da hoşunuza gidebilir...

2 Cevaplar

  1. cagri dedi ki:

    oo abi eline sağlık . abi web api token authentication konusunda bir makaleni bekliyorum .

  2. Serkan dedi ki:

    Küçük bir katkı, hem oluşan hata gitmekte, hemde sunum tarafı daha düzgün olsun diye :)

    var app = angular.module(‘app’, []);
    app.controller(‘Controller’, function ($scope, $http) {
    $scope.isShow = false;
    $scope.isShopShow = false;
    $scope.selectedConsoles = null;
    $scope.Consoles = [];
    $http({
    method: ‘GET’,
    url: ‘/Home/GetConsoles’
    }).success(function (result) {
    $scope.Consoles = result;
    });

    $scope.GetGames = function ()
    {
    $scope.selectedGames = null;
    $scope.Games = [];

    $scope.isShopShow = false;

    if ($scope.selectedConsoles != null)
    {
    $http({
    method: ‘GET’,
    url: ‘/Home/GetGames’,
    params: { ConsoleID: $scope.selectedConsoles }
    }).success(function (result) {
    $scope.Games = result;
    $scope.isShow = true;
    });
    }
    else {
    $scope.isShopShow = false;
    $scope.isShow = false;
    }

    }
    $scope.GetShops = function () {
    $scope.selectedShops = null;
    $scope.Shops = [];
    if ($scope.selectedGames != null)
    {
    $http({
    method: ‘GET’,
    url: ‘/Home/GetShops’,
    params: { GameID: $scope.selectedGames }
    }).success(function (result) {
    $scope.Shops = result;
    $scope.isShopShow = true;
    });
    }
    else {
    $scope.isShopShow = false;
    }
    }
    });

Bir Cevap Yazın

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