Публиковать данные из формы aurelia в контроллер asp.net

Question

Я могу читать данные и отображать их на aurelia-SPA следующим образом:

В моем контроллере ASP.NET у меня есть:

[HttpGet("[action]")]
public IEnumerable<Team> Teams()
{
    var Teams = _teamRepository.GetAllTeams().OrderBy(p => p.Name);
    return Teams;
}

В файле машинописи страницы aurelia я могу затемчитать данные так:

@inject(HttpClient)
export class Fetchdata {

    public Teams: Teams[] | undefined;

    constructor(http: HttpClient) {
        http.fetch('api/SampleData/Teams')
            .then(result => result.json() as Promise<Teams[]>)
            .then(data => {
                this.Teams = data;
            });
    }

А затем в html-файле страницы aurelia я могу показать данные примерно так:

<template>
    <h1>Teams in database</h1>
    <p if.bind="!Teams"><em>Loading...</em></p> 
    <table if.bind="Teams" class="table">
        <thead>
            <tr>
                <th>TeamName</th>
            </tr>
        </thead>
        <tbody>
            <tr repeat.for="team of Teams">
                <td>${ team.name }</td>
            </tr>
        </tbody>
    </table>
</template>

Это работает отлично.Сейчас я не могу найти пример того, как создать простую форму и отправить данные из нее на контроллер ASP.NET.Например, если бы моя aurelia html содержала такую ​​форму:

<form role="form" submit.delegate="postdata()">
    <label for="name">Teamn Name</label>
    <input type="text" value.bind="name" placeholder="Name">

    <label for="teamurl">TeamUrl</label>
    <input type="text" value.bind="teamurl" placeholder="Teamurl">

    <button type="submit">Add Team to DB</button>
</form>

Answer 1

В вашей модели представления, которая соответствует представлению с формой, которая у вас есть в вашем вопросе - вам необходимо реализовать метод postdata().Учитывая, что в модель представления вставлено HttpClient и присвоено свойство с именем http, а свойства с именами name и teamurl объявлены в этой же модели представления, и существует свойство с именем postPath, значением которого является URLдля конечной точки вашего сообщения - postdata метод будет выглядеть примерно так:

public async postdata(): Promise<bool> {
  if (!this.name || !this.teamurl) {
    return; // no valid data. abort.
  }

  // given that there is a type called Team and it has a constructor which 
  // takes corresponding parameters - init up a new instance of Team with
  // current name and teamurl values
  let payload = new Team(this.name, this.teamurl); 

  try {
    await this.http.fetch(postPath, {
      method: "post",
      body: JSON.stringify(payload),
    }).then(response => response.json());
    // return true if no error, there might be a need for more complicated logic here
    // depending on what your post endpoint returns
    return true;
  } catch(e: Exception) {
    console.log("Error: ", e.Message); // handle the error logging however you need.
    return false;
  }
}