[英]Angular 6 HttpClient Post not hitting API Post Method in DotNet Core 2.2 API Controller
我已經從 MVC/AngularJS 1.x 升級到 DotNet Core 2.2/Angular 6.x。 使用@angular/common/http
大多數情況下，它是輕而易舉的，但 Web API 正在扼殺我。 我在幾分鍾內就可以開始工作，但我花了一周的時間在陽光下嘗試一切以使 Web Post 正常工作。
我在這里所做的很容易復制。
進入 Visual Studio 17 並單擊文件/新建項目
選擇已安裝/Visual C#/.NET Core
選擇模板：ASP.NET core Web Application
在輔助屏幕上將頂部的下拉列表設置為 .NET Core 和 ASP.NET Core 2.2
選擇紅盾“A”角模板
讓項目拉下依賴並重建。
一切都是微軟提供的開箱即用演示應用程序，除了：
將按鈕添加到屏幕上。
將代碼添加到 .ts 以調用 API Controller
將輸入參數添加到控制器中的 get 方法
給控制器添加一個非常簡單的post方法
我也在嘗試獲得 DotNet Core 2.0/Angular 4.x。 使用@angular/http 處理完全相同的結果。 獲取非常簡單，但我已經嘗試了各種配置以使帖子正常工作。 我也會為其他版本發布這樣的帖子。 現在，我只是想盡我所能，把 AngularJS 1.x 拋在腦后。
import { Component, Inject } from '@angular/core'; import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http'; @Component({ selector: 'app-fetch-data', templateUrl: './fetch-data.component.html' }) export class FetchDataComponent { public Http: HttpClient; public BaseURL: string; public HttpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) }; public startDateIndex = 0; public forecasts: WeatherForecast[] = []; public forecast: WeatherForecast = { dateFormatted: "3/27/2020", temperatureC: 0, temperatureF: 32, summary: "Cold Post" }; constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) { this.Http = http; this.BaseURL = baseUrl; http.get<WeatherForecast[]>(baseUrl + 'api/SampleData/WeatherForecasts') .subscribe(result => { this.forecasts = result; }, error => console.error(error)); } public OnClick(pControl: string) { //console.log("LogOn.OnClick * pControl=" + pControl); switch (pControl) { case "Prior": this.startDateIndex -= 5; this.Http.get<WeatherForecast[]>(this.BaseURL + 'api/SampleData/WeatherForecasts/', { params: new HttpParams().set('startDateIndex', this.startDateIndex.toString()) }) .subscribe(result => { this.forecasts = result; }, error => console.error(error)); break; case "Next": this.startDateIndex += 5; this.Http.get<WeatherForecast[]>(this.BaseURL + 'api/SampleData/WeatherForecasts/', { params: new HttpParams().set('startDateIndex', this.startDateIndex.toString()) }) .subscribe(result => { this.forecasts = result; }, error => console.error(error)); break; case "Post": console.log("Post * this.forecast=" + JSON.stringify(this.forecast) + "this.HttpOptions=" + JSON.stringify(this.HttpOptions)); this.Http.post<WeatherForecast>(this.BaseURL + '/api/SampleData/PostWeatherForecast/', this.forecast, this.HttpOptions); } } } 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 table-striped' *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>
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
namespace NG_22.Controllers
{
[Route("api/[controller]")]
public class SampleDataController : Controller
{
private static string[] Summaries = new[]
{
"Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
};
[HttpGet("[action]")]
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("[action]")]
public WeatherForecast PostWeatherForecast([FromBody] WeatherForecast weatherForecast)
{
var forecast = weatherForecast;
//return weatherForecast;
return new WeatherForecast()
{
DateFormatted = DateTime.Now.ToString("d"),
TemperatureC = 30,
Summary = Summaries[2]
};
}
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);
}
}
}
}
}
解決了！！！！
問題是沒有任何訂閱。 如果沒有人在聽，它也不會打擾給郵政打電話。 我添加了一個 .subscribe 並且效果很好。
import { Component, Inject } from '@angular/core';
import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
@Component({
selector: 'app-fetch-data',
templateUrl: './fetch-data.component.html'
})
export class FetchDataComponent {
public Http: HttpClient;
public BaseURL: string;
public HttpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
};
public startDateIndex = 0;
public forecasts: WeatherForecast[] = [];
public forecast: WeatherForecast = {
dateFormatted: "3/27/2020",
temperatureC: 0,
temperatureF: 32,
summary: "Cold Post"
};
constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
this.Http = http;
this.BaseURL = baseUrl;
http.get<WeatherForecast[]>(baseUrl + 'api/SampleData/WeatherForecasts')
.subscribe(result => { this.forecasts = result; }, error => console.error(error));
}
public OnClick(pControl: string) {
//console.log("LogOn.OnClick * pControl=" + pControl);
switch (pControl) {
case "Prior":
this.startDateIndex -= 5;
this.Http.get<WeatherForecast[]>(this.BaseURL + 'api/SampleData/WeatherForecasts/', { params: new HttpParams().set('startDateIndex', this.startDateIndex.toString()) })
.subscribe(result => { this.forecasts = result; }, error => console.error(error));
break;
case "Next":
this.startDateIndex += 5;
this.Http.get<WeatherForecast[]>(this.BaseURL + 'api/SampleData/WeatherForecasts/', { params: new HttpParams().set('startDateIndex', this.startDateIndex.toString()) })
.subscribe(result => { this.forecasts = result; }, error => console.error(error));
break;
case "Post":
console.log("Post * this.forecast=" + JSON.stringify(this.forecast) + "this.HttpOptions=" + JSON.stringify(this.HttpOptions));
this.Http.post<WeatherForecast>(this.BaseURL + '/api/SampleData/PostWeatherForecast/', this.forecast, this.HttpOptions)
.subscribe(result => { console.log("Posted" + JSON.stringify(result)); }, error => console.error(error));
}
}
}
interface WeatherForecast {
dateFormatted: string;
temperatureC: number;
temperatureF: number;
summary: string;
}
改進的答案。 不需要接口和其他較小的改進和刪除不必要的代碼。
import { Component, Inject } from '@angular/core'; import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http'; @Component({ selector: 'app-fetch-data', templateUrl: './fetch-data.component.html' }) export class FetchDataComponent { public Http: HttpClient; public BaseURL: string; public HttpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) }; public startDateIndex = 0; public forecasts: any; public forecast = { dateFormatted: "3/27/2020", temperatureC: 0, temperatureF: 32, summary: "Cold Post", Data: { color: "red", Size: "Large" } }; constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) { this.Http = http; this.BaseURL = baseUrl; http.get(baseUrl + 'api/SampleData/WeatherForecasts') .subscribe(result => { this.forecasts = result; }, error => console.error(error)); } public OnClick(pControl: string) { //console.log("LogOn.OnClick * pControl=" + pControl); switch (pControl) { case "Prior": this.startDateIndex -= 5; this.Http.get(this.BaseURL + 'api/SampleData/WeatherForecasts/', { params: new HttpParams().set('startDateIndex', this.startDateIndex.toString()) }) .subscribe(result => { this.forecasts = result; }, error => console.error(error)); break; case "Next": this.startDateIndex += 5; this.Http.get(this.BaseURL + 'api/SampleData/WeatherForecasts/', { params: new HttpParams().set('startDateIndex', this.startDateIndex.toString()) }) .subscribe(result => { this.forecasts = result; }, error => console.error(error)); break; case "Post": console.log("Post * this.forecast=" + JSON.stringify(this.forecast) + "this.HttpOptions=" + JSON.stringify(this.HttpOptions)); this.Http.post(this.BaseURL + '/api/SampleData/PostWeatherForecast/', this.forecast, this.HttpOptions) .subscribe(result => { alert("Posted" + JSON.stringify(result)); }, error => console.error(error)); } } }
<h1>Weather forecast</h1> <p>This component demonstrates fetching data from the server.</p> <p *ngIf="!forecasts"><em>Loading...</em></p> <table class='table table-striped' *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>
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
namespace NG_22.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] WeatherForecast weatherForecast)
{
var forecast = weatherForecast;
//return weatherForecast;
return new
{
DateFormatted = DateTime.Now.ToString("d"),
TemperatureC = 30,
Summary = Summaries[2]
};
}
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);
}
}
public object Data { get; set; }
}
}
}
using DMChess_Data.Model;
using Microsoft.EntityFrameworkCore;
using System;
using System.Linq;
using System.Collections.Generic;
using System.Text;
using System.Threading.Tasks;
namespace DMChess_Data
{
public class Entities
{
private dmchessContext DMCConnection = new dmchessContext();
private Guid AppId = new Guid("B6C093C8-AE8C-40CD-9E0D-3BD2118422EC");
public bool SaveChanges()
{
try
{
DMCConnection.SaveChangesAsync();
}
catch(Exception pException)
//catch (Microsoft.EntityFrameworkCore.)
//catch (System.Data.Entity.Validation.DbEntityValidationException ex)
{
var ex = pException;
//foreach (var eve in ex.EntityValidationErrors)
//{
// var type = eve.Entry.Entity.GetType().Name;
// var state = eve.Entry.State;
// foreach (var ve in eve.ValidationErrors)
// {
// var propertyName = ve.PropertyName;
// var ErrorMessage = ve.ErrorMessage;
// }
//}
//var m = ex;
throw;
}
DMCConnection.SaveChanges();
return true;
}
#region AUsers
public AUsers AUsersGet(Guid pId, string pPassword)
{
return DMCConnection.AUsers.FirstOrDefault(x => x.KAppId == AppId && x.KId == pId && x.Password == pPassword);
}
public AUsers AUsersGet(string pEmailAddress, string pPassword)
{
return DMCConnection.AUsers.FirstOrDefault(x => x.KAppId == AppId && x.EmailAddress == pEmailAddress);
}
#endregion
#region DProfiles
public DProfiles DProfileGet(Guid pKUserId, int pKIdx)
{
return DMCConnection.DProfiles.FirstOrDefault(x => x.KAppId == AppId && x.KUserId == pKUserId && x.KIdx == pKIdx);
}
public List<DProfiles> DProfilesGet(string pUserIdName)
{
return DMCConnection.DProfiles.Where(x => x.KAppId == AppId && x.UserIdToLower == pUserIdName.ToLower()).ToList();
}
#endregion
}
}
using D2Chess.Server.IO;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.SignalR;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using System;
namespace D2Chess.Controllers
{
[Route("api/[controller]/[action]")]
public class WebController : Controller
{
#region Init
private JsonSerializer jsonSerializer = new JsonSerializer();
private Repository repository = new Repository();
public WebController(IHubContext<D2Chess.Server.IO.Hub> hubContext) { D2Chess.Server.IO.Hub.StaticContext = hubContext; }
#endregion
#region Classes
public class Parms {
public Guid? TokenId { get; set; }
public string Action { get; set; }
public object Data { get; set; }
}
public class Result
{
public bool Success { get; set; }
public object Data { get; set; }
public Result(bool pSuccess, object pData = null) { this.Success = pSuccess; this.Data = pData; }
}
#endregion
#region Sync Methods
[HttpGet]
public object Get(string pAction, string pKey = "", Guid? pTokenId = null)
{
return repository.WebGet(pAction, pKey, pTokenId);
//var result = repository.WebGet(pAction, pKey, pTokenId);
//return result;
}
[HttpPost]
public object Post([FromBody] object pParms)
{
var parms = ((JObject)pParms).ToObject<Parms>();
return repository.WebPost(parms.Action, parms.Data, parms.TokenId);
//var result = repository.WebPost(parms.Action, parms.Data, parms.TokenId);
//return result;
}
#endregion
}
}
Angular 4 Http Post 未命中 DotNet Core 2.0 API 控制器中的 API Post 方法
[英]Angular 4 Http Post not hitting API Post Method in DotNet Core 2.0 API Controller
Post方法在Asp.net Core 2.2 Web API控制器中返回404
[英]Post method returns 404 in Asp.net core 2.2 Web API Controller
從Angular HttpClient到ASP.NET Core 2.2 Web API進行POST調用時出現404錯誤（啟用了CORS）
[英]404 error when making a POST call from Angular HttpClient to ASP.NET Core 2.2 Web API (with CORS enabled)
Dotnet Web API 項目自動生成控制器的 POST 方法問題
[英]Issue with POST method of Auto generated Controller for Dotnet Web API project
使用 ASP.NET MVC 5 Z594C103F5906E04CABFAZ8
[英]Download file from dotnet Core Web API using POST in ASP.NET MVC 5 controller
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.