Как передать данные от компонента к контроллеру?

Question

Передайте строковую переменную из внешнего интерфейса (HTML / .ts в контроллер C #).

Я просматриваю документацию angular.io и пошаговые руководства, сделанные неофициальными людьми.Я смотрел видео, и, похоже, ничего из этого не имеет отношения к моему коду.Я начал новый проект (веб-приложение ASP.NET Core с Angular) в Visual Studio 2019. Есть компоненты .ts и контроллеры .cs.Мой HTML настроен на ввод строки.Я пытался использовать HTTP-запрос POST и AJAX запросов.Возможно, я сделал их неправильно с неправильными аргументами.Я проконсультировался

Как отправить данные на контроллер ASP.NET с Angular2

ASP.Net MVC Как передать данные из представления в контроллер

Передача данных модели из представления в контроллер и использование их значений

AngularJS & asp.net MVC - передача данных в контроллер?

и многие другие, которых нет в StackOverflow.

.html

<input #box (keyup)="onKey(box.value)">
Your name is: {{name}}

.ts

onKey(value: string)
{
    this.name = value;
}

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

Answer 1

Я создаю демо, используя основной угловой шаблон asp.net. Он передает данные по Keyup.

1.home.component.html

<input #box (keyup)="onKey(box.value)">
Your name is: {{name}}

2.home.component.ts

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
})
export class HomeComponent {
  name: string;

  constructor(
    private http: HttpClient
  ) { }

  onKey(value: string):void {
    this.name = value;
    const formData: FormData = new FormData();
    formData.append('name', this.name);
    this.http.post('https://localhost:44336/api/SampleData/TestName', formData).subscribe(result => {
      console.log(result);
    }, error => console.error(error));
  }
}

3. Контроллер выборочных данных (/ api / sampleData)

[HttpPost("TestName")]
public JsonResult TestName(string name)
    {
        //your logic
        return Json(name);
    }

Answer 2

Согласно официальной линии: https://angular.io/guide/user-input

<input (keyup)="onKey($event)">

onKey(event: any) { 
    console.log(event.target.value); 
    let inputValue = event.target.value;    
  }

Теперь inputValue сохранит ваше значение из поля ввода для события Keyup.