AngularJS Nested View

0

Отредактировано 10/05

Я слежу за учебниками anjularjs и asp.net. Я пытаюсь добавить некоторые дополнительные вещи самостоятельно, но я застрял. Я получаю объект JSon с сервера, и я пытаюсь отобразить содержимое объекта клиенту. Проблема в том, что я получаю [object Object] на стороне клиента, когда я ожидаю увидеть список ID, Name и Password. Что мне здесь не хватает?

//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 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>

//Обновлено 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 });

Изображение 174551

Обновлено 10/07

Я заметил, что изменение представления, чтобы вернуть представление и жесткое кодирование json-объекта на работу контроллера пользователя. Из-за этого я добавил еще один метод с аннотацией [HttpPost], изменил $ http.get на $ http.post и добавил параметр ID. Кроме того, я изменил маршрут, чтобы иметь необязательный идентификатор, чтобы "/Templates/ListUsers" работали так, чтобы он "/Шаблоны/ListUsers/1". Я ожидал $ http.post с параметром 1, чтобы перенаправить метод с аннотацией HttpPost, но этого не произошло. Я не уверен, что в этом есть смысл. Я снова читаю $ http.post и вижу, могу ли я увидеть, где я совершил ошибку.

Теги:
asp.net-mvc-4
angularjs-routing
angularjs-view

2 ответа

0
Лучший ответ

Наконец, я заставил его работать, хотя еще одна проблема всплывает. Я удалил маршрут по умолчанию и добавил весь маршрут.

 routes.MapRoute(
                name : "catchAll",
                url : "{*Url}",
                defaults : new { controller = "Templates", action = 
 "ListUsers", id = UrlParameter.Optional });

По совпадению, я также удаляю комментарий для маршрута ниже

 routes.MapRoute(
                name : "Default",
                url : "{controller}/{action}/{id}",
                defaults : new { controller = "Home", action = 
 "Index", id = UrlParameter.Optional });

Я сделал сообщение, и он сработал. Если бы я прокомментировал весь маршрут, он работал нормально. Тем не менее, на весь маршрут, похоже, ничего не делалось, потому что обновление страницы возвращалось 404. Если бы я переместил catch все выше маршрута по умолчанию, он тоже перестал работать. Мне еще предстоит разобраться в этой части.

Поделиться
1

Ваш базовый шаблон должен иметь ui-view для хранения частичного представления preLogin, иначе угловой не будет знать, куда его поместить. Вы даже можете написать шаблон непосредственно на базовом шаблоне или сделать его директивой, а затем показать/скрыть на основе определенных критериев в вашем базовом контроллере.

Поделиться
  • 0
    Я думал, что говорю Angular поместить его в первый контейнер в файле конфигурации. Я что-то пропустил? .state ('login', {... "containerOne": {templateUrl: '/ Home / PreLogin', контроллер: preLoginController}, "containerTwo": {templateUrl: '/ Account / Login', контроллер: LoginController}} < div class = "row"> <div class = "col-md-6"> <div ui-view = "containerOne"> </ div> </ div>
  • 0
    Разве /Home/PreLogin возвращает данные JSON вместо шаблона? Можете ли вы сделать скрипку, если это не может решить вашу проблему? Здесь слишком много кода.
Показать ещё 7 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню