我無法訪問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 ';
        };

    };
})();

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

很高興看到您已經開始使用它了！