Angular 4 Http Post在DotNet Core 2.0 API Controller中未达到API Post方法

Question

我已经从MVC / AngularJS 1.x升级到DotNet Core 2.0 / Angular4.x。与@ angular / common / http

大多数情况下，这是一件轻而易举的事，但是Web API使我丧命。我花了几分钟时间就可以开始工作，但是花了一个星期的时间，我尝试着在阳光下进行所有操作，以使Web Post正常工作。

我在这里所做的事情真的很容易复制。

进入Visual Studio 17，然后单击“文件/新建项目”

选择已安装/ Visual C＃/。NET Core

选择模板：ASP.NET核心Web应用程序

在辅助屏幕上，将顶部的下拉列表设置为.NET Core和ASP.NET Core 2.0

选择红色盾牌“ A”角模板

让项目拉下依赖项并重建。

除以下以外，一切都是Microsoft提供的开箱即用的演示应用程序：

将按钮添加到屏幕。

在.ts中添加代码以调用API控制器

将输入参数添加到控制器中的get方法

向控制器添加一个非常简单的post方法

我也正在尝试获取DotNet Core 2.2 / Angular6.x。使用@ angular / httpclient与完全相同的结果。获取非常容易，但是我已经尝试了在阳光下进行的所有配置，以使该帖子正常工作。我也将在其他版本中发布这样的帖子。现在，我只是想尽我所能，把Angularjs 1.x抛在后面。

document.referrer

import { Component, Inject } from '@angular/core';
import { Http, URLSearchParams, Headers } from '@angular/http';

@Component({
    selector: 'fetchdata',
    templateUrl: './fetchdata.component.html'
})
export class FetchDataComponent {
    public Http: Http;
    public BaseURL: string;
    public Headers: Headers;
    public startDateIndex = 0;
    public forecasts: WeatherForecast[] = [];
    public forecast: WeatherForecast = {
        dateFormatted: "3/27/2020",
        temperatureC: 0,
        temperatureF: 32,
        summary: "Cold Post"
    };

    constructor(http: Http, @Inject('BASE_URL') baseUrl: string) {
        this.Http = http;
        this.BaseURL = baseUrl;
        this.Headers = new Headers();
        this.Headers.append('Content-Type', 'application/json');
        http.get(baseUrl + 'api/SampleData/WeatherForecasts').subscribe(result => {
            this.forecasts = result.json() as WeatherForecast[];
        }, error => console.error(error));
    }
    public OnClick(pControl: string) {
        //console.log("LogOn.OnClick * pControl=" + pControl);
        switch (pControl) {
            case "Prior":
                this.startDateIndex -= 5;
                var params = new URLSearchParams;
                params.set("startDateIndex", this.startDateIndex.toString());
                this.Http.get(this.BaseURL + 'api/SampleData/WeatherForecasts/', { params: params }).subscribe(result => {
                    this.forecasts = result.json() as WeatherForecast[];
                }, error => console.error(error));
                break;
            case "Next":
                this.startDateIndex += 5;
                var params = new URLSearchParams;
                params.set("startDateIndex", this.startDateIndex.toString());
                this.Http.get(this.BaseURL + 'api/SampleData/WeatherForecasts/', { params: params }).subscribe(result => {
                    this.forecasts = result.json() as WeatherForecast[];
                }, error => console.error(error));
                break;
            case "Post":
                console.log("Post * this.forecast=" + JSON.stringify(this.forecast));
                var params = new URLSearchParams;
                params.set("weatherForecast", JSON.stringify(this.forecast));
                this.Http.post(this.BaseURL + '/api/SampleData/PostWeatherForecast/', this.forecast, { headers: this.Headers });
        }
    }
}

interface WeatherForecast {
    dateFormatted: string;
    temperatureC: number;
    temperatureF: number;
    summary: string;
}

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

<p *ngIf="!forecasts"><em>Loading...</em></p>

<table class='table' *ngIf="forecasts">
    <thead>
        <tr>
            <th>Date</th>
            <th>Temp. (C)</th>
            <th>Temp. (F)</th>
            <th>Summary</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let forecast of forecasts">
            <td>{{ forecast.dateFormatted }}</td>
            <td>{{ forecast.temperatureC }}</td>
            <td>{{ forecast.temperatureF }}</td>
            <td>{{ forecast.summary }}</td>
        </tr>
    </tbody>
</table>
<button class='btn btn-default pull-left' (click)="OnClick('Prior')">Previous</button>
<button class='btn btn-default pull-left' (click)="OnClick('Next')">Next</button>
<button class='btn btn-default pull-right' (click)="OnClick('Post')">Post</button>

Answer 1

改进的答案。该接口不是必需的，还可以进行其他一些较小的改进和删除不必要的代码。

popstate

import { Component, Inject } from '@angular/core';
import { Http, URLSearchParams, Headers } from '@angular/http';

@Component({
    selector: 'fetchdata',
    templateUrl: './fetchdata.component.html'
})
export class FetchDataComponent {
    public Http: Http;
    public BaseURL: string;
    public Headers: Headers;
    public startDateIndex = 0;
    public forecasts = [];
    public forecast = { dateFormatted: "3/27/2020", temperatureC: 0, temperatureF: 32, summary: "Cold Post" };

    constructor(http: Http, @Inject('BASE_URL') baseUrl: string) {
        this.Http = http;
        this.BaseURL = baseUrl;
        this.Headers = new Headers();
        this.Headers.append('Content-Type', 'application/json');
        http.get(baseUrl + 'api/SampleData/WeatherForecasts')
            .subscribe(result => this.forecasts = result.json(), error => console.error(error));
    }
    public OnClick(pControl: string) {
        //console.log("LogOn.OnClick * pControl=" + pControl);
        switch (pControl) {
            case "Prior":
                this.startDateIndex -= 5;
                var params = new URLSearchParams;
                params.set("startDateIndex", this.startDateIndex.toString());
                this.Http.get(this.BaseURL + 'api/SampleData/WeatherForecasts/', { params: params })
                    .subscribe(result => this.forecasts = result.json(), error => console.error(error));
                break;
            case "Next":
                this.startDateIndex += 5;
                var params = new URLSearchParams;
                params.set("startDateIndex", this.startDateIndex.toString());
                this.Http.get(this.BaseURL + 'api/SampleData/WeatherForecasts/', { params: params })
                    .subscribe(result => this.forecasts = result.json(), error => console.error(error));
                break;
            case "Post":
                console.log("Post * this.forecast=" + JSON.stringify(this.forecast));
                this.Http.post(this.BaseURL + '/api/SampleData/Post/', this.forecast, { headers: this.Headers })
                    .subscribe(result => alert("Posted" + JSON.stringify(result.json())), error => console.error(error));
                break;
        }
    }
}

Answer 2

解决了！没有订阅者，它将不会进行API调用。

import { Component, Inject } from '@angular/core';
import { Http, URLSearchParams, Headers } from '@angular/http';

@Component({
    selector: 'fetchdata',
    templateUrl: './fetchdata.component.html'
})
export class FetchDataComponent {
    public Http: Http;
    public BaseURL: string;
    public Headers: Headers;
    public startDateIndex = 0;
    public forecasts: WeatherForecast[] = [];
    public forecast: WeatherForecast = {
        dateFormatted: "3/27/2020",
        temperatureC: 0,
        temperatureF: 32,
        summary: "Cold Post"
    };

    constructor(http: Http, @Inject('BASE_URL') baseUrl: string) {
        this.Http = http;
        this.BaseURL = baseUrl;
        this.Headers = new Headers();
        this.Headers.append('Content-Type', 'application/json');
        http.get(baseUrl + 'api/SampleData/WeatherForecasts').subscribe(result => {
            this.forecasts = result.json() as WeatherForecast[];
        }, error => console.error(error));
    }
    public OnClick(pControl: string) {
        //console.log("LogOn.OnClick * pControl=" + pControl);
        switch (pControl) {
            case "Prior":
                this.startDateIndex -= 5;
                var params = new URLSearchParams;
                params.set("startDateIndex", this.startDateIndex.toString());
                this.Http.get(this.BaseURL + 'api/SampleData/WeatherForecasts/', { params: params })
                    .subscribe(result => { this.forecasts = result.json() as WeatherForecast[]; }, error => console.error(error));
                break;
            case "Next":
                this.startDateIndex += 5;
                var params = new URLSearchParams;
                params.set("startDateIndex", this.startDateIndex.toString());
                this.Http.get(this.BaseURL + 'api/SampleData/WeatherForecasts/', { params: params })
                    .subscribe(result => { this.forecasts = result.json() as WeatherForecast[]; }, error => console.error(error));
                break;
            case "Post":
                console.log("Post * this.forecast=" + JSON.stringify(this.forecast));
                this.Http.post(this.BaseURL + '/api/SampleData/PostWeatherForecast/', this.forecast, { headers: this.Headers })
                    .subscribe(result => { alert("Posted" + JSON.stringify(result.json())); }, error => console.error(error));
                break;
        }
    }
}

interface WeatherForecast {
    dateFormatted: string;
    temperatureC: number;
    temperatureF: number;
    summary: string;
}

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json.Linq;

namespace NG_20.Controllers
{
    [Route("api/[controller]/[action]")]
    public class SampleDataController : Controller
    {
        private static string[] Summaries = new[]
        {
            "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
        };

        [HttpGet]
        public IEnumerable<WeatherForecast> WeatherForecasts(int startDateIndex = 0)
        {
            var rng = new Random();
            return Enumerable.Range(1, 5).Select(index => new WeatherForecast
            {
                DateFormatted = DateTime.Now.AddDays(index + startDateIndex).ToString("d"),
                TemperatureC = rng.Next(-20, 55),
                Summary = Summaries[rng.Next(Summaries.Length)]
            });
        }

        [HttpPost]
        public object PostWeatherForecast([FromBody] object weatherForecast)
        {
            var forecast = JObject.Parse(weatherForecast.ToString()).ToObject<WeatherForecast>();
            var x = forecast.DateFormatted;
            return weatherForecast;
        }



        public class WeatherForecast
        {
            public string DateFormatted { get; set; }
            public int TemperatureC { get; set; }
            public string Summary { get; set; }

            public int TemperatureF
            {
                get
                {
                    return 32 + (int)(TemperatureC / 0.5556);
                }
            }
        }
    }
}