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

Question

我想念什么？ 我是Angularjs的新手。 使用asp.net mvc尝试angularjs。 我无法访问asp.net mvc控制器以使用angular的$ resource返回JsonResult。 但是，否则我会使用JavaScript的$ .getJson而不是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未定义ControllerTry1.js：29 c ControllerTry1.js：31 ctrl angular.js的结尾部分：12520错误：[$资源： 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-Controller：

    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-Service：

    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 ';
        };

    };
})();

我已经包含了一些原始代码，只是您可以看到它的用法。

很高兴看到您已经开始使用它了！