Simple AngularJS, AJAX, and ASP.NET MVC example

Question

I would like to see an extremely minimalistic example of AngularJS making an AJAX call to an ASP.NET MVC action method. I have tried to do this myself with no success. Here is my example code...

The MVC action method...

public string Color()
{
    return "red";
}

The HTML...

<!DOCTYPE html>    
<html ng-app ="ColorApp">
<head>
    <title>ColorApp</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <script src="/Scripts/app.js"></script>
</head>
<body>
    <div ng-controller="ColorController">
        {{color}}
    </div>
</body>
</html>

The JavaScript...

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

colorApp.controller('ColorController', function ($scope) {

    $http({
        url: '/home/color',
        method: 'GET'
    }).success(function (data, status, headers, config) {
        $scope.color = data;
    });

});

Some things to consider:

If I replace the $http method with something like $scope.color = 'purple'; then my view renders the word "purple" as expected.
If I leave everything as is but replace the AngularJS with jQuery, everything works as expected (I get "red").
I tried changing {{color}} to {{color()}} but it made no difference.
I tried changing the action method to a JsonResult and returning Json("red", JsonRequestBehavior.AllowGet); but this made no difference either.

I appreciate your help!

ΩmegaMan · Accepted Answer · 2017-06-09 14:50:03Z

8

add $http to your controller

colorApp.controller('ColorController', function ($scope,$http) {
      $http({
                url: '/home/color',
                method: 'GET'
           }).success(function (data, status, headers, config) {
    $scope.color = data;
     });
});

edited Jun 9, 2017 at 14:50

ΩmegaMan

32.2k13 gold badges110 silver badges138 bronze badges

answered Jul 2, 2014 at 14:37

Ahmed Alnahas

2631 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jason Over a year ago

Wow! It's that simple. Thanks a ton! :)

Collectives™ on Stack Overflow

Simple AngularJS, AJAX, and ASP.NET MVC example

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related