.NET MVC + React js, как прикрутить fetch
На метаните есть базовый пример, который я упростил и пытаюсь переделать под fetch
.
Контроллер:
using Microsoft.AspNetCore.Mvc;
using ReactWithASP.Server.Models;
namespace ReactWithASP.Server.Controllers
{
[ApiController]
[Route("[controller]")]
public class PhonesController : Controller
{
static readonly List<Phone> data;
static PhonesController()
{
data = new List<Phone>
{
new Phone { Id = Guid.NewGuid().ToString(), Name="iPhone", Price=52000 },
new Phone { Id = Guid.NewGuid().ToString(), Name="Samsung", Price=42000 },
new Phone { Id = Guid.NewGuid().ToString(), Name="Xiaomi ", Price=66600 },
};
}
[HttpGet]
public IEnumerable<Phone> Get()
{
return data;
}
}
}
Представление:
import React from 'react';
import './App.css';
class PhonesList extends React.Component {
constructor(props) {
super(props);
this.state = { phones: [] };
}
loadData() {
fetch('phones')
.then(response => response.text())
.then((data) => this.setState({ phones: data }));
}
componentDidMount() {
this.loadData();
}
render() {
return <div>
<h2>List of phones</h2>
<div>
{
this.state.phones
}
</div>
</div>;
}
}
export default PhonesList
Данные определены прямо в контроллере. Надо их затащить в представление при стартовой загрузке. В оригинальном примере по ссылке сделано через XMLHttpRequest
, но я хочу использовать fetch
. В представленном варианте возвращает не данные, а разметку index.html
.
Program.cs
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
builder.Services.AddMemoryCache();
builder.Services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();
builder.Services.AddControllersWithViews();
builder.Services.AddControllers();
var app = builder.Build();
app.UseDefaultFiles();
app.UseStaticFiles();
if (app.Environment.IsDevelopment())
{
app.UseSwagger();
app.UseSwaggerUI();
}
app.UseDeveloperExceptionPage();app.UseDefaultFiles();
app.UseStaticFiles();
app.UseHttpsRedirection();
app.UseAuthorization();
app.MapControllers();
app.MapDefaultControllerRoute();
app.UseAntiforgery();
app.Run();