MVC Angular Kullanımı:Başlangıç

Geçenlerde şöyle internette bir gezineyim dedim. Tabi genel olarak baktığım konu yine MVC'ydi. Sadece bu sefer ek olarak SignalR konusunu da araştırıyordum. Biraz gezindikten sonra karşıma Bora Kaşmer'in sitesi  denk geldi. Açıkçası ufkumun bu kadar açılacağı Türkçe bir sayfa bulmak beni çok mutlu etti.

İlk olarak MVC konusuna girdim tabiki. Yazıları okurken seminerlerde yapılan örneklerin olduğu bolca kod örneği bulabilirsiniz. Tabi asıl araştırdığım konu SignalR'dı ama örneklerde genelde angular vardı. İlk olarak SignalR konusunu anladıktan sonra Bora Kaşmer'i de bol bol rahatsız ederek angular konusuna daha fazla önem vermeye karar verdim. Sağolsun kendisi de her soruma cevap verdi.

Şimdide öğrendiklerimi sizlerle paylaşma aşamasına geldim. Bu kadar sözden sonra artık kodlamaya başlayalım.


İlk olarak bir MVC projesi açalım. Tabi projemizde angular mevcut olmadığı için yüklememiz gerekecek.

Artık bir tane sayfa açıp içerisinde angularla örneğimize başlayalım.

Ben Index2 adında bir ActionResult oluşturdum. Adı pek egzotik değil ama şimdilik idare edin :)
Personel adında bir de sınıf oluşturdum. Örneklerimde bu sınıfı kullanacağım.

Birde Json döndüren bir metot oluşturalım. Tabiki ilk örnek olduğu için kendimiz oluşturduğumuz bir instance oluşturup view'e göndereceğim.

Artık View'imize gidelim.

Gördüğünüz gibi işlemlerimizi Controller function'ında yapıyoruz. Burada $scope olarak tanımladığımız bizim modelimiz oluyor. Aynı bir sınıf gibi. Jquery get metoduyla aldığımız data'yı $scope modelimize set ediyoruz. Burada yazarken dikkat edin. Aşağıda tanımlayacağımız angular attributeleri (ng-app ve ng-controller'ı) tanımlamadan bu metod çalışmayacaktır. Aslında onlar bu metodu çağırıyor. $scope.$apply(); metodunu unutmayın. Bu metodu yazmadan $scope bind işlemi gerçekleşmeyecektir. Sonra bana alanlar neden boş geliyor diye ağlamayın :=D

Sıra geldi body'i yazmaya.

Burada ilk olarak bir div açtık ve anguların app ismini ve controller ismini verdik. Bu isimleri yukarıda tanımladığımız bilgiler aslında. Yani Controller fonksiyonumuz buradan tetikleniyor.

Daha sonra textboxlarımıza modelimiz teker teker tanımladım. Örnek olarak $scope.id burada bizim ng-model="id" alanımıza denk geliyor ve bind ediyor. Diğerleride aynı şekilde.

Bu işlemleri oluşturduktan sonra bir ekran görüntüsü alalım.

Bütün alanlar JsonResult metoduyla gönderdiğimiz modelle set edildi.
Burada dikkatinizi "Arttır" metodu çekmiş olabilir. "Arttır" metodunu angularda işlem gerçekleştirmek için deneme amaçlı yaptım. Görevi gelen modeldeki ID değerini her basıldığında bir arttırmak.

İlk olarak angular function'ımız içinde bunu yazdım.

Burada data id değerini alıyoruz ve bir arttırarak $scope.id yani modeldeki id alanına bir arttırarak atıyoruz. Artık butona basılınca $scope.id değeri bir arttırılacak.

Tabi birde bu işlemi tetikleyecek butonumuz olması lazım.

ng-click bizim angular increment metodumuzu çağırıyor. İşte bu kadar basit.

Birde HTML çıktısına bakalım.

Eğer MVC ile biraz uğraştıysanız bilirsiniz. Genelde textboxlarda value attribute'u bulunurdu ama angular ile artık bu alana gerek yok. Böylece değerlerimiz kabak gibi ortada da olmayacak. Peki value attribute'ü olmadan Post edince değerler gelecek mi diye düşünüyor olabilirsiniz. Cevap :Evet gelecek.

Hemen bir post işlemi yaparak size kanıtlayayım.

Dilim döndüğü kadar size mvc angular anlatmaya çalıştım. Bir dahaki yazımda sizlere liste nasıl döndürülür, liste üstünde filtreleme ve sıralama nasıl yapılır. Sıralama işlemi nasıl dinamik bir şekilde yaptırılabilir bunları anlatacağım.

Uzun bir yazı olsa da kısa bir yorum da eklemek istiyorum. Açıkçası ben anguları çok beğendim. Bundan sonra her projemde kullanmayı da düşünüyorum. Hem kolaylık hemde güvenlik açısından bence projenizi bir adım daha ileri götürecektir ;)