Передайте строковую переменную из внешнего интерфейса (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;
}

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

1
D. Joe 25 Июн 2019 в 07:03

2 ответа

Лучший ответ

Я создаю демо, используя основной угловой шаблон 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.SampleData (/ api / sampleData)

[HttpPost("TestName")]
public JsonResult TestName(string name)
    {
        //your logic
        return Json(name);
    }
2
Ryan 25 Июн 2019 в 06:47

Согласно официальной инструкции: 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.

0
Speeday 25 Июн 2019 в 04:19