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

发布时间：2020-12-17 17:49:09 所属栏目：安全来源：网络整理

导读：我想看一个极其简约的AngularJS示例,它对ASP.NET MVC操作方法进行 AJAX调用.我试图自己做这个没有成功.这是我的示例代码…… MVC行动方法…… public string Color(){ return "red";} HTML … !DOCTYPE html html ng-app ="ColorApp"head titleColorApp/titl

我想看一个极其简约的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;
    });

});

有些事情需要考虑：

>如果我用$scope.color =’purple’之类的东西替换$http方法;然后我的视图按预期呈现“紫色”一词.
>如果我保留原样,但用jQuery替换AngularJS,一切都按预期工作(我得到“红色”).
>我尝试将{{color}}更改为{{color()}},但没有任何区别.
>我尝试将action方法更改为JsonResult并返回Json(“red”,JsonRequestBehavior.AllowGet);但这也没有任何区别.

我感谢您的帮助！

解决方法

将$http添加到您的控制器

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!