Я обновил MVC / AngularJS 1.x до DotNet Core 2.0 / Angular 4.x. с @ angular / common / http
В основном это был легкий ветерок, но веб-API меня убивает. Я получил работу за несколько минут, но я потратил неделю, пробуя все под солнцем, чтобы веб-почта заработала.
То, что я сделал здесь, очень просто воспроизвести.
Зайдите в Visual Studio 17 и нажмите Файл / Новый проект
Выберите Установлено / Visual C # /. NET Core
Выберите шаблон: основное веб-приложение ASP.NET
На дополнительном экране установите раскрывающиеся списки в верхней части .NET Core и ASP.NET Core 2.0
Выберите Красный щит "A" Угловой шаблон
Позвольте проекту снять зависимости и перестроить.
ВСЕ - стандартное демонстрационное приложение от Microsoft, кроме:
Добавьте кнопки на экран.
Добавить код в .ts для вызова контроллера API
Добавить входной параметр в метод get в контроллере
Добавить очень простой метод post к контроллеру
Я также пытаюсь получить DotNet Core 2.2 / Angular 6.x. с @ angular / httpclient для работы с точно такими же результатами. Получить было очень легко, но я попробовал каждую конфигурацию под солнцем, чтобы заставить почту работать. Я сделаю пост, как это для другой версии. Сейчас я просто пытаюсь заставить себя работать и оставить Angularjs 1.x позади.
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>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
namespace NG_20.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 bool PostWeatherForecast([FromBody] WeatherForecast weatherForecast)
{
var forecast = weatherForecast;
return true;
}
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);
}
}
}
}
}