Angular, get data from MVC-method

Question

I know that you can initailise values from an angular controller in a div like this: View:

<div ng-controller="SimpleController">
        <ul>
            <li ng-repeat="cust in customers">
                {{cust.name}} - {{cust.city}}
            </li>
        </ul>
    </div>

Controller:

function SimpleController($scope) {

        $scope.customers = [
            { name: 'Jane', city: 'New York' },
            { name: 'John', city: 'Chicago', }

        ];
    }

But lets say that i want to get the data from a controller (that maybe fetches data from a db) and receive its value in $scope.customers? Have a look at this method:

public ? PassThisToAngular()
        {
            var customer = new List<Customer>()
            {
                new Customer() {Name = "Pauly-D", City = "New Jersey"},
                new Customer() {Name = "Snooki", City = "New Jersey"}
            };


            return ?
        }

Can I call this method from my angular-controller and store its values in @scope.customers? Thank you!

Pragnesh Khalas · Accepted Answer · 2014-08-11 10:40:47Z

Please check below code, it will help you.

In your script side:

<script>
    var SimpleController = function ($scope, $http) {
    var result = $http.get("/Contact/PassThisToAngular");
    result.success(function (data) {
        $scope.customers = data;
     });
   }
</script>

Controller Side:

public string PassThisToAngular()
    {
        var customer = new List<MvcApplication1.Models.Customer>()
        {
            new MvcApplication1.Models.Customer() {Name = "Pauly-D", City = "New
                                                   Jersey"},
            new MvcApplication1.Models.Customer() {Name = "Snooki", City = "New 
                                                   Jersey"}
        };

        var setting = new JsonSerializerSettings{ContractResolver=new 
                              CamelCasePropertyNamesContractResolver()};
        return JsonConvert.SerializeObject(customer, Formatting.None, setting);
    }

sylwester · Accepted Answer · 2014-08-11 10:24:49Z

1

Mvc action

   public List<Customer> PassThisToAngular()
            {
                var customers = new List<Customer>()
                {
                    new Customer() {Name = "Pauly-D", City = "New Jersey"},
                    new Customer() {Name = "Snooki", City = "New Jersey"}
                };


                return customers 
            }

JS:

function SimpleController($scope, $http) {

$scope.customers =[];

$http.get(/[controller name]/PassThisToAngular).then(function(data){

angular.copy(data,$scope.customers )

}, function(){

alert("Can't get data")

});
    }

answered Aug 11, 2014 at 10:24

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

1 Comment

user2915962 Over a year ago

Thank you for answering! The Method "PassThisToAngular" gets hit but nothing seems to comeback. Tried adding a Alert(customers) under: angular.copy(data,$scope.customers ) but nothing shows up. Also, angular ( in angular.copy,,,) complains about being an implicitly declared global var..

Collectives™ on Stack Overflow

Angular, get data from MVC-method

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related