0

I have implemented code to retrieve data from MVC Controller using Angular-JS using ngRoute. What I have implemented is, I have two action methods in MVC controller and at client side I have two menu buttons and by clicking on each button, it retrieves data from respective action method. I have used Angular-Route, Angular Factory Method and ng-view

Till now it is fine. But what I can see is AngularJS doesn't go to Action Method every time when i click on the button. Once data have been retrieved, it only shows the respective view. And in this situation I cannot retrieve fresh data from database. So If I have to call action method every time how can I achieve this ?

This is what I have implemented:

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;
}]);

and my view is something like this:

@{
    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>
Erazihel
  • 7,295
  • 6
  • 30
  • 53
ConfusedDeveloper
  • 6,389
  • 4
  • 21
  • 36
  • Not clear what specific problem is. Each time route is changed, a new controller instance is created which would retrieve your data. Please be more specific about where in the process your data isn't correct – charlietfl Aug 19 '15 at 12:31
  • @charlietfl: The problem is that each time when I click on button, it should call Action method of controller. But It is not calling it. – ConfusedDeveloper Aug 19 '15 at 13:26

0 Answers0