Question

我希望看到一个极其简约的AngularJS示例，它对ASP.NET MVC操作方法进行AJAX调用。我试图自己做这个没有成功。这是我的示例代码......

MVC行动方法......

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

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>

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;
    });

});

需要考虑的一些事项：

如果我用$http之类的内容替换$scope.color = 'purple';方法，那么我的视图会按预期呈现“紫色”字样。
如果我按原样保留所有内容但用jQuery替换AngularJS，一切都按预期工作（我得到“红色”）。
我尝试将{{color}}更改为{{color()}}，但没有任何区别。
我尝试将操作方法更改为JsonResult并返回Json("red", JsonRequestBehavior.AllowGet);，但这也没有任何区别。

感谢您的帮助！

Answer 1

将 $ http 添加到您的控制器

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

简单的AngularJS，AJAX和ASP.NET MVC示例

1 个答案: