我已经实现了使用Angular-JS
使用ngRoute
从MVC控制器检索数据的代码。我实现的是,我在MVC控制器中有两个操作方法,在客户端我有两个菜单按钮,通过单击每个按钮,它从相应的操作方法中检索数据。我使用了Angular-Route
,Angular Factory Method
和ng-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>