Osman KURT

Yazılım Uzmanı | MVC Eğitmeni

AngularJs ile Listeleme Yapmak

Merhaba arkadaşlar,

İlk olarak bir adet MVC projesi oluşturuyoruz ve projemize nuget paket olarak AngularJs kuruyoruz.

install-package angularjs

install-package angularjs.Route

Gerekli kurulumları yaptıktan sonra alt kısımda bulunan kod parçalarını ilgili yerlere ekleyerek listemizi görebilirsiniz.

Index.cshtml

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div ng-app="myApp" ng-controller="myController">
        <div ng-repeat="kisi in kisiler">
            <span>{{kisi.AdSoyad}}</span> <span>{{kisi.Yas}}</span>
        </div>
    </div>

    <script src="~/Scripts/angular.min.js"></script>
    <script type="text/javascript">
        (function (angular) {
            function Controller($scope, $http) {
                $http.get("/Home/UserList").then(function (response) {
                    $scope.kisiler = response.data;
                });
            }
     angular.module("myApp", []).controller("myController", ["$scope", "$http", Controller]);
        })(angular);
    </script>       

</body>
</html>
 public class User
    {
        public string AdSoyad { get; set; }
        public int Yas { get; set; }
    }

HomeController.cs

public JsonResult UserList()
    {
        List list = new List();
        list.Add(new Models.User() { AdSoyad = "Osman KURT", Yas = 30 });
        return Json(list, JsonRequestBehavior.AllowGet);
    }

Görüşmek üzere
Osman KURT
Yazılım Uzmanı


Loading