ASP.NET Core 3.1系列（6）——GET和POST模式下Controller接收前端参数的几种方法

已于 2022-05-16 09:24:58 修改
阅读量6.5k 收藏 18
点赞数 6
分类专栏： ASP.NET Core C# 文章标签： ASP.NET Core
于 2022-04-18 15:11:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/herrydong/article/details/124244599
版权
C# 同时被 2 个专栏收录
72 篇文章 15 订阅
订阅专栏
ASP.NET Core
32 篇文章 39 订阅
订阅专栏

1、前言

前一篇博客介绍了ASP.NET Core中的跨域设置，我们已经实现了前端界面对后台API的访问操作。不过很遗憾：到目前为止，测试代码中的Controller只包含一个不带任何参数的Get()方法，而在实际开发过程中，不管是GET还是POST请求，往往都包含着一系列参数。下面就来介绍一下如何在Controller中获取这些前端参数。

2、GET请求模式

2.1、搭建前端界面

GET请求一般是将参数放在URL后面以?分隔，参数与参数之间使用&分隔，其一般格式如下所示：

http://127.0.0.1:5500/index.html?userName=admin&password=123456

下面就来构建一个简易的前端界面，其代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GET请求</title>
    <script src="jquery/jquery-3.5.1.min.js"></script>
</head>
<body>
    <button id="btn">GET模式</button>
    <script>
        $('#btn').click(function () {
            $.ajax({
                type: 'get',
                url: 'https://localhost:5001/api/Home/Get',
                data: {
                    name: '张三',
                    gender: '男',
                    age: 25
                },
                cache: false,
                success: function (res) {
                    window.alert(res);
                },
                error: function (err) {
                    window.alert(err.status);
                }
            });
        });
    </script>
</body>
</html>

2.2、后台接收参数

2.2.1、基础类型接收参数

最简单的方法就是使用C#中的基础类型参数（string、double、int）进行接收，其代码如下所示：

using Microsoft.AspNetCore.Mvc;

namespace App.Controllers
{
    [Route("api/[controller]/[action]")]
    [ApiController]
    public class HomeController : ControllerBase
    {
        [HttpGet]
        public string Get(string name, string gender, int age)
        {
            return $"姓名:{name}\n性别:{gender}\n年龄:{age}";
        }
    }
}

程序运行结果如下图所示：
在这里插入图片描述

2.2.2、实体类型接收参数

ASP.NET Core也允许通过实体类的方式接收参数，我们可以先定义一个Person类，代码如下：

namespace App
{
    public class Person
    {
        /// <summary>
        /// 姓名
        /// </summary>
        public string Name { get; set; }

        /// <summary>
        /// 性别
        /// </summary>
        public string Gender { get; set; }

        /// <summary>
        /// 年龄
        /// </summary>
        public int Age { get; set; }
    }
}

然后在Controller的方法中通过[FromQuery]标记进行接收，代码如下：

using Microsoft.AspNetCore.Mvc;

namespace App.Controllers
{
    [Route("api/[controller]/[action]")]
    [ApiController]
    public class HomeController : ControllerBase
    {
        [HttpGet]
        public string Get([FromQuery] Person person)
        {
            return $"姓名:{person.Name}\n性别:{person.Gender}\n年龄:{person.Age}";
        }
    }
}

程序运行结果如下图所示：
在这里插入图片描述

2.2.3、解析JSON字符串接收参数

我们也可以通过解析JSON字符串的方式接收参数。由于JavaScript提供了一个JSON.stringify方法进行序列化操作，因此我们可以向后台传递一个JSON字符串，对前端代码做出如下修改：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GET请求</title>
    <script src="jquery/jquery-3.5.1.min.js"></script>
</head>
<body>
    <button id="btn">GET模式</button>
    <script>
        $('#btn').click(function () {
            $.ajax({
                type: 'get',
                url: 'https://localhost:5001/api/Home/Get',
                data: {
                    json: JSON.stringify({
                        name: '张三',
                        gender: '男',
                        age: 25
                    })
                },
                cache: false,
                success: function (res) {
                    window.alert(res);
                },
                error: function (err) {
                    window.alert(err.status);
                }
            });
        });
    </script>
</body>
</html>

在后台获取该字符串，然后反序列化成Person，注意引入Newtonsoft.Json，代码如下：

using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;

namespace App.Controllers
{
    [Route("api/[controller]/[action]")]
    [ApiController]
    public class HomeController : ControllerBase
    {
        [HttpGet]
        public string Get(string json)
        {
            if (string.IsNullOrEmpty(json))
            {
                return "";
            }
            else
            {
                Person person = JsonConvert.DeserializeObject<Person>(json);
                return $"姓名:{person.Name}\n性别:{person.Gender}\n年龄:{person.Age}";
            }
        }
    }
}

程序运行结果如下图所示：
在这里插入图片描述

3、POST请求模式

3.1、基础类型接收参数

下面代码就是一个最常见的POST模式请求代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>POST请求</title>
    <script src="jquery/jquery-3.5.1.min.js"></script>
</head>
<body>
    <button id="btn">POST模式</button>
    <script>
        $('#btn').click(function () {
            $.ajax({
                type: 'post',
                url: 'https://localhost:5001/api/Home/Post',
                data: {
                    name: '张三',
                    gender: '男',
                    age: 25
                },
                success: function (res) {
                    window.alert(res);
                },
                error: function (err) {
                    window.alert(err.status);
                }
            });
        });
    </script>
</body>
</html>

我们可以先试着在Controller中使用基础类型来接受参数，代码如下：

using Microsoft.AspNetCore.Mvc;

namespace App.Controllers
{
    [Route("api/[controller]/[action]")]
    [ApiController]
    public class HomeController : ControllerBase
    {
        [HttpPost]
        public string Post(string name, string gender, int age)
        {
            return $"姓名:{name}\n性别:{gender}\n年龄:{age}";
        }
    }
}

运行程序，发现无法接受到前端参数，如下图所示：
在这里插入图片描述
这里需要注意：如果在POST模式下想使用基础类型来接收参数，那么必须给参数加上[FromForm]标签，代码如下：

using Microsoft.AspNetCore.Mvc;

namespace App.Controllers
{
    [Route("api/[controller]/[action]")]
    [ApiController]
    public class HomeController : ControllerBase
    {
        [HttpPost]
        public string Post([FromForm] string name, [FromForm] string gender, [FromForm] int age)
        {
            return $"姓名:{name}\n性别:{gender}\n年龄:{age}";
        }
    }
}

程序运行结果如下图所示：
在这里插入图片描述

3.2、IFormCollection类型接收参数

在原先的ASP.NET MVC中，POST模式下Controller可以使用FormCollection接收参数，而在ASP.NET Core中，也可以使用IFormCollection接收参数，前端代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>POST请求</title>
    <script src="jquery/jquery-3.5.1.min.js"></script>
</head>
<body>
    <button id="btn">POST模式</button>
    <script>
        $('#btn').click(function () {
            $.ajax({
                type: 'post',
                url: 'https://localhost:5001/api/Home/Post',
                data: {
                    name: '张三',
                    gender: '男',
                    age: 25
                },
                success: function (res) {
                    window.alert(res);
                },
                error: function (err) {
                    window.alert(err.status);
                }
            });
        });
    </script>
</body>
</html>

这种方式简洁明了，个人比较推荐这种方法，代码如下：

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

namespace App.Controllers
{
    [Route("api/[controller]/[action]")]
    [ApiController]
    public class HomeController : ControllerBase
    {
        [HttpPost]
        public string Post([FromForm] IFormCollection collection)
        {
            string name = collection["name"];
            string gender = collection["gender"];
            string age = collection["age"];
            return $"姓名:{name}\n性别:{gender}\n年龄:{age}";
        }
    }
}

程序运行结果如下图所示：
在这里插入图片描述

3.3、实体类型接收参数

如果希望通过实体类型接收参数，则前端代码需要设置contentType为application/json，同时传递的参数需要使用JSON.stringify方法进行序列化，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>POST请求</title>
    <script src="jquery/jquery-3.5.1.min.js"></script>
</head>
<body>
    <button id="btn">POST模式</button>
    <script>
        $('#btn').click(function () {
            $.ajax({
                type: 'post',
                url: 'https://localhost:5001/api/Home/Post',
                contentType: 'application/json',
                data: JSON.stringify({
                    name: '张三',
                    gender: '男',
                    age: 25
                }),
                success: function (res) {
                    window.alert(res);
                },
                error: function (err) {
                    window.alert(err.status);
                }
            });
        });
    </script>
</body>
</html>

在Controller的方法中需要通过[FromBody]标记实体类，代码如下：

using Microsoft.AspNetCore.Mvc;

namespace App.Controllers
{
    [Route("api/[controller]/[action]")]
    [ApiController]
    public class HomeController : ControllerBase
    {
        [HttpPost]
        public string Post([FromBody] Person person)
        {
            return $"姓名:{person.Name}\n性别:{person.Gender}\n年龄:{person.Age}";
        }
    }
}

程序运行结果如下图所示：
在这里插入图片描述

3.4、JObject类型接收参数

前端代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>POST请求</title>
    <script src="jquery/jquery-3.5.1.min.js"></script>
</head>
<body>
    <button id="btn">POST模式</button>
    <script>
        $('#btn').click(function () {
            $.ajax({
                type: 'post',
                url: 'https://localhost:5001/api/Home/Post',
                contentType: 'application/json',
                data: JSON.stringify({
                    name: '张三',
                    gender: '男',
                    age: 25
                }),
                success: function (res) {
                    window.alert(res);
                },
                error: function (err) {
                    window.alert(err.status);
                }
            });
        });
    </script>
</body>
</html>

个人也比较推荐使用JObject接收参数，因为这种方法较为直观。使用NuGet引入如下组件，版本选择3.1.23：

Microsoft.AspNetCore.Mvc.NewtonsoftJson

在这里插入图片描述
打开Startup.cs文件，添加Newtonsoft.Json的支持，代码如下：

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

namespace App
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            // 添加Newtonsoft.Json支持
            services.AddControllers().AddNewtonsoftJson();

            // 添加跨域
            services.AddCors(options =>
            {
                options.AddPolicy("CorsPolicy", builder =>
                {
                    builder.AllowAnyOrigin()
                           .AllowAnyMethod()
                           .AllowAnyHeader();
                });
            });
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseHttpsRedirection();
            app.UseRouting();
            app.UseAuthorization();
            app.UseCors("CorsPolicy");
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
            });
        }
    }
}

之后我们就可以利用JObject接收参数了，代码如下：

using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json.Linq;

namespace App.Controllers
{
    [Route("api/[controller]/[action]")]
    [ApiController]
    public class HomeController : ControllerBase
    {
        [HttpPost]
        public string Post(JObject obj)
        {
            string name = obj["name"].ToString();
            string gender = obj["gender"].ToString();
            int age = int.Parse(obj["age"].ToString());
            return $"姓名:{name}\n性别:{gender}\n年龄:{age}";
        }
    }
}

程序运行结果如下图所示：
在这里插入图片描述

3.5、解析JSON字符串接收参数

我们也可以通过解析JSON字符串的方式接收参数。不过需要对前端代码做出如下修改：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>POST请求</title>
    <script src="jquery/jquery-3.5.1.min.js"></script>
</head>
<body>
    <button id="btn">POST模式</button>
    <script>
        $('#btn').click(function () {
            $.ajax({
                type: 'post',
                url: 'https://localhost:5001/api/Home/Post',
                contentType: 'application/json',
                data: '\'' + JSON.stringify({
                    name: '张三',
                    gender: '男',
                    age: 25
                }) + '\'',
                success: function (res) {
                    window.alert(res);
                },
                error: function (err) {
                    window.alert(err.status);
                }
            });
        });
    </script>
</body>
</html>

可以发现上面代码在data属性这里多加了两个单引号。接下来只需要在Controller中解析JSON即可，代码如下：

using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;

namespace App.Controllers
{
    [Route("api/[controller]/[action]")]
    [ApiController]
    public class HomeController : ControllerBase
    {
        [HttpPost]
        public string Post([FromBody] string json)
        {
            Person person = JsonConvert.DeserializeObject<Person>(json);
            return $"姓名:{person.Name}\n性别:{person.Gender}\n年龄:{person.Age}";
        }
    }
}

程序运行结果如下图所示：
在这里插入图片描述

4、结语

本文主要介绍了ASP.NET Core中Controller在GET和POST请求模式下接收参数的一系列方法。在实际开发过程中，我们需要根据情景选择合适的方法接收参数。

HerryDong
关注
  • 6
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
ASP.NET Core 3.1 官方教程
09-23
ASP.NET Core 是一个跨平台的高性能开源框架，用于生成启用云且连接 Internet 的新式应用。 使用 ASP.NET Core，您可以：1，生成 Web 应用和服务、物联网 (IoT) 应用和移动后端。2，在 Windows、macOS 和 Linux 上使用喜爱的开发工具。3，部署到云或本地。4，在 .NET Core 上运行。
详解ASP.NET Core API 的Get和Post请求使用方式
weixin_30338481的博客
01-24 1608
上一篇文章帮助大家解决问题不彻底导致博友使用的时候还是遇到一些问题，欢迎一起讨论。所以下面重点详细讲解我们常用的Get和Post请求( 以.net core2.2的Http[Verb]为方向 ,推荐该属性路由)，如果想验证，直接利用VS2017创建ASP.NET Core API (.net core 2.2)，在DefaultController里面操作。文中有些关键字，我是加了粗的，请注意一...
ASP.NET学习基础十八：post方法和get方法
最新发布
yixiaobing的博客
02-28 379
1post在HTM中写然后在asp.net中写stringNickName("POST方法传来的nickname的值为:"+NickName2get在HTM中写然后在asp.net中写stringNickName("接收到GET方法传来的昵称为:"+NickName。
ASP.NET Core 3.1中文教程.pdf
08-12
ASP.NET Core3.1中文教程 完整版PDF,本文档是 .net core3.1 中文使用手册。使用最新vs2019编辑器,开发跨平台web应用。
controller 接收Post传递数据
热门推荐
weixin_42784951的博客
06-09 1万+
1 传递字符串、基本类型 1、直接在方法形参中接收参数 如下所示，在Controller中直接传递参数： @PostMapping("/saveBlackRooms") public Response saveBlackList(String name) { if (validateBlackList(name)) { People people = new People(); People.setBlackRoomList(n
.net core Post和Get请求方法
weixin_43474597的博客
12-07 1640
.net core Post和Get请求方法方法 方法 public string Post(string url, string postData = null, string contentType = null, Dictionary<string, string> headers = null, int timeOut = 30) { postData = postData ?? ""; using (HttpClient
Controller接收参数的方式
weixin_43180484的博客
11-19 5202
Controller接收参数的方式 GET请求 采用query方式 代码形式： @GetMapping("/demo/{id}") public Enterprise selectOne(@RequestParams Integer id) { return this.enterpriseService.queryById(id); } POST请求 通常query参数是GET请求时常用的携带参数方式。但是POST请求也要携带query类型的参数,可以把它拼接到url里,spri
Controller 层对POST与GET请求的入参统一处理
Mr.J
11-29 2425
注：文章皆为个人纪录，可用性请以最终结果为准，若有错还请大佬们指出，谢谢！ 在实际Java开发过程中，经常需要在Controller层中，针对不同的请求方式与不同类型的请求参数做不同的处理，此文章旨在解决上述问题，做到参数统一 步骤一：创建Controller的公共父类 @Slf4j public abstract class AbstractController { private static final String PAGE_INDEX_PARAM_NAME = "pag.
SpringMVC中Controller接收请求参数的常见方式
nuist_NJUPT的博客
09-28 3694
SpringMVC中Controller接收请求参数的常见方式 Controller接收请求参数的方式有很多种，有的适合get请求方式，有的适合post请求方式，有的两者都适合，开发者可以根据自己的需求选择适合的接收方式。 1-通过实体Bean接收请求参数 @Controller @RequestMapping("/user") public class UserController { @RequestMapping("/login") public String login(UserFo
SpringBoot controller获取Post请求的各种方式
jumpe_17的博客
05-22 8663
0.测试工具postman 下载地址：https://www.postman.com/downloads/ 1.接收 Form 表单数据 form-data 1.1 基本的接收方法 1.1.1 无注解 @PostMapping("/hello") public String hello(String name, Integer age) { String str = "" + name + " : " + age; System.out.println(str); return st
SpringBoot - 获取POST请求参数详解
思月行云
03-06 1万+
SpringBoot - 获取POST请求参数详解（附样例：表单数据、json、数组、对象）SpringBoot - 获取POST请求参数详解（附样例：表单数据、json、数组、对象）在前文中我介绍了 Controller 如何接收通过 GET 方式传递过来的参数，下面接着演示如何接收通过 POST 方式传递过来的参数。
asp.net Core3.1微信小程序代付代码
07-13
.net core 3.1 api 后台接口,小程序发起微信支付功能
ASP.NET Core 3.1 中文文档.pdf
04-16
从官方下载的，.net core 5.0 都已经出了。
asp.net core 3.1中文教程.pdf
06-05
ASP.NET Core ASP.NET 4.x 框架选择 ASP.NET CORE ASP.NET 4.X 针对 Windows、macOS 或 Linux 进行生成 针对 Windows 进行生成 Razor Pages 是在 ASP.NET Core 2.x 及更高版本中创建 Web UI 时建议使用的方法。 另请...
C#递归获取文件夹下的全部文件
HerryDong的博客
11-26 1万+
很多时候我们需要获取一个结构未知的文件夹下所有的文件或是指定类型的所有文件，C#中可以通过递归实现，现在我们就获取一下jquery easyui文件夹中包含的所有js文件： using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Text; using Sys......
C#判断文件是否被占用
HerryDong的博客
04-12 1万+
1、前言 在C#中判断文件是否被占用一般有两种方法，一是利用FileStream结合try...catch...finally实现，二是调用Windows API实现，下面给出两种方法的代码。 2、文件流法 using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Text; using System.Threading.Tasks; namespace ConsoleA
C#异步委托
HerryDong的博客
09-23 9946
大多数时候，我们写的代码都是同步代码，也就是从上到下按照顺序执行。但有时候遇到耗时较多的任务时，同步方法的弊端往往就会显现出来。例如下载一个较大的文件，如果采用同步代码，那么直到这个文件下载完成之前，我们都无法进行任何操作，这就带来了较差的用户体验。这种情况下就得异步方法出马了。在C#中，Delegate类包含Invoke和BeginInvoke两个方法，其中Invoke是同步的，而BeginIn...
ASP.NET Core 3.1系列（4）——读写配置文件appsettings.json
HerryDong的博客
04-17 7816
1、前言 在大多数的应用程序中，一些参数需要写在配置文件里，以此增加系统的灵活性。在ASP.NET时代，配置参数一般会写在web.config文件中，其本质上是对XML文件的读取和写入。而在ASP.NET Core中，配置文件变成了appsettings.json文件。相较于XML，JSON文件更加轻量且灵活，下面就来介绍一下如何在ASP.NET Core中对其进行读写操作。 2、添加配置参数 打开appsettings.json文件，添加如下配置项。如果对JSON文件的格式不熟悉，建议先了解一下其格式规范
DevExpress中TreeList控件的使用方法
HerryDong的博客
12-23 7413
DevExpress中树形结构的显示需要用到TreeList控件，但是区别于其他的第三方控件，TreeList的数据源绑定方式有些特别，它主要利用子节点编号（Id）和父节点编号（ParentId）确定各个树节点的从属关系，示例代码如下： using System; using System.Collections.Generic; using System.ComponentModel; usin...
asp.net core 3.1中文教程
06-25
在学习ASP.NET Core 3.1教程之前，我们需要了解一些基本的编程概念和技能， 包括C#语言的基础知识、MVC（Model View Controller）等常见的编程模式、以及前端技术如HTML、CSS和JavaScript等。此外，我们还需要对.NET...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值