AngularJS Nested View
Question
Edited on 10/05
I've been following this anjularjs and asp.net tutorial. I am trying to add some additional things on my own, but I am stuck. I am getting a JSon object from the server, and I am trying to display the object's content to the client. The issue is that I am getting [object Object] on the client side when I am expected to see a list of ID, Name, and Password. What am I missing here?
//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"}]
The index page with AngularJS and Angular-Route Version 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>
//Updated on 10/06:
Instead of using CDN references, I downloaded AngularJS and AngularJS-Route 1.4.7 and referenced them instead. When I ran the application, it simply display the entire JSON object.
[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);
}
}
The Route Added
routes.MapRoute(
name : "listUsers",
url : "Templates/ListUsers/{id}",
defaults : new { controller = "Templates", action =
"ListUsers", id = UrlParameter.Optional });
Updated on 10/07
I noticed that changing the view to return a view and hard coding the json object to the users' controller works. Because of that, I added another method with a [HttpPost] annotation, changed the $http.get to $http.post, and added the ID parameter. Also, I modified the route to have an optional id so that '/Templates/ListUsers' will work so it '/Templates/ListUsers/1'. I was expected $http.post with a parameter of 1 to redirect to method with the HttpPost annotation, but it did not happen. I am not sure that things are making sense to me at this point. I am reading the $http.post again and see if I can see where I made the mistake.
2 answers
solution1
1 2015-10-02 03:07:36
Your base template should have a ui-view to hold the preLogin partial view, else angular won't know where to put it. You can even write the template itself on the base template, or make it a directive, and then show/hide based on certain criteria in your base controller.
solution2
0 ACCPTED 2015-10-07 15:06:34
Finally, I got it to work although another issue pops its head up. I removed the default route and added a catch all route.
routes.MapRoute(
name : "catchAll",
url : "{*Url}",
defaults : new { controller = "Templates", action =
"ListUsers", id = UrlParameter.Optional });
By coincidence, I also remove the comment for the route below
routes.MapRoute(
name : "Default",
url : "{controller}/{action}/{id}",
defaults : new { controller = "Home", action =
"Index", id = UrlParameter.Optional });
I did a post, and it worked. If I commented the catch all route, it worked fine. However, the catch all route did not appear to be doing anything at this point because refreshing the page returned 404. If I moved the catch all above the default route, it stopped working too. I still have to figure this part out now.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.