编辑于 10/05
我一直在关注这个 anjularjs 和 asp.net 教程。我正在尝试自己添加一些额外的东西，但我被卡住了。我正在从服务器获取一个 JSon 对象，并试图将对象的内容显示给客户端。问题是当我期望看到 ID、名称和密码列表时，我在客户端获得了 [object Object]。我在这里想念什么？
//The controller
myApp.controller('userController', function ($scope,$http /*UserService*/) {
// $scope.Users = [];
$http.post('/Templates/ListUsers',{ id : 0})
.success(function (data) {
// $scope.Users = data.data;
if (data.Ok) {
$scope.Users = data.data;
console.log($scope.Users);
}
}).error(function(error){
console.log(error);
});
//The form where the data is supposed to display.
<div class="row">
<div class="form-group">
<li ng-repeat="x in Users">
**//I am iterating through the users,
//so I was not expected to see [object Object]**
{{ x.ID, x.Name, x.Password }}
</li>
</div>
</div>
//The JSON object in the console window:
[{"ID":1,"Name":"Name1","Password":"Password1"},
{"ID":2,"Name":"Name2","Password":"Password2"},
{"ID":3,"Name":"Name3","Password":"Password3"},
{"ID":4,"Name":"Name4","Password":"Password4"}]
AngularJS 和 Angular-Route 版本 1.4.7 的索引页面
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>AngularJS Routing example</title>
<base href="/">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="nav">
<li><a href="/NewOrder"> Add New Order </a></li>
<li><a href="/ShowOrders/123"> Show Order </a></li>
<div ng-controller="CalculatorController">
<li><a href="/Calculator">Calculator</a></li>
</div>
<li><a href="/Users">Add Users</a></li>
</ul>
</div>
<div class="col-md-9">
<div ng-view></div>
</div>
</div>
</div>
@* <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.js"></script> *@
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="~/Scripts/myApp.js"></script>
</body>
//10/06 更新：
我没有使用 CDN 引用，而是下载了 AngularJS 和 AngularJS-Route 1.4.7 并引用了它们。当我运行应用程序时，它只是显示整个 JSON 对象。
[HttpGet]
public JsonResult ListUsers()
{
return View();
}
[HttpPost]
public JsonResult ListUsers(int id=0)
{
try
{
List<User> listUser = new List<User>()
{
new User{ ID= 1, Name = "Name1", Password="Password1"},
new User{ ID= 2, Name = "Name2", Password="Password2"},
new User{ ID= 3, Name = "Name3", Password="Password3"},
new User{ ID= 4, Name = "Name4", Password="Password4"}
};
return Json(new { Ok = true, data = listUser, message = "Success" }, JsonRequestBehavior.AllowGet);
}
catch (Exception ex)
{
ex.ToString();
return Json(new { Ok = false, data = "", message = "Failure" }, JsonRequestBehavior.AllowGet);
}
}
添加的路线
routes.MapRoute(
name : "listUsers",
url : "Templates/ListUsers/{id}",
defaults : new { controller = "Templates", action =
"ListUsers", id = UrlParameter.Optional });
更新于 10/07
我注意到更改视图以返回视图并将 json 对象硬编码到用户的控制器是可行的。因此，我添加了另一个带有 [HttpPost] 注释的方法，将 $http.get 更改为 $http.post，并添加了 ID 参数。此外，我修改了路由以具有可选的 id，以便“/Templates/ListUsers”可以工作，因此它“/Templates/ListUsers/1”。我预计 $http.post 参数为 1 以重定向到带有 HttpPost 注释的方法，但它没有发生。在这一点上，我不确定事情是否对我有意义。我正在再次阅读 $http.post ，看看我是否能看到我犯了错误的地方。