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

Jason 发表于 Dev

杰森

我想看到一个极简的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()}}但没有区别。
我尝试将操作方法更改为aJsonResult并返回，Json("red", JsonRequestBehavior.AllowGet);但这也没有区别。

我感谢您的帮助！

艾哈迈德·阿尔纳哈斯

将$ http添加到您的控制器

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。