Как получить данные из контроллера asp net core в angular 2?

Question

[Carsberg]

Привет, решил разобраться с тем, как работает asp.net core 2 в связке с Angular 2, создал проект в студии и начал разбирать стандартный шаблон с 3 траничками: home, Counter и Fetch Data. И вот со вторым не совсем понятно. Изначально там чисто фронтовой, как я понял, инкремент:

export class CounterComponent {
    public currentCount = 0;

    public incrementCounter() {
        this.currentCount++;
    }
}

Мне стало интересно, а как можно сделать этот инкремент на сервере, т.е. через контроллер. Взял из FetchDataComponent код и вставил в CounterComponent, получилась такая штука:

export class CounterComponent {
    public currentCount = 0;

    constructor(http: Http, @Inject('BASE_URL') baseUrl: string) {
        http.get(baseUrl + 'api/SampleData/Increment').subscribe(result => {
            this.currentCount = result.json();
        }, error => console.error(error));
    }
}

и в контроллере добавил экшн:

int x = 0;
[HttpGet("[action]")]
        public int Increment()
        {
            return ++x;
        }

Вроде работает, но значение "1" подтягивается при переходе на окно с инкрементом(оно и понятно, видимо из-за constructor). Но я не понял как мне повесить на кнопку вызов экшена, чтобы он мне возвращал увеличенное на 1 значение? Что-то ничего не нагуглиось. Спасибо.

Answer 1

[Сергей]

На фронте в классе CounterComponent создай метод, где по нажатию кнопки будет происходить желаемое действие:

export class CounterComponent {
    public currentCount = 0;

    constructor(private http: Http, @Inject('BASE_URL') private baseUrl: string) { }

    Increment(){
        this.http.get(this.baseUrl + 'api/SampleData/Increment').subscribe(result => {
            this.currentCount = result.json().value;
        }, error => console.error(error));
        // а вообще, для инкапсуляции запросов лучше использовать сервисы
    }
}

Затем навешай этот метод-обработчик на событие click:

<button (click)="Increment()"></button>
Или на любой другой тег

В экшене я бы рекомендовал всегда использовать объекты, как минимум - анонимные:

static int x = 0; // здесь нужен static, иначе всегда будешь получать в ответе число 1
[HttpGet("[action]")]
public IActionResult Increment()
{
     x++;
     return Ok(new {
         value = x
     });
}

Comments

[Роман]

Так все равно не стоит делать, работать будет до первого перезапуска сервера или приложения. Да кстати и в core не обязательно IActionResult возвращать, можно указать любой тип.

[Сергей]

Роман, Я думаю, человек в ознакомительных целях пишет таким образом :) А вот IActionResult для универсальности желательно указывать, чтобы, к примеру, можно было вернуть BadRequest или любой другой StatusCode.