时间戳

首页 > 解决方案 > react 和 ASP.NET Core 之间的路由

asp.net - react 和 ASP.NET Core 之间的路由

问题描述

我有一个任务，我必须修复错误并创建一些新功能。我一直在为 react 和 ASP.NET Core 之间的路由而苦苦挣扎。

我在启动文件中的端点看起来像这样

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

控制器的一些方法如下所示：

    [ApiController]
    [Route("[controller]")]
    public class FileController : ControllerBase
    {
        private readonly ILogger<FileController> _logger;
        private readonly IFileRepository _fileRepository;

        public FileController(ILogger<FileController> logger, IFileRepository fileRepository)
        {
            _logger = logger;
            _fileRepository = fileRepository;
        }

        [HttpGet]
        public Task<List<FileDetails>> Get()
        {
            return _fileRepository.GetFileDetailsAsync();
        }


[HttpGet]
public async Task<FileDetails> GetDetailedFileView(int id)
{
    FileDetails fileDetails = new FileDetails();

    if (String.IsNullOrEmpty(id.ToString()))
    {
        fileDetails = await _fileRepository.GetDetailedFileView(id);
    }

    return fileDetails;
}

[HttpGet]
public async Task<IActionResult> Delete(FileDetails fileDetails)
{
    if (fileDetails is Object)
    {
        fileDetails = await _fileRepository.DeleteFileDetailsAsync(fileDetails);
    }

    return (IActionResult)fileDetails;
}

在反应中它看起来像

<Route path='/file-list' component={FileList} />

只有当我使用它才有效

[HttpGet]
public Task<List<FileDetails>> Get()
{
    return _fileRepository.GetFileDetailsAsync();
}

但是从我收集的内容来看，只有 Task Action/IAction 方法应该在控制器中？

我一直在寻找几个小时，但仍然无法理解如何正确地从后端路由这个应用程序，并避免在反应中路由或使其匹配，否则它会出错，因为无法构建 json 或错误的路径已经分配的。请帮忙。

标签： asp.netreactjsasp.net-corereact-routerasp.net-mvc-routing

解决方案

控制器的路径
正如您所拥有的那样[Route("[controller]")]，控制器被称为FileController您当前的控制器路径是/file
如果您需要通过不同的路径调用 API，就像/file-list您可以通过更改来设置它[Route("/file-list")]

通过 id 获取如果您想通过请求添加到 GetDetailedFileView
来获取特定记录，如下所示/file/5[Route("{id:int}"]

[HttpGet]
[Route("{id:int}"]
public async Task<FileDetails> GetDetailedFileView(int id)
{
    FileDetails fileDetails = new FileDetails();

    fileDetails = await _fileRepository.GetDetailedFileView(id);

    return fileDetails;
}

Delete
使用[HttpDelete]而不是[HttpGet]对 DELETE HTTP 动词进行操作

[HttpDelete]
public async Task<IActionResult> Delete(FileDetails fileDetails)
{
    if (fileDetails is Object)
    {
        fileDetails = await _fileRepository.DeleteFileDetailsAsync(fileDetails);
    }

    return (IActionResult)fileDetails;
}

推荐阅读