ajax - 简单的 AngularJS、AJAX 和 ASP.NET MVC 示例

标签 ajax asp.net-mvc angularjs

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

MVC Action 方法...

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);但这也没什么区别。

  • 我感谢您的帮助!

    最佳答案

    添加 $http 到您的 Controller

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

    关于ajax - 简单的 AngularJS、AJAX 和 ASP.NET MVC 示例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24533444/

    相关文章:

    javascript - 如何在 jquery $.each 调用中循环列表项

    ruby-on-rails - 使所有输入字段位于同一行

    javascript - 使用 sweetalert 的 Codeigniter 删除过程不会删除数据

    c# - 在页面之间保留对象列表 - ASP MVC

    javascript - JSON 和 Javascript 数组之间的 "Interactions"(和语法)

    angularjs - ng-href 显示不安全 :javascript error

    javascript - 表单提交后 Magento 电子邮件成功消息返回空白页

    .net - 扩展/插件通信架构

    angularjs - 当所有条目都在 angularJS 中过滤时,如何隐藏容器?

    c# - MVC 文本框验证问题