如何在ASP.NET Core React应用中调用Controller中的Post等方法？

我在React的details.js文件中有如下代码：

const response = await fetch('users');

这段代码会调用下方的ASP.NET Core MVC控制器：

// UsersController.cs
private readonly ILogger<UserController> _logger;

public UserController(ILogger<UserController> logger)
{
    _logger = logger;
}

[HttpGet]
public IEnumerable<User> Get()
{
    // 业务代码
}

目前这个fetch请求只会调用Get方法，我想调用控制器中的其他方法，比如：

[HttpPost]
public IEnumerable<User> UserDetails(string Id)
{
    // 业务代码
}

[HttpPost]
public IEnumerable<User> UserInfo(string name, string Id )
{
    // 业务代码
}
[HttpGet] // 注：原代码中的[HttpId]是错误的，ASP.NET Core无此特性
public IEnumerable<User> UserId(string firstname, string lastname, string companyId)
{
    // 业务代码
}

请问如何在details.js文件中调用这些方法？是否可以像下面这样实现？

const response = await fetch('users/UserInfo');

直接回答你的疑问：fetch('users/UserInfo')这样写不完全正确，必须匹配控制器方法的HTTP动词、路由规则，并正确传递参数，下面逐个说明各方法的调用方式：

1. 调用UserDetails（POST请求） #

该方法标记为[HttpPost]，必须发起POST请求，同时传递Id参数，推荐用JSON格式传参：

// details.js
const userId = "123";
const response = await fetch('users/UserDetails', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ Id: userId }),
});
const userData = await response.json();

同时需要修改控制器方法，添加[FromBody]特性以正确接收JSON参数，最好显式指定路由模板避免冲突：

[HttpPost("UserDetails")]
public IEnumerable<User> UserDetails([FromBody] string Id)
{
    // 业务代码
}

2. 调用UserInfo（POST请求） #

同样是POST请求，需传递name和Id两个参数，建议用模型类接收参数更规范：

// details.js
const userParams = { name: "张三", Id: "456" };
const response = await fetch('users/UserInfo', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(userParams),
});
const userData = await response.json();

控制器端新增请求模型类并修改方法：

[HttpPost("UserInfo")]
public IEnumerable<User> UserInfo([FromBody] UserInfoRequest request)
{
    // 使用request.Name和request.Id处理业务
    // 业务代码
}

// 新增请求模型
public class UserInfoRequest
{
    public string Name { get; set; }
    public string Id { get; set; }
}

3. 调用UserId（GET请求） #

原代码中的[HttpId]是错误的，ASP.NET Core没有该特性，需改为[HttpGet]。GET请求通过URL查询参数传递三个参数：

// details.js
const queryParams = new URLSearchParams({
  firstname: "张",
  lastname: "三",
  companyId: "789"
});
const response = await fetch(`users/UserId?${queryParams}`);
const userData = await response.json();

控制器方法指定路由即可：

[HttpGet("UserId")]
public IEnumerable<User> UserId(string firstname, string lastname, string companyId)
{
    // 业务代码
}

核心注意点 #

• 控制器类名需规范：应为UserController（首字母大写），否则路由识别会出问题
• 每个方法建议显式指定路由模板（如[HttpPost("UserDetails")]），避免路由匹配冲突
• HTTP动词必须严格对应：POST请求不能用GET方式调用，反之亦然
• 参数绑定要正确：JSON参数需加[FromBody]，URL查询参数默认自动绑定无需额外特性

内容的提问来源于stack exchange，提问作者Angela