12 Mart 2015 Perşembe

Asp.Net Mvc İle Birlikte AngularJs Kullanımı

Yazar: odan 12.3.15 , , , Yorum Bırak
Bu yazımda .Net Mvc projelermizde angularJs'i nasıl kullanacağımızla ilgili basit bir örnek yapacağız. Bu örneği siz kendiniz farklı verilerle daha da geliştirebilirsiniz.

Öncelikle Visual Studio'dan yeni boş bir Mvc projesi oluşturuyoruz.




Daha sonra Visual Studio'dan Tools> Library Package Manager >Package Manager Console menüsüne tıklıyoruz ve altta açılan console'a bu linkten istediğimiz angularJs versiyonunu seçerek yükleme komutunu giriyoruz.






Yüklemeyi yaptıktan sonra projemize yeni bir controller ekliyoruz ve buna ait index.cshtml view'ini ekliyoruz. Bu view'i aşağıdaki gibi olacak şekilde düzenliyoruz:

Index.cshtml:

<html ng-app="phonecatApp">
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/controllers.js"></script>
<h2>Index</h2>
<body ng-controller="PhoneListCtrl">
    Search:
    <input ng-model="query">
    <select ng-model="orderProp">
        <option value="name">Alphabetical</option>
        <option value="age">Newest</option>
    </select>
    <ul>
        <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
            <span>{{phone.name}}</span>
            <p>{{phone.snippet}}</p>
        </li>
    </ul>

</body>
</html>


  • Burada html tagi içerisinde uygulamamızın angularJs i kullandığını belirtmek için ng-app
  • etiketi ekledik ve isimlendirdik. 
  • Daha sonra angular.min.js dosyasına referans verdik.
  • Sayfamızın kullanacağı controller javascript dosyasını referasnını verdik.
  • Body tagine hangi controller'ı kullanacağımızı belirten ng-controller etiketini ekledik ve isimlendirdik.
  • Altına sayfamızda kullanacağımız search için bir input ekledik ve bunun modelimiz içerisinden gelen verilerde arama yapacağını belirtmek için ng-model="query" attribute'ünü ekledik.
  • Aramanın altına da  modelimiz içinden gelen Json veri içerisinde bulunan "age" alanına göre veya "name" alanına göre filtreleme yapmak için ilgili combobox'ı ekledik ve bu select tagine ng-model="orderProp" etiketini verdik.
  • Altına da gelecek veriyle birlikte otomatik olarak artması için listitemları belirledik ve Json verimiz içinden gelecek "phones" veriler içerisinden istediğimiz özellikleri liste bastırdık. Aramayı listemize bağlamak için filter:query ve filtrelemeyi yapmak için orderBy:orderProp etiketlerini ekledik.

Controller'ımız da aşağıdaki gibi olacaktır:

controllers.js:

 
var phonecatApp = angular.module('phonecatApp', []);

phonecatApp.controller('PhoneListCtrl', function ($scope) {
    $scope.phones = [
   {
       'name': 'Nexus S',
       'snippet': 'Fast just got faster with Nexus S.',
       'age': 1
   },
   {
       'name': 'Motorola XOOM™ with Wi-Fi',
       'snippet': 'The Next, Next Generation tablet.',
       'age': 2
   },
   {
       'name': 'MOTOROLA XOOM™',
       'snippet': 'The Next, Next Generation tablet.',
       'age': 3
   }
    ];

    $scope.orderProp = 'age';
});
Bu kısımda da veri Json arrayimizi tanımladık ve filtreleme için ilk olarak 'age' kategorisine göre filtreleme yapılacağını belirledik. Dikkat edersek  buradaki controller ismimiz ve modül ismimiz Index.cshtml kısmında belirlediğimiz isimlerdir.

Uygulamayı derleyip çalıştırdığımızda aşağıdaki gibi bir ekran görüntüsü gelecektir:

Arama yaptığımızda listenin modelimize bağlı olduğu için otomatik olarak değiştiğini göreceğiz ve filtreleme ile aynı şekilde comboboxtan seçilen kritere göre listenin otomatik olarak değiştiğini göreceğiz.

Bir başka yazıda buluşmak üzere, iyi çalışmalar...

0 yorum:

Yorum Gönder