Angular-JS路由从MVC控制器获取数据

时间:2015-08-19 12:24:27

标签: javascript asp.net-mvc angularjs angular-routing ng-view

我已经实现了使用Angular-JS使用ngRoute从MVC控制器检索数据的代码。我实现的是,我在MVC控制器中有两个操作方法,在客户端我有两个菜单按钮,通过单击每个按钮,它从相应的操作方法中检索数据。我使用了Angular-RouteAngular Factory Methodng-view

直到现在还可以。但我可以看到AngularJS每次点击按钮时都不会进入动作方法。一旦检索到数据,它只显示相应的视图。在这种情况下,我无法从数据库中检索新数据。那么如果每次我都要调用动作方法怎样才能实现呢?

这就是我实施的内容:

的AccountController:

public ActionResult GetAccounts()
{
    var repo = new AccountRepository();
    var accounts = repo.GetAccounts();
    var settings = new JsonSerializerSettings
    {
        ContractResolver = new CamelCasePropertyNamesContractResolver()
    };

    var jsonResult = new ContentResult
    {
        Content = JsonConvert.SerializeObject(accounts, settings),
        ContentType = "application/json"
    };

    return jsonResult;
}

public ActionResult GetNumbers()
{
    var repo = new AccountRepository();
    var numbers = repo.GetNumbers();
    var setting = new JsonSerializerSettings
    {
        ContractResolver = new CamelCasePropertyNamesContractResolver()
    };

    var jsonResult = new ContentResult()
    {
        Content = JsonConvert.SerializeObject(numbers, setting),
        ContentType = "application/json"
    };

    return jsonResult;
}

Account.JS:

'use strict';
var account = angular.module('accountModule', ['ngRoute']);

account.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/Employees', { templateUrl: '../Templates/Employees.html', controller: 'accountController' })
    .when('/Numbers', { templateUrl: '../Templates/Numbers.html', controller: 'numberController' })
    .otherwise({
        redirectTo: '/phones'
    });;
}]);

account.controller('accountController', [
    '$scope',
    'accountService', 
    function ($scope, accountService) {
        accountService.getEmployees().then(function(talks) {
            $scope.employees = talks;
        }, function() {
            alert('Some error');
        });
    }
]);

account.controller('numberController', [
    '$scope',
    'accountService',
    function ($scope, accountService) {
        accountService.getNumbers().then(function (retrievedNumbers) {
            $scope.telephoneNumbers = retrievedNumbers;
        }, function () {
            alert('error while retrieving numbers');
        });
    }
]);

AccountService.JS:

account.factory('accountService', ['$http', '$q', function ($http, $q) {
    var factory = {};

    factory.getEmployees = function () {
        var deferred = $q.defer();
        $http({
            method: 'GET',
            url: 'GetAccounts'
        }).success(deferred.resolve).error(deferred.reject);

        return deferred.promise;
    };

    factory.getNumbers = function () {
        var deferred = $q.defer();
        $http({
            method: 'GET',
            url: 'GetNumbers'
        }).success(deferred.resolve).error(deferred.reject);

        return deferred.promise;
    };

    return factory;
}]);

我的观点是这样的:

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/shared/_Layout.cshtml";
}

<script type="text/javascript" src="../../Scripts/Modules/Account/Account.js"></script>
<script type="text/javascript" src="../../Scripts/Modules/Account/AccountService.js"></script>

<div ng-app="accountModule">
    <div>
        <div class="container">
            <div class="navbar navbar-default">
                <div class="navbar-header">
                    <ul class="nav navbar-nav">
                        <li class="navbar-brand"><a href="#/Employees">Employees</a></li>
                        <li class="navbar-brand"><a href="#/Numbers">Numbers</a></li>
                    </ul>
                </div>
            </div>
            <div ng-view>

            </div>
        </div>
    </div>
</div>

0 个答案:

没有答案