Post 来自 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-page 打字稿文件上，我可以这样读取数据：

@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;
            });
    }

然后在 aurelia-page html 文件中我可以这样显示数据：

<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 控制器的 post 数据的示例。例如，如果我的 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 的属性值是 post 端点的 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;
  }
}

Post 来自 aurelia 的数据进入 asp.net 控制器

Post data from aurelia form into asp.net controller

asp.net

asp.net-web-api

aurelia