将 aurelia 表单中的数据发布到 asp.net 控制器中答案

【问题标题】：Post data from aurelia form into asp.net controller将 aurelia 表单中的数据发布到 asp.net 控制器中
【发布时间】：2019-06-20 19:10:55
【问题描述】：

我可以像这样读取数据并将其显示在 aurelia-SPA 上：

在我的 ASP.NET 控制器中，我有：

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

在 aurelia-page typescript 文件上，我可以读取如下数据：

@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 控制器的示例。例如，如果我的 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>

【问题讨论】：

标签： asp.net asp.net-web-api aurelia

【解决方案1】：

在您的视图模型中，该模型与您在问题中的表单对应的视图 - 您需要实现您的 postdata() 方法。鉴于视图模型已注入 HttpClient 并将其分配给名为 http 的属性，并在同一视图模型上声明了名为 name 和 teamurl 的属性，并且有一个名为 postPath 的属性，其值为 url对于您的 post 端点 - 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;
  }
}

【讨论】：