.NET Core WebAPI（自动）通过JavaScript fetch调用时绑定参数

于 2024-08-20 22:38:44 发布
阅读量106 收藏
点赞数
分类专栏： ASP.NET CORE 文章标签： .NET Core WebAPI FromQuery FromForm FromBody FromHeader JavaScript
原文链接：https://www.codeproject.com/Articles/5383531/NET-Core-WebAPI-Auto-Binding-Parameters-When-Calli
版权

目录

介绍

本文将如何工作

WebAPI参数属性

背景

在WebAPI参数上使用FromQuery

源代码

启动WebAPI：使用浏览器进行测试

[FromQuery]示例代码

JavaScript获取[FromQuery]

错误

在WebAPI参数上使用FromForm

注意——防伪(AntiForgery)

对.NET Core最小WebAPIs的重大更改

FromForm的WebAPI略有变化

嘘！它总是一些东西！FromForm的JS获取调用

在WebAPI参数上使用FromBody

FromBody的JavaScript fetch调用有问题

不起作用

不起作用2

不起作用3

不起作用4：但确实击中了WebAPI

自动绑定错误：WebAPI无法绑定到变量

问题是什么：你如何解决它？

创建服务器端对象

为工作示例定义 RegisterUser4

JS获取FromBody & 使用JSON.Stringify

在WebAPI参数上使用FromHeader

JavaScript获取[FromHeader]

额外材料OpenApi文档

如何查看OpenApi文档？

您也可以通过curl试用api

GitHub - raddevus/BindApi：在dotnet webapi和JavaScript Fetch中使用自动绑定的文章示例代码[^]

介绍

这是一篇快速文章，其中包含多个示例，演示了如何利用.NET Core WebAPI自动绑定功能的用户。我知道这通常被称为模型绑定，但我的示例涵盖了您只需将一个参数值传递给WebAPI方法的情况。

本文将如何工作

我将为每个示例提供两件事，以便你可以确切地了解自动绑定功能在.NET Core WebAPI中的工作原理。

  1. WebAPI方法定义（通过最小API的示例代码）
  2. JavaScript Fetch示例，可用于POST到WebAPI并查看结果

WebAPI参数属性

.NET Core WebAPI方法允许你使用不同属性的数量来标记参数：

  1. [FromQuery]
  2. [FromForm]
  3. [FromBody]
  4. [FromHeader]
  5. [FromServices]*
  6. [FromKeyedServices]*

*最后两个是.NET Core 8.x的全新功能，我不会在这里介绍它们。但是，我将通过完整的示例介绍前四个属性。

背景

在撰写另一篇文章时，每个用户都有自己的数据库（即将推出），我遇到了.NET Core WebAPIs中的自动绑定参数问题。

我已经编写了许多.NET Core WebAPI，但我注意到有时它比其他Web API更容易。我通常喜欢我的WebAPI使用[FromBody]从发布的正文中获取数据。

但是，我发现了在某些情况下这对我来说会失败的确切原因。

在WebAPI参数上使用FromQuery

让我们从我认为最简单的发布数据方法开始，在WebAPI方法上使用[FromQuery]属性。

源代码

  1. 我将在此处添加最短的代码，以便创建快速讨论，但如果您想查看源代码，可以从本文顶部下载或在我的GitHub存储库中获取。
  2. 我将创建包含最小WebAPI的非常小的项目，并且几乎在每种情况下方法的名称都相同，只是它们将为每个示例包含一个数字，以便您可以在本地启动WebAPI，并根据需要自己尝试这些示例。

启动WebAPI：使用浏览器进行测试

启动WebAPI（从下载的代码）后，您可以加载URL并使用浏览器控制台使用JavaScript Fetch API POST到WebAPI。以下是其外观的快照：

[FromQuery]示例代码

[HttpPost] public ActionResult RegisterUser1([FromQuery] string uuid)

在我们的最小API中，您将看到此方法按以下方式定义：

app.MapPost("/RegisterUser1", IResult ([FromQuery] string uuid) =>   {
    return Results.Ok(new { Message = $"QUERY - You sent in uuid: {uuid}" });
});

JavaScript获取[FromQuery]

fetch(`http://localhost:5247/RegisterUser1?uuid=987-fake-uuid-1234`,
      {method: 'POST'})
        .then(response => response.json())
        .then(data => console.log(data));

这个很容易。如果您在URL中提供queryString项（?uuid），则该项目将自动绑定到uuid字符串变量，您将获得有效结果。但是，如果未提供queryString值，则当WebAPI尝试自动绑定时，它将发生错误。

错误

 An unhandled exception has occurred while executing the request.
      Microsoft.AspNetCore.Http.BadHttpRequestException: 
Required parameter "string uuid" was not provided from query string.

在WebAPI参数上使用FromForm

让我们使用该[FromForm]属性定义第二个WebAPI方法。

app.MapPost("/RegisterUser2", IResult ([FromForm] string uuid) =>   {
    return Results.Ok(new { Message = $"FORM - You sent in uuid: {uuid}" });
})

注意——防伪(AntiForgery)

一旦我开始针对上述命令运行Fetch，我就开始在WebAPI端收到一条奇怪的错误消息，如下所示：

Unhandled exception. System.InvalidOperationException: Unable to find the required
 services. Please add all the required services by calling 
'IServiceCollection.AddAntiforgery' in the application startup code.
   at Microsoft.AspNetCore.Builder
.AntiforgeryApplicationBuilderExtensions
.VerifyAntiforgeryServicesAreRegistered(IApplicationBuilder builder)

对.NET Core最小WebAPIs的重大更改

幸运的是，我能够搜索并发现问题是什么以及如何解决它。嘘！

 中断性变更：IFormFile参数需要防伪检查——.NET|Microsoft 学习[^]

FromForm的WebAPI略有变化

app.MapPost("/RegisterUser2", IResult ([FromForm] string uuid) =>   {
    return Results.Ok(new { Message = $"FORM - You sent in uuid: {uuid}" });
})
.DisableAntiforgery()

嘘！它总是一些东西！
FromForm的JS获取调用

有一些设置可以将我们的数据传递到Web表单上。首先，我们必须创建FormData对象并添加我们的名称/值对。之后，我们可以发布数据。

// 1. Create the FormData object
var fd = new FormData();
// 2. Append the name/value pair(s) for values you want to send
fd.append("uuid", "123-test2-2345-uuid-551");
fetch(`http://localhost:5247/RegisterUser2`,{
      method:'POST',
     body:fd,   // add the FormData object to the body data which will be posted
})
.then(response => response.json())
.then(data => console.log(data));

现在，我们已经使用了两个运行良好的不同属性。让我们深入研究一下使用[FromBody]属性，这将带来很大的困难。

在WebAPI参数上使用FromBody

app.MapPost("/RegisterUser3", IResult ([FromBody] string uuid) =>   {
    return Results.Ok(new { Message = $"FORM - You sent in uuid: {uuid}" });
})

FromBody的JavaScript fetch调用有问题

乍一看，这个应该很容易，因为你可能会认为你应该能够在正文上传入一个字符串值。无论如何，我就是这么想的。

不起作用

app.MapPost("/RegisterUser3", IResult ([FromBody] string uuid) =>   {
    return Results.Ok(new { Message = $"FORM - You sent in uuid: {uuid}" });
})

但是，这甚至不会通过您的浏览器，因为它希望您为正文定义一个对象（在两个{ }大括号之间）。

接下来，您可能认为您可以创建一个包含目标参数（uuid）名称的对象并传递它，如下所示：

不起作用2

var data = {"uuid":"yaka-yaka"};
fetch(`http://localhost:5247/RegisterUser3`,{
      method:'POST',
     body:data,   
})
.then(response => response.json())
.then(data => console.log(data));

这是行不通的，也不会通过您的浏览器。同样，它认为身体物体的构造不正确。

不起作用3

fetch(`http://localhost:5247/RegisterUser3`,{
      method:'POST',
     body:{"uuid":"this-is-uuid-123"},   
})
.then(response => response.json())
.then(data => console.log(data));

还是行不通。你会得到一个415 Unsupported Media type。因此，您需要添加Content-Type对象并将其设置为JSON，以便Fetch调用知道您打算使用JSON进行调用。这是因为您在正文中添加了大括号。

不起作用4：但确实击中了WebAPI

这个实际上确实击中了WebAPI。

fetch(`http://localhost:5247/RegisterUser3`,{
      method:'POST',
     body:{"uuid":"this-is-uuid-123"},   
    headers: {
           'Content-type':'application/json; charset=UTF-8',
       },
})
.then(response => response.json())
.then(data => console.log(data));

但是，现在您从服务器收到错误，其中指出：

自动绑定错误：WebAPI无法绑定到变量

Microsoft.AspNetCore.Http.BadHttpRequestException: Failed to read parameter 
"string uuid" from the request body as JSON.

这是一个自动绑定错误，因为WebAPI没有看到uuid值，即使我们确实将其与body对象一起传递。

在这一点上，我大吃一惊。

问题是什么：你如何解决它？

好吧，你不能在JavaScript方面解决它。后来发现，你不能将字符串值作为参数直接传递给WebAPI。相反，您必须创建一个与client-side object 匹配的server-side object。

创建服务器端对象

下面是我们要添加到Program.cs中的新类（仅用于示例目的）：

record UuidHolder{
    public string uuid{get;set;}
}

为工作示例定义 RegisterUser4

我们将使用以下WebAPI作为我们的工作示例：

app.MapPost("/RegisterUser4", IResult ([FromBody] UuidHolder uuid) =>   {
    return Results.Ok(new { Message = $"BODY - You sent in uuid: {uuid.uuid}" });
})

这将保留RegisterUser3 WebAPI方法，因此您可以看到无法对其进行绑定。

现在，我们必须稍微改变我们的JavaScript Fetch调用以使用JSON.stringify()，然后一切都会正常工作。

JS获取FromBody & 使用JSON.Stringify

fetch(`http://localhost:5247/RegisterUser4`,{
      method:'POST',
     body:JSON.stringify({"uuid":"this-is-uuid-123"}),   
    headers: {
           'Content-type':'application/json; charset=UTF-8',
       },
})
.then(response => response.json())
.then(data => console.log(data));

它是有效的！

我以为将数据发送到身体上是最简单的方法，但这是最困难的。让我们介绍最后一个（FromHeader）并总结一下。

在WebAPI参数上使用FromHeader

这是最后一个，它允许我们将数据放在标题中并发布它。

app.MapPost("/RegisterUser5", IResult ([FromHeader] string uuid) =>   {
    return Results.Ok(new { Message = $"HEADER - You sent in uuid: {uuid}" });
})

JavaScript获取[FromHeader]

这个很容易做到，但我不完全确定为什么我们要使用标题发布数据。

但是，它确实可以帮助我们将数据自动绑定到我们可能具有的某些标头值。

fetch(`http://localhost:5247/RegisterUser5`,{
      method:'POST', 
    headers: {
           'Content-type':'application/json; charset=UTF-8',
            "uuid":"123-456-789"
       },
})
.then(response => response.json())
.then(data => console.log(data));

现在，可以使用任何基本属性在.NET Core WebAPI方法中自动绑定，数据将通过。当它没有时，你就会明白去哪里看。

额外材料OpenApi文档

哇！我刚刚发现（在发表我的文章后）我实际上通过OpenApi获得了一些关于我的API的免费文档。

dotnet项目模板在Program.cs文件中添加了几行，用于处理生成文档。

app.UseSwagger();
app.UseSwaggerUI();

然后，在每个post方法上，我添加了以下调用：

.WithOpenApi();

如何查看OpenApi文档？

我在网上搜索了所有内容，并扫描了这个解释OpenApi文档的冗长文档，但它从未向我展示如何查看文档。这太疯狂了！我终于找到了如何在此处查看自动生成的文档。

要检查文档，请启动webapi并转到：http://localhost:5247/swagger

您将看到以下内容：

您也可以通过curl试用api

文档处于活动状态，您现在可以通过UI试用API。它在后台使用curl发布到webapi您将看到curl可以正确地发布到body方法。但是，它在FromForm上失败。真的很有意思。

https://www.codeproject.com/Articles/5383531/NET-Core-WebAPI-Auto-Binding-Parameters-When-Calli

寒冰屋
关注
专栏目录
​​​​​​​​​​​​​​.NET Core Web API架构+应用场景+实例
赵玉的专栏
02-26 5668
.NET Core Web API 非常适合设计 RESTful 风格的 API，这些 API 遵循 HTTP 协议，使用 URI 来标识资源，并通过不同的 HTTP 方法（GET、POST、PUT、DELETE 等）来操作资源。：.NET Core Web API 提供了强大的验证和授权机制，以确保 API 请求的数据有效性和安全性。：对于需要暴露数据给多个客户端（如 Web、移动、桌面应用等）的应用程序，.NET Core Web API 可以作为数据的统一入口，提供数据访问和操作的功能。
.NETCORE WebApi搭建
极客神殿
05-02 1117
最近一直有小項目用到 WebApi現在整理一下思路,写一份說明出來，让后来人不走弯路… 1. 第一步 新建項目 打开VS2019,选择新建项目,选择ASP.NET Core Web 应用程式 设置好专案名称 创建API 应用程式 2.第二步 Nuget 所需包准备 IdentityServer4 IdentityServer4.AccessTokenValidation WebApiClient.JIT 关于这三个包这里不做过多叙述，这里先负责搭建运行，如有必要后期单独说明 3.第三步 i
六、.Net Core Web Api连接MongoDB添加ASP.NET Core Identity身份验证授权 - 自动创建管理员用户和基础用户
Kevinxxxxx的博客
08-08 947
运行Web Api应用，可以看到MongoDB上你的数据库已自动新增了users和roles的collections，并且可以看到管理员和基础用户已经添加到users表。更新你的appsettings.Development.json，添加Users和Roles这两个Collection名称的值;添加模型类TeachingUsers.cs和TeachingRoles.cs，控制Identity用户和角色;在Program.cs添加红色背景的代码，配置MongoDB Identity；
.Net Core WebApi（一）简单创建及使用
songjuntao8的专栏
02-06 3700
　按照目前的软件开发发展趋势中，不管是前后端分离还是提供数据服务，WebApi使用的越来越广泛，而且.NET Core也是我们.NET开发人员未来发展的趋势，所以说学会使用.NET Core Api是非常有必要的。 　　本人作为一个.NET菜鸟，正在慢慢的学习中，将学到的一步一步记录下来。 一、创建项目 　　打开VS2019，新建一个ASP.NET Core Web 应用程序。 　　输入项目名、选择路径创建。 　　选择.NET Core 我这里用的是.NET Core 2.2版本，选中AP
NET Core 6.0 webapi 简单使用+连接数据库
qq_44695769的博客
06-20 4964
如何快速上手webApi。
.Net Core之WebApi的简单使用和配置
11-12
.Net Core之WebApi的简单使用和配置实例Demo，具体说明参见文章：https://blog.csdn.net/qubernet/article/details/109636560
PrintService .net core 3.1集成fast report web打印demo
10-25
本文将深入探讨如何在.NET Core 3.1项目中集成Fast Report进行Web打印，并通过PrintService实现前端调用HTTP请求获取PDF资源的示例。 首先，我们需要了解Fast Report的基本概念。Fast Report提供了一个直观的设计器...
ApiControllers_cars：使用.NET Core的API项目。 根据品牌，型号和年份获取汽车召回信息
02-16
API项目是.NET Core中的一个特定类型，它允许开发RESTful服务，这些服务可以被Web客户端（如浏览器或移动应用）轻松调用。 **2. 创建API控制器** 在.NET Core项目中，API控制器通常位于`Controllers`目录下，以`Api...
webAPI信息配置和如何使用/调用
03-14
4. **模型绑定**：WebAPI可以自动将HTTP请求的数据绑定到方法参数上。你可以使用`[FromBody]`、`[FromUri]`等特性来指定数据来源。 5. **过滤器**：过滤器可以用于处理全局或特定操作的行为，如异常处理、身份验证...
WebApi
03-09
WebApi是Microsoft为.NET Framework和.NET Core开发的一个用于构建RESTful服务的框架，它使得创建高效、可测试的HTTP服务变得简单。WebApi主要用于构建面向客户端应用程序，如浏览器和移动设备的应用，通过HTTP协议...
以DonetCore+vue+Element搭建的简单框架
09-30
5. 前后端通信：通过axios或fetch等库，Vue.js可以调用后端API获取数据，实现CRUD操作。 6. 组建界面：使用Element-UI组件构建页面，结合Vue的数据绑定和指令，实现动态交互。 7. 部署与测试：完成开发后，部署到...
.net core 001:webapi
01-13
.net core制作一个api。文章：https://blog.csdn.net/yysyangyangyangshan/article/details/86443932
.NetCoreWebApi:一个基于.NETCore的后端接口项目。目前的设想是做个人博客网站使用。前端打算用Vue全家桶（目前还未开始）
05-25
.NetCoreWebApi 一个基于.NETCore的后端接口项目。目前的设想是做个人博客网站使用。前端打算用Vue全家桶（目前还未开始）。 此外还有一个单层项目： 计划引入的功能： Swagger： ​ SwaggerUI √ ​ 身份认证与授权 √ ​ Api多版本控制 √ ORM： ​ Dapper √ ​ EFCore √ 关系型数据库: ​ Mysql √ ​ SqlServer √ Nosql数据库: ​ Redis √ ​ MonogoDB √ 依赖注入: ​ AutoFac √ ​ .NetCore自带容器 √ 作业调度： ​ Quartz.NET 日志记录: ​ Nlog √ 对象自动映射： ​ AutoMapper √
某项目的后台WebApi项目 for .net core 3.1 C#
11-20
某架构师review代码后，评价为简洁干练、功能丰富。 包含swagger文档、公共的自定义api入参、出参、用户菜单授权协议、错误处理等，可谓开箱修改即用，是你学习或者开发的最佳辅助代码。
.Net Core3.1 WebApi 项目框架
05-03
基于博客园大神文章创作的框架，自用，使用的是sqlsugar,后期改成freesql(https://www.cnblogs.com/huguodong/p/13414560.html).使用到的技术有Swagger，JWT权限验证 ，仓储模式，Sqlsugar+异步泛型仓储，AutoFac，AutoMapper，Serilog
.netCore WebAPI入门到实战(一)
Renner
05-19 8204
前言 本次开发环境为vs2022 + sql2019，该篇文章旨在记录学习.netCore过程中踩到的一些坑，项目会基于.netCore WebAPI一步一步实现数据库的增删查改操作，并记录服务器部署过程中踩到的一些坑，如最常见的跨域问题和不同网络下访问的问题； 一、WebAPI实现 1、新建项目，选择ASP.NET Core Web API,点击下一步 2、框架选择.NET6.0(一定要用这个版本，网上有很多教程都是基于3.0或5.0的教程，如果选错了，后面配置的复杂度会比较高，建议...
ASP.NET Core Web API
djwuhjwiwhe的博客
01-10 866
WebApi是什么？第一个Asp.NetCoreWebApi程序
.net Core WebApi记录
故里2130
08-05 2392
net Core WebApi的启动顺序是先Program.cs->Startup.cs->Controllers文件夹中的内容。
基于.NET Core 框架搭建WebApi项目
热门推荐
u011656688的专栏
12-01 3万+
.NET发行至今已经过了十四个年头。随着版本的不断迭代更新，.NET在Windows平台上的表现也是越来越好，可以说Windows平台上所有的应用类型.NET几乎都能完成。 “开源”和“跨平台”这两个词语也是所有.NET开发者心中的痛楚。最终，.NET Core出现了，它让开发者们在官方和社区的支持走出了Windows，可以在macOS，Linux主流distributions上编写调试并部署.NET程序。
如何通过公网把文件上传到ASP.NET Core Web API服务器
最新发布
09-11
将文件上传到ASP.NET Core Web API服务器通常涉及前端HTML表单、浏览器的File API以及后端API的接收处理。这里是一个简单的步骤说明： 1. **前端部分**: - 使用HTML创建一个表单，包含`<input type="file">`元素，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值