AngularJS + WebApi вывести данные из модели

@fadeinmad · Регистрация: 25.11.2012

Author24 — интернет-сервис помощи студентам

Только начал изучать AngularJS и WebApi, не до конца понимаю механизм отображения данных. Работаю на VS 2015.

Есть модель:

Кликните здесь для просмотра всего текста

C#

public class Person
{
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string MiddleName { get; set; }
        public string LastName { get; set; }
        public int Growth { get; set; }
}

Есть контроллер:

Кликните здесь для просмотра всего текста

C#

public class PersonController : ApiController
{
        Person[] persons = new Person[]
        {
          new Person {Id=0, FirstName="Петр", MiddleName="Петрович", LastName="Петров", Growth=24 },
          new Person {Id=1, FirstName="Иван", MiddleName="Иванович", LastName="Иванов", Growth=20 }
        };
 
        public IEnumerable<Person> GetAllPersons()
        {
            return persons;
        }
 
        public IHttpActionResult GetProduct(int id)
        {
            var person = persons.FirstOrDefault((p) => p.Id == id);
            if (person == null) return NotFound();
            return Ok(person);
        }
}

Задача элементарная: вывести ФИО человека с нужным Id. Не понимаю, как вызвать метод контроллера и получить нужное значение.
Index.html:

Кликните здесь для просмотра всего текста

HTML5

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>MyTestSite</title>
    <meta charset="utf-8" />
    <script src="../Scripts/angular.js"></script>
</head>
<body>
    <div ng-app="TestApp" ng-controller="PersonController">
        <p>ID: <input type="text" ng-model="id"/></p>
        <h1 <!--так понимаю, что вызов метода здесь, но не знаю синтаксиса-->>
              ФИО: {{person.FirstName}} {{person.MiddleName}} {{person.LastName}}</h1>
    </div>
</body>
</html>

Добавлено через 9 минут
В контроллере вместо GetProduct() метод GetPerson. Делал по примерам, копипаст до добра не доводит.

@Мотороллер · 06.12.2015, 02:50

я не знаю шарп, но в ангуларе надо послать запрос на сервак, в ответ должен прийти JSON объект, который и будет объектом модели.

@fadeinmad · 06.12.2015, 13:20 **[ТС]**

Сообщение от Мотороллер

я не знаю шарп, но в ангуларе надо послать запрос на сервак, в ответ должен прийти JSON объект, который и будет объектом модели

Я не знаю, как правильно это сделать. Не знаю синтаксиса. В статьях в инете написано про чистый ангуляр (там модель описывается не в отдельном модуле на C#, а на javascript, причем зачастую в том же файле, модель, контроллер и прочее)...

@Мотороллер · 06.12.2015, 13:30

fadeinmad, шарп - это фронтенд. Модель ангулара - это яваскриптовый объект.

Добавлено через 19 секунд
ща покажу

Добавлено через 6 минут
бэкенд у меня на руби он раилс. Я делаю так:

Rails

1
2
3

def show
    render json: User.find(params[:id]).to_json(include: :role)
  end

Метод show у меня срабатывает, когда я шлю GET запрос на сервак вида /users/:id. Затем ищется пользователь в БД и рендерится как JSON. т.е сервак отдает браузеру примерно такое

JSON

{"id":2,"login":"medical","email":"medical","role_id":3,"name":"Тест","surname":"Тестов","patronymic":"Тестович","in_archive":false,"role":{"id":3,"name":"medical","displayed_name":"Врач","mofs_modules":[{"id":3,"name":"emk","displayed_name":"ЕМК"},{"id":4,"name":"vkk_bmd","displayed_name":"ВКК и БМД"}],"users_count":1},"full_name":"Тестов Тест Тестович"}

Ангулар же это видит как

Javascript

1	Object {id: 2, login: "medical", email: "medical", role_id: 3, name: "Тест"…}

Далее я присваиваю это в переменную user. И могу обращаться к ней во вьюхах

HTML5

1	<h1>{{user.name}}</h1>

и получу на вьюхе Тест большими буквами

@fadeinmad · 06.12.2015, 16:35 **[ТС]**

Мне надо вызвать метод GetProduct(int id) из моего контроллера с помощью ангуляра.
Мне надо узнать, где в разметке указать вызов?

@Мотороллер · 06.12.2015, 20:10

onChange событие обрабатывайте. И получайте нужный продукт

Новые блоги и статьи
Как программировать под HCL Notes и создавать свои продукты на ее основе InfoMaster 11.01.2025 HCL Notes (ранее известный как IBM Notes и Lotus Notes) представляет собой мощную платформу для разработки корпоративных приложений, которая сочетает в себе функции электронной почты, календаря,. . .	Как работать с SVN (Subversion) InfoMaster 11.01.2025 Введение Система контроля версий является неотъемлемой частью современного процесса разработки программного обеспечения. Она обеспечивает управление изменениями в коде, позволяет отслеживать. . .	Использование GraphQL в JavaScript InfoMaster 11.01.2025 Введение в GraphQL и его преимущества В современной разработке веб-приложений эффективный обмен данными между клиентом и сервером играет ключевую роль. GraphQL представляет собой язык запросов и. . .	Администрирование Git, продвинутые техники работы с Git InfoMaster 11.01.2025 Основы управления репозиторием Эффективное управление Git-репозиторием требует глубокого понимания механизмов контроля доступа и инструментов администрирования. Рассмотрим ключевые аспекты. . .	Что такое HCL Notes и как с ним работать InfoMaster 10.01.2025 HCL Notes (ранее известный как IBM Notes и Lotus Notes) представляет собой комплексную платформу для совместной работы и обмена информацией в корпоративной среде. Это многофункциональное решение,. . .	Как работать с Git из Windows и Visual Studio InfoMaster 10.01.2025 Работа с Git в Windows Работа с Git в операционной системе Windows может быть осуществлена с помощью различных инструментов, каждый из которых обладает своими уникальными возможностями и. . .
Аналог оператора switch case в Python InfoMaster 10.01.2025 Оператор switch case используется в программировании для выбора одного из нескольких вариантов исполнения кода. Однако в языке Python этот оператор отсутствует. Понимание аналогов switch case в. . .	Отличия абстрактного класса от интерфейса InfoMaster 10.01.2025 В современной разработке программного обеспечения существуют два основных механизма реализации абстракции: абстрактные классы и интерфейсы. Эти инструменты, хотя и схожи в своей основной цели -. . .	Как работать в Git InfoMaster 10.01.2025 Git — это одна из наиболее популярных систем контроля версий, которая активно используется разработчиками по всему миру. Она позволяет эффективно управлять изменениями в коде, координировать работу. . .	Реализация передвижения персонажа в Unity3d на C# InfoMaster 10.01.2025 Реализация передвижения персонажа в Unity3D начинается с правильной настройки проекта. Этот этап критически важен для создания отзывчивого и плавного управления. Рассмотрим основные шаги для создания. . .	Docker: руководство для начинающих InfoMaster 10.01.2025 В современном мире разработки программного обеспечения контейнеризация стала неотъемлемой частью процесса создания и развертывания приложений. Docker, как ведущая платформа контейнеризации, произвела. . .	Книги и учебные ресурсы по C# InfoMaster 08.01.2025 Базовые учебники и руководства Одной из лучших книг для начинающих является "C# 10 и . NET 6 для начинающих" Эндрю Троелсена и Филиппа Джепикса . Книга последовательно раскрывает основные концепции. . .

@Мотороллер 435 / 246 / 43 Регистрация: 05.08.2013 Сообщений: 1,670
	06.12.2015, 02:50	2
	я не знаю шарп, но в ангуларе надо послать запрос на сервак, в ответ должен прийти JSON объект, который и будет объектом модели. 0

@fadeinmad 9 / 9 / 2 Регистрация: 25.11.2012 Сообщений: 115
	06.12.2015, 13:20 [ТС]	3
	Сообщение от Мотороллер я не знаю шарп, но в ангуларе надо послать запрос на сервак, в ответ должен прийти JSON объект, который и будет объектом модели Я не знаю, как правильно это сделать. Не знаю синтаксиса. В статьях в инете написано про чистый ангуляр (там модель описывается не в отдельном модуле на C#, а на javascript, причем зачастую в том же файле, модель, контроллер и прочее)... 0

@fadeinmad 9 / 9 / 2 Регистрация: 25.11.2012 Сообщений: 115
	06.12.2015, 16:35 [ТС]	5
	Мне надо вызвать метод GetProduct(int id) из моего контроллера с помощью ангуляра. Мне надо узнать, где в разметке указать вызов? 0

@Мотороллер 435 / 246 / 43 Регистрация: 05.08.2013 Сообщений: 1,670
	06.12.2015, 20:10	6
	onChange событие обрабатывайте. И получайте нужный продукт 0