CRUD – AngularJS ile MVC 6

Selamlar;

Bugün Mvc’de AngularJs javascript framework’ünü kullanarak CRUD işlemler nasıl yapılır sorusuna hep beraber cevap arayacağız. Öncelikle en basit hali ile aşağıda görüldüğü gibi Site adında bir tablo oluşturulur. Sadece iki kolonu vardır. Amaç en basit şekilde ilgili işlemleri yapmak ve konuyu fazla uzatmadan anlaşılırlığı arttırmaktır.

site

Database işlemlerini aşağıda görüldüğü gibi Class Library olan Data adında başka bir projede yaratılmıştır. DB  katmanında Code First kullanılmıştır.

Code

Add NewItem’dan Entity Data Model ve sonra da Code First from database seçilir.

Data

İlgili Sites tablosunun poco nesnesi aşağıdaki gibidir.

Şimdi sıra geldi Mvc projesini yaratmaya. Aşağıda görüldüğü gibi Dashboard Controller ve Site action yaratılır.

Site.cshtml: Sitelerin listelenmesi, aranması, yeni bir sitenin eklenmesi, düzenlenmesi ve silinmesi işlerini single page olarak yapacağız. Öncelikle AngularJS nugetten aşağıda görüldüğü gibi indirilir.

Angular2

Şimdi sıra geldi AngularJs için ilgili Controller ve app’in oluşturulmasına: Sayfa yüklenme sırasında ilgili sitelerin çekilmesi ve angularJS’de $scope.Sites’a atılması aşağıda görüldüğü gibi yapılmaktadır.

Dashboard/GetSites(): İlgili data Json formatında Coder First kullanılarak aşağıdaki gibi döndürülmektedir.

Site2

Site.cshtml: Aşağıda “app” ve “controller”‘ın çalışacağı alan belirlendikten sonra doldurulan “$scope.Sites” “data-ng-repeat” ile gezilerek ilgili tablo içine basılmıştır. Tepede arama yapılması için “txtSearch” id’li bir input konulmuş ve “data-ng-model”‘i Sitelerin “Name” özelliğine bağlanmıştır. Kısacası yazılan text “Name” alanı içerisinde aranacaktır. Hemen altına silme buttonu konmuş ve “ng-click” eventine “DelSites()” angularJS function’ı atanmıştır.  Tablonun hemen altına “edit-element” şeklinde bir Directive konmuştur. Ne işe yaradığını sonradan inceleyeceğiz. Hemen altınada “ng-click” event’ine “selectAll()” function’ı atanan bir checkbox konmuştur. Amaç tüm elemanları seçebilmektir. “ng-model”‘e Site modelinden bağımsız olan dinamik olarak oluşturulmuş “isSelectedAll” property’si bağlanmıştır. “data-ng-repeat” ile gezilirken “| filter:Name” filitresi kullanılmış böylece “Ara” kutucuğunda yazılan text’e göre istenen Site’nin bulunması sağlanmıştır. Herbir kayıdın başına checkbox koyulmuş, “ng-model”‘ine “site.IsDeleted” dinamik propertisi atanmış ve böylece silinecek kayıtlar belirlenmiştir. Tablo içine site ile ilgili alanlar “{{site.ID}} ve {{site.Name}}” ile yazılmıştır.

CrudMvc3

Öncelikle Sil checkbox’ı seçilince, tüm elemanların nasıl seçildiğini inceleyelim: Yukarıda görüldüğü gibi “isSelectAll” property’si checkbox’a “ng-model” ile bağlanmıştır. Aşağıda bu property’nin true veya false olmasına göre “$scope.Sites” tek tek gezilip “site.IsDeleted” property’sine Sil checkbox’ında seçilen değer atanır.

Şimdi sıra geldi seçili elemanların silinmesine: “Kayıtları Sil” button’una basılınca silinecek site’ların ID’leri “IsDeleted” özelliğine bakılarak “deletedSites” listesine eklenir. Daha sonra “DelSites()” action’ına post edilerek silinmesi sağlanır. Daha sonra silinmemiş kayıt listesi “list” gezilerek “$Scope.Sites”‘a tek tek atılır. Böylece tablo içinden silinmiş kayıtlar çıkarılmış olunur.

CrudMvcDel2

Dashboard/DelSites: Silinecek Sitelara ait “ID”‘ler “Where” koşulunda kullanılarak ilgili kayıtlar linq ile silinir.

Yeni Kayıt Ekleme: Hatırlarsanız Site.cshtml’de “<edit-element>” şeklinde bir directive vardı. Bilmiyenler için directive angularJS’de bir çeşit user control’dur. Aşağıda “E” yani element tipinde bir directive kullanılmıştır. Yani tek başına bir başka html element’e attach olmadan kullanılan nesnelerdir. “TemplateUrl” yani nesneyi oluşturan html başka bir dosyadan alınmıştır. Bu sayfa “/Dashboard/NewRecord” sayfasıdır.

CrudMvcNew

DashBoard/NewRecord: Dikkat ederseniz “Yeni Kayıt Ekle” buttonun’un “data-ng-click” eventine “Show()” methodu eklenmiştir. Ayrıca hemen altında yeni kayıt işlemi yapılacak “İsim”, “Ekle” ve “Kaydet” buttonları “Span” içine konmuştur. İlgili Span’ın “data-ng-show” özeliği, yani görünmesi “isShow” dynamic property’sine bağlıdır. Tahmin edebileceğiniz gibi “Show()” methodunda ilgili değişken sıra ile “True” yada “False” değerlerini alarak “Span” içindeki ilgili nesnelerin gösterilip gizlenmesini sağlanmıştır. “Ekle” button’unun “data-ng-click” eventinde “AddData()” function’ı “Kaydet” button’unun “data-ng-click” eventinde “SavaData()” function’ı çağrılmaktadır. Son olarak “txtSite” input alanı “data-ng-model” attribute ile yine dinamic olarak oluşan “NewSite” property’sine bağlanmaktadır.

Show(), AddData() ve SaveData() Functionları: “Show()” function’ı yukarıda anlatılandan farklı olarak ilgili button’un text’i görünme durumunda “İptal” ve gizlenme durumda “Yeni Kayıt Ekle” şeklinde değiştirilmektedir.

“AddData()” function’ında “$scope.Sites”‘a ismi yazılan yeni site “NewSite” property’si ile eklenmiştir. Buna bağlı olan diğer nesneler(table nesnesi) ilgili değişiklikten angularJS sayesinde etkilenip yeni kayıdı liste sonunda “ID” siz olarak gösterilmektedir. ID’nin olmamasının nedeni yeni eklenen site’ın daha database’e eklenmemiş olmasından kaynaklanmaktadır. Burada amaç database katmanına geçmeden client side taraflı istenen sayıda kaydın eklenmesi ve “Kaydet” işleminden sonra toplu olarak database kaydedilmesidir. Böylece performans olarak büyük bir kazanç sağlanacaktır.

“SaveData()” function’ında “data[]” dizisine “$scope.Sites” altında “ID”‘si null olan kayıtlar push edilerek yeni eklenecek kayıtlar bir dizi altına toplanmış olunur. Daha sonra ilgili kayıtlar “SaveSites()” action’ına parametre olarak gönderilerek database’e kaydedilir. İşlemin başarılı olması durumunda geri dönen tüm kayıtlar “$scope.Sites”‘a atanır. Buna bağlı tablo bundan etkilenerek başta “ID”‘si null olan kayıtlar artık database’e eklendiği için “ID” değerleri ile birlikte gözükür.

SaveSites Action: Aşağıda görüldüğü gibi List<> şeklinde gelen sites değerleri “AddRange()” methodu ile tek seferde toplu olarak kaydedilmiştir. Daha sonra GetSites() methodu tekrardan çağrılarak yeni eklenen kayıtlar da dahil olmak üzere tüm site kaydı geri döndürülmektedir.

CrudMvcCreate

Site Güncelleme: Site.cshtml aşağıdaki gibi güncellenir. Tüm kayıtların sonuna “Düzenle” adında bir button eklenir. “ng-click” eventine “Update()” function’ı düzenlenecek site’ın “Name” ve “ID”‘si ile birlikte çağrılır.

Site.cshtml:

Update

NewRecord.cshtm: Update işlemi için “edit-element” directive’inde bir takım düzenlemeler yaptık. “Ekle” buttonuna “btnAdded” id’sini verdik.

Update() Function: Burada aynı yeni kayıt  buttonu tıklanmış gibi işlemler yapılır. Tek fark “btnAdded” yani “Ekle” buttonu gizlenir. Güncelleme yapılacak “siteID” “$scope.NewID” parametresine atılır. Son olarak “btnSave” buttonun’un text’i “Güncelle” yapılır.

Update işlemi için bir değişiklik de “SaveData()” function’ı için yapılır: Aşağıda görüldüğü gibi “btnSave” yani kaydet button’unu text’ine bakılarak yeni bir kayıt mı yoksa var olan bir kaydın güncellenmesi mi işlemine karar verilir. Güncelleme işleminde “UpdateSite()” action’ına güncellenecek data, yani yeni “siteName” ve “ID” değerleri parametre olarak gönderilir. Action sonuç olarak tüm “Site” listesini geri döner. İlgili liste “$scope.Sites”‘a atanır. Böylece buna bağlı olan tablo angularjs bind işleminden dolayı bu değişiklikten etkilenerek triger olur. Böylece client’a gösterilen tüm kayıt güncellenir. Daha sonra “btnAdd” button’u “İptal” yazısı yerine “Yeni Kayıt Ekle” haline getirilip, gösterilen site bilgilerinin girildiği span içindeki elemanların “isShow” parametresine false değeri atanarak gizlenmesi sağlanır.

Şimdi sıra geldi UpdateSite() Action’ına: Aşağıda görüldüğü gibi güncellenecek Site datası “ID” değeri ile bulunup yeni “Name” değeri atanıp kaydedilmiştir. İşlemin hatasız bir şekilde yapılması durumunda makalenin en başında anlatığımız “GetSites()” methodu çağrılıp tüm “Site” datasının JsonResult olarak döndürülmesi sağlanmıştır.

CrudMvcUpdate2

Matematikçiler için 4 işlem ne ise, biz developerlar için de CRUD o dur. Bu örnekte Mvc 6.0 ile AngularJS javascript framework’u kullanılarak, arka tarafta Code First ve Entityframework ile database işlemleri yapılarak, nasıl Creat, Update, Edit ve Delete yapabileceğimizi hep beraber gördük. Angularjs’in bize sağladığı bir çok kolaylığı da böylece bir daha irdelemiş olduk.

Geldik bir makalenin daha sonuna. Yeni bir makalede görüşmek üzere hoşçakalın. Aşağıda kodların tamamı görülmektedir.

DashboardController.cs(Tamamı):

Site.cshtml(Tamamı):

NewRecord.cshtml(Tamamı):

DashBoard_Site.js(Tamamı):

 

Herkes Görsün:

Bunlar da hoşunuza gidebilir...

32 Cevaplar

  1. çağrı dedi ki:

    abi elinize saglik

  2. Bülent dedi ki:

    Ellerinize sağlık webinerinizide bekliyoruz…

  3. cagri dedi ki:

    Abi bi web api ve angular ile ilgili bir webiner yaparmısın?

  4. adnan dedi ki:

    Eline sağlık. Türkçe kaynak anlamında çok iyi ve anlaşılır.

  5. İsmail dedi ki:

    proje dosyası nerede acaba?

  6. Harun dedi ki:

    angularJS anlamamda bu makalenin çok büyük faydasını gördüm. anlatılanları uygularken tek bir tip data üstünden değilde datetime ve int tiplerinde de alanlar ekleyerek çalışınca çok daha iyi oldu.

    çok teşekkürler.

    not: uçmakdere virajları ile ilgili makaleniz hala yok sanırım! :)

    • borsoft dedi ki:

      Selam Harun,

      Öncelikle güzel yorumların için teşekkür ederim. İşden dolayı Ağustos ayı olmasına rağmen normalin aksine çok yoğun bir dönemdeyim. Hep aklımda ama yazamadı. Yazınca twitter’dan paylaşıcam güzel birkaç anımı:)

      İyi çalışmalar.

  7. Erol TÜRK dedi ki:

    Hacam süpersin. Ellerine sağlık

  8. Gökhan Ertaş dedi ki:

    Tebrik ederim çok güzel bir makale olmuş :)

  9. Rahman dedi ki:

    Elinize sağlık hocam güzel makale.

    Angular 2 yi MVC (.NET 4.0) altında kullanamıyor muyuz?

    • borsoft dedi ki:

      Teşekkürler Rahman,

      Kullanırsın da Angular2 ve Mvc’yi birlikte kullanman pek anlamlı değil.

      İyi çalışmalar.

  10. murat dedi ki:

    tebrik ederim

  11. açelya dedi ki:

    Merhaba hocam yıl olmuş 2017 benim gibi bir çok arkadaşım ve hocalarım dahil angular js ile signalR js’yi bir birine karıştırmakta ki bende bu gün öğrenince yazma gereğinde bulundum. angular js ile socket programlama yazamıyoruz sanırım. kabaca anlatııym angular js html ve jquery kodlarını daha az yazmamıza olanak sağlamakta. angular js ile de veri tabanına bağlanabilmekteyız fakat jquery ajax gibi çalışma mantığı var sanırım. ram ve cpu yine kasılacaktır. signalR ise veri tabanı işlemlerini socket programlama yöntemi ile yaptığımızdan dolayı cpu ve ram oldukça hafif bir şekilde çalışacaktır.
    konu hakkında detaylı bilgi verebilir misiniz :) teşekkürler…

    eğer çok yanlış şeylerden bahsediyorsam beni, bu yorumu ve gerekirse borakasmer.com ‘ u silebilirsiniz.

    • borsoft dedi ki:

      Selamlar Açelya,

      Aslında bu konular ile alakalı tonla bloğumda makale var. Bakmanı şiddet ile tavsiye ederim:) Zaten o zaman sormana gerek kalmıyacak. AngularJS moder javascript kütüphanesi. Evet jquery den daha az koda yazmanı model değişince buna bağlı görselin hemen değişmesini sağlıyan bir yapı. SignaR SERVER SIDE TARAFINDAN CONNECT OLAN TÜM CLİENTLARI JAVASCRİPT FUNCTIONLARINI PARAMETRE GÖNDEREREK TETİKLEMEKTİR. Ve web socket kullanır. Yandi mesela databasede birşeyler değiştiği zaman sayfayı refresh etmene gerek klamadan değişen datayı connect olmuş clientlara gönderiri.

      İyi çalışmalar.

  12. Zafer dedi ki:

    Bora Bey,

    Başarılarınızın devamını dilerim çok başarılı bir yazı…

  13. Göker dedi ki:

    Çok açıklayıcı ve sade bir anlatım. Teşekkürler :)

  14. Ferdi Cuyar dedi ki:

    çok karışık bir örnek hiç bir şey anlamadım

    • borsoft dedi ki:

      Selam Ferdi,

      Bu karışık geldi ise önce daha basitten başla.
      Mesela sadece listelemeyi incele. Hatta önce AngularJS ne imiş diye başla. Bu örnek karışık olabilir. Sen de önce daha az karışık birşeylerden başla. Hazırlan. Sonra, sana bu karışık gelen örneğe bir daha bak. Gene karışık geliyor ise biraz daha hazırlan. Gene gel bak.

      Kolay Gelsin :)

      • Ferdi dedi ki:

        hocam bu iş derya deniz elimden geldiğince öğrenmeye çalışıyorum. bu örnekte köşeli parantez nerede kapanıyor?

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        (function (angular) {

        var app = angular.module(“app”, []);
        app.controller(“Controller”, [“$scope”, “$http”, function Controller($scope, $http) {
        $http.get(“/Dashboard/GetSites”).success(function (data) {
        console.log(“GetSites data=” + JSON.stringify(data));
        $scope.Sites = data;
        }).error(function (ex) {
        console.log(ex);
        });
        })(angular);

  15. Ahmet dedi ki:

    Bunu bu kadar geç görmem..

borsoft için bir cevap yazın Cevabı iptal et

E-posta hesabınız yayımlanmayacak.