AngularJS获取方法不起作用

时间:2015-10-06 20:40:53

标签: asp.net angularjs asp.net-mvc-4 angularjs-http

我有一个角度应用程序,我正在尝试从服务器获取用户列表。我遇到了一个问题。我有页面调用CurrentUsers。如果CurrentUsers方法返回一个Json对象,则无论我在app控制器和html页面中做什么,整个对象都会显示在页面上。如果方法返回视图,则不显示任何内容。但是,我可以在cotroller中对json对象进行硬编码,它可以正常工作。 结果,我创建了另一个返回json对象的方法。我调用了那个方法,但它从未到达过服务器。非常感谢您的帮助。

CurrentUsers方法返回一个JSON对象,整个json对象显示在屏幕上

 [HttpGet]
    public JsonResult CurrentUsers()
    {
        List<Users> currentUser = new List<Users>()
        {
            new Users{ UserName = "JDoe", Professor="SSmith", Course = "English1"},
            new Users{ UserName = "ADan", Professor="SDhor", Course = "Science"},
            new Users{ UserName = "ADes", Professor="SCarry", Course = "Religion101"},
            new Users{ UserName = "DJay", Professor="SCrowe", Course = "Teaching101"},
            new Users{ UserName = "MAnne", Professor="TRow", Course = "PreCalc"},
        };
        return Json(new { Ok = true, data= currentUser });
       // return View();
    }

如果上面的方法返回一个View,我可以将控制器修改为     如下所示,我将看到相应的信息

Registration.controller('CurrentUsersController', function ($scope, $http) {
 $scope.currentUsers = [{ "Professor": "SSmith", "UserName": "JDoe", "Course": "English1" }, { "Professor": "SDhor", "UserName": "ADan", "Course": "Science" }, { "Professor": "SCarry", "UserName": "ADes", "Course": "Religion101" }]
});

我修改了控制器以使用服务并创建了下面的方法来读取当前用户,以便视图可以简单地返回一个View()。但是,我无法让GET&#39; GET&#39;工作。

[HttpGet]
    public JsonResult GetUsers()
    {
        List<Users> currentUser = new List<Users>()
        {
            new Users{ UserName = "JDoe", Professor="SSmith", Course = "English1"},
            new Users{ UserName = "ADan", Professor="SDhor", Course = "Science"},
            new Users{ UserName = "ADes", Professor="SCarry", Course = "Religion101"},
            new Users{ UserName = "DJay", Professor="SCrowe", Course = "Teaching101"},
            new Users{ UserName = "MAnne", Professor="TRow", Course = "PreCalc"},
        };
        return Json(new { Ok = true, data = currentUser , message = 
         "Success"}, JsonRequestBehavior.AllowGet);
    }

修改CurrentUsers方法以返回视图

  public ActionResult CurrentUsers()
        {
            return View();
        }

我的修改控制器

Registration.controller('CurrentUsersController', function ($scope, GetUSerService) {
    $scope.message = 'this is the Current User controller';
    $scope.currentUsers = [];
    var result = GetUSerService.getData()
                 .then(function (result) {
                     console.log('the result');
                     console.log(result.data);
                 });
});

我的服务

Registration.service('GetUSerService', function ($http,$q) {
    this.getData = function () {
        var deferredObject = $q.defer();
        $http.get('/Home/GetUsers').
        success(function (data) {
            console.log('service call data');
            console.log(data);
            deferredObject.resolve({ success: true, data : data.data });
        }).
        error(function () {
            deferredObject.resolve({ success: false, data : '' });
        });

        return deferredObject.promise;
    };
});

10/6更新@ 5:50     @FernandoPinheiro的回答对我有用。唯一的问题是GetUsers动作被调用两次。

enter image description here

已更新10/7

我弄清楚为什么帖子要做两次。在我的模板上,我有ng-app =&#34;注册&#34;,我有ng-controller =&#34; CurrentUsersController&#34;。因为我在路由提供程序中指定了控制器名称,所以我不需要将它添加到局部视图中。一旦我从视图中删除它,它就按预期工作。

1 个答案:

答案 0 :(得分:3)

您的GetUserService正在调用$http.post('/Home/GetUsers')而不是$http.get('/Home/GetUsers')

此外,你不应该为行动设置路线属性吗?