reactjs 正确的MVC路径Map.NET 6使用React

ijxebb2r  于 2023-04-20  发布在  React
关注(0)|答案(2)|浏览(132)

我怀疑这是一个非常简单的解决方案。我用React创建了一个全新的ASP.NET Core 6项目(在VS 2022中)。默认项目有一个WeatherForecast组件。我复制了这个组件并试图创建一个新的控制器。不幸的是,它只返回了备用Index.html
代码如下:

// React
async getSitemapData() {
        //axios.get("Sitemap")
        //    .then(resp => {
        //        console.log(resp.data);
        //        this.setState({ sitemap: resp.data, loading: false });
        //    });
        const response = await fetch('sitemap');
        const data = await response.json(); //execution does not reach this line
        console.log(data);
        this.setState({ sitemap: data, loading: false });
}
//program.cs controller mapping
app.UseStaticFiles();
app.UseRouting();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller}/{action=Index}/{id?}");

app.MapFallbackToFile("index.html");
//SitemapController.cs
using Microsoft.AspNetCore.Mvc;

namespace Intranet.Controllers
{
    [ApiController]
    [Route("[controller]")]

    //public class DataController : ControllerBase
//Edit updated controller name
    public class SitemapController : ControllerBase
    {
        [HttpGet]
        public IActionResult Get()
        {
            try
            {
                // Read the data.json file and return its contents as JSON
                var path = Path.Combine(Directory.GetCurrentDirectory(), "/App_Data/sitemap.json");
                var data = System.IO.File.ReadAllText(path);
                return new JsonResult(data);
            }
            catch (Exception ex)
            {
                return StatusCode(StatusCodes.Status500InternalServerError, ex.Message);
            }
        }
    }
}

下面是WeatherForecastController的函数:

//WeatherForecastController.cs
using Microsoft.AspNetCore.Mvc;

namespace Intranet.Controllers
{
    [ApiController]
    [Route("[controller]")]
    public class WeatherForecastController : ControllerBase
    {
        private static readonly string[] Summaries = new[]
        {
            "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
        };

        [HttpGet]
        public IEnumerable<WeatherForecast> Get()
        {
            return Enumerable.Range(1, 5).Select(index => new WeatherForecast
            {
                Date = DateTime.Now.AddDays(index),
                TemperatureC = Random.Shared.Next(-20, 55),
                Summary = Summaries[Random.Shared.Next(Summaries.Length)]
            })
            .ToArray();
        }
    }
}

除了返回的数据类型(sitemap读取JSON文件并返回内容而不是数组。JSON是有效的,因为我已经在另一个正在修改的网站中使用了它),我所看到的一切都告诉我它应该工作。谢谢。

rxztt3cl

rxztt3cl1#

首先需要将URL添加到setupProxy.js

const context = [
    "/weatherforecast",

     //add here 
    "/sitemap"
];

然后,您可以使用const response = await fetch('sitemap');访问SitemapController端点。

ecr0jaav

ecr0jaav2#

最有可能的是,你的代码找不到你试图读取的JSON文件。一个可能的罪魁祸首Directory.GetCurrentDirectory可能不是你在运行时所期望的。
对于提供静态文件,ASP.NET文档有以下建议:
考虑一个目录层次结构,其中要提供的静态文件驻留在Web外部

  • wwwroot
  • 社会科学委员会
  • 图像
  • js
  • MyStaticFiles
  • 图像
  • red-rose.jpg

通过配置静态文件中间件,请求可以访问red-rose.jpg文件,如下所示:

// Code omitted for brevity

app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
           Path.Combine(builder.Environment.ContentRootPath, "MyStaticFiles")),
    RequestPath = "/StaticFiles"
});

// Code omitted for brevity

在前面的代码中,MyStaticFiles目录层次结构通过StaticFiles URI段公开。对https:///StaticFiles/images/red-rose.jpg的请求提供red-rose.jpg文件。

相关问题