我无法使用 $resource of angular 访问 asp.net mvc 控制器来向我返回 JsonResult

Question

我错过了什么？我是 Angularjs 的新手。用 asp.net mvc 尝试 angularjs。我无法访问 asp.net mvc 控制器以使用 $resource of angular 向我返回 JsonResult。 但是，否则我会使用 $.getJson of javascript 但不使用 angularjs 获得成功。我错过了什么？请指导。感谢您的回复。

以下是我的服务

EbsMvcApp.factory('classListService', function ($resource, $q)
{
    var resource = $resource
                    (
                      '/Home/ClassList' 
                      , {}
                     //{ method: 'Get', q: '*' }, // Query parameters
                       , { 'query': { method: 'GET' , isArray:false  } }
                    );

    function get($q)
    {
        console.log('Service: classListServic > Started');

        var Defered = $q.defer();

        resource.get
            (
                 function (dataCb)
                 {
                     console.log('success in http service call');
                     Defered.resolve(dataCb);
                 }
                , function (dataCb)
                {
                    console.log('error in http service')
                    Defered.reject(dataCb);
                }
            );
        return Defered.promise; // if missed, would throw an error on func: then.
    };
    return { get: get };
});

角度控制器：

var EbsMvcApp = angular.module('myApp', ['ngResource']);

//'classListService',
EbsMvcApp.controller
    (
        'myAppController',
        ['$scope','classListService','$q' , function ($scope, classListService, $q)
            {
                    console.log('controller myAppController started');

                    var classList = classListService.get($q);
                   classList =  classList.then( 

                        function ()
                        {
                            (
                            function (response)
                            {
                                console.log('class list function response requested');
                                return response.data;
                            }
                        );
                       }
                    );

                   console.log(classList.ClassName);
                   console.log(classList);

                    console.log('end part of ctrl');
                    $scope.classList = classList;
                    $scope.SelectedClassID = 0;
                    $scope.message = ' message from Controller ';

            }
        ]
    );

Asp.net MVC 控制器

namespace EBS_MVC.Controllers
    {
        public class HomeController : BaseController
        {
            ApplicationDbContext db = new ApplicationDbContext();

                public JsonResult ClassList()
            {
                var List = new SelectList(db.tblClass, "ID", "ClassName");

                return Json(List, JsonRequestBehavior.AllowGet);
            }
       }
    } 

浏览器的响应 (F12)：

ControllerTry1.js:11 控制器 myAppController 已启动 serviceGetClassList.js:16 服务：classListServic > 已启动 ControllerTry1.js:28 未定义 控制器Try1.js:29 c ControllerTry1.js:31 ctrl 的结束部分 angular.js:12520 错误：[$resource:badcfg] [浏览器回复：屏幕截图][1]

Answer 1

好的，最后，我找到了使用 $http 服务的解决方案。从这里开始

http://www.infragistics.com/community/blogs/dhananjay_kumar/archive/2015/05/13/how-to-use-angularjs-in-asp-net-mvc-and-entity-framework-4.aspx

在 csHtml 文件中，需要对 service.js 和 Controler.js 的引用。 我不确定我是早点还是晚点添加它。但它是必需的。

ng-控制器：

    EbsMvcApp.controller('ClassListController', function ($scope, ClassListService2) {    

            console.log('ClassListController Started');

            GetClassList();

            function GetClassList()
            {
                ClassListService2.GetJson()
                        .success(function (dataCallBack) {
                            $scope.classList = dataCallBack;
                            console.log($scope.classList);
                        })
                        .error(function (error) {
                            $scope.status = 'Unable to load data: ' + error.message;
                            console.log($scope.status);
                        });
            }
        });

ng-服务：

    EbsMvcApp.factory('ClassListService2', ['$http', function ($http) {


    console.log('ClassListService2 Started');

    var list = {};
    list.GetJson = function () {
        return $http.get('/Home/ClassList');
    };
    return list;

}]);

csHtml 视图：

    <div class="text-info" ng-controller="ClassListController">
<h3> Text from Controller: </h3>

@*table*@
<table class="table table-striped table-bordered">
    <thead>
        <tr><th>DisplayName</th><th>Value</th>
    </thead>
    <tbody>
        <tr ng-hide="classList.length">
            <td colspan="3" class="text-center">No Data</td>
        </tr>
        <tr ng-repeat="item in classList">
            <td>{{item.Text}}</td>
            <td>{{item.Value}}</td>

        </tr>
    </tbody>
</table>

Answer 2

抱歉耽搁了，我刚刚写了一些代码来快速测试 ngResource 模块，因为我还没有使用它。

我的代码可以使用 ngResource 模块完成您想要的工作。我认为部分问题在于您正在配置查询方法，但调用了 get 方法，因此您的配置未应用。

这是我编写的服务类，用于针对与您的控制器相同的控制器进行测试。

(function () {
    'use strict';

    angular
        .module('myApp')
        .service('classService', ClassService);

    ClassService.$inject = ['$resource', '$q'];

    function ClassService($resource, $q) {

        var resource = $resource
        (
            '/Home/ClassList',
            {},
            {
                'get': { method: 'GET', isArray: true },
                'query': { method: 'GET', isArray: true }
            }
        );

        var service = {
            get: get
        };

        return service;

        ////////////

        function get() {
            var Defered = $q.defer();

            resource.get(function (dataCb) {
                console.log('success in http service call');
                Defered.resolve(dataCb);
            }, function (dataCb) {
                console.log('error in http service')
                Defered.reject(dataCb);
            });

            return Defered.promise;
        };
    };
})();

控制器长这样

(function () {
    'use strict';

    angular
        .module('myApp')
        .controller('classController', ClassController);

    ClassController.$inject = ['$scope', 'classService'];

    function ClassController($scope, classService) {

        var vm = this;
        vm.data = null;

        activate();

        /////////////

        function activate() {

            var classList = classService.get().then(function (response) {
                console.log('class list function response requested');
                vm.data = response;
                console.log(vm.data);
            });

            console.log('end part of ctrl');
            $scope.SelectedClassID = 0;
            $scope.message = ' message from Controller ';
        };

    };
})();

我已经包含了您的一些原始代码，以便您了解它的适用性。

很高兴看到你已经成功了！