在MVC中使用JSON从AngularJS调用MVC控制器 ASP.Net

Question

JsonResult 方法不通过$http调用调用，

我正在做一个使用 ASP.NET MVC的项目，AngularJS我正在从AngularJS调用mvc控制器。我得到了一个 jsonresult 就像从 AngularJS 调用 MVC 控制器一样。

这是结果

[
{
"Branch_ID": 1,
"Branch_Name": "sdsds",
"Branch_Address": "sfsdfsdf",
"Branch_email": "sdfsdfsdf",
"Branch_Notes": "sfsffsfd",
"Branch_Manager": null,
"Branch_Phone": null,
"Branch_TimeFrom": "/Date(-2208996000000)/",
"Branch_TimeTo": "/Date(-2208996000000)/",
"saturday": false,
"sunday": false,
"monday": false,
"tuesday": false,
"wednesday": false,
"thursday": false,
"friday": false,
"Departments": null
}
]

分支机构控制器

public class BranchesController : Controller
{
private IRepositoryBase<Branches> BrancheRepository;
public BranchesController(IRepositoryBase<Branches> brancheRepository)
{
this.BrancheRepository = brancheRepository;
}
// GET: Branches
public JsonResult Index()
{
var branches =   BrancheRepository.GetAll();
//if (!String.IsNullOrEmpty(searchString))
//{
//    branches = branches.Where(s => s.Branch_Name.ToUpper().Contains(searchString.ToUpper()));
//}
return Json(branches, JsonRequestBehavior.AllowGet);
} 
}

Index.cshtml

<div class="container" ng-controller="branch-controller">
<div class="panel panel-info">
<div class="panel-heading">
Branch Details - Grid CRUD operations
</div>
<table class="table table-bordered">
<thead style="background-color:lightblue;">
<tr>
<th> Branch Address</th>
<th> Branch Email</th>
<th>Branch Name</th>
<th>Branch Notes</th>
<th> Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="branche in Branches">
<td>{{branche.Branch_ID}}</td>
<td>{{branche.Branch_Address}}</td>
<td>{{branche.Branch_email}}</td>
<td>{{branche.Branch_Name}}</td>
<td>{{branche.Branch_Notes}}</td>
<td style="width:200px;">
<a href="#" class="btn btn-info">Update</a>
<a href="#" class="btn btn-danger">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>

模块.js

var myapp;
(function () {
myapp = angular.module('my-branches', []);
})();

控制器.js

myapp.controller('branch-controller', function ($scope, branchService) {
//Loads all branch records when page loads
loadBranches();
function loadBranches() {
var BrancheRecords = branchService.getAllBranches();
BrancheRecords.then(function (data) {
//success
$scope.Branches = data;
},
function (error) {
console.log(error);
alert("Error occured while fetching branche list...");
});
}
});

服务.js

myapp.service('branchService', function ($http) {
this.getAllBranches = function () {
return $http.get("/Branches/Index").then(function (response) {
return response.data;
});
};
});   

Answer 1

首先，您需要更改代码，如@georgeawg的答案所示，然后剩下的问题是您使用了无效的属性名称。结果应如下所示

<td>{{branche.Branch_Address}}</td>
<td>{{branche.Branch_email}}</td>
<td>{{branche.Branch_Name}}</td>
<td>{{branche.Branch_Notes}}</td>

Answer 2

将服务调用更改为：

var BrancheRecords = branchService.getAllBranches();
BrancheRecords.then(function (data) {
//success
$scope.Branches = data;
},
function (error) {
console.log(error);
alert("Error occured while fetching branche list...");
});

将服务更改为：

myapp.service('branchService', function ($http) {
this.getAllBranches = function () {
return $http.get("Branches/Index").then(function(response) {
return response.data;
});
};
});

数据将分配给响应对象的data属性。

有关详细信息，请参阅

• AngularJS $http服务 API 参考 - 返回