Asp.net core使用ayui表单Ajax提交请求，后台接收参数为空，模型绑定失败

Asp.net core 使用layui表单提交后台接收方法的参数模型无接收数据，模型绑定失败

第一步：快速定位问题源头

1. 前端验证：在Layui的form.on(‘submit’,
   function(data){…})回调中，添加console.log(data.field)，然后在浏览器控制台查看输出。

   如果输出{}空对象 → 问题在前端（Layui表单序列化失败）

   如果输出包含数据的对象 → 问题在后端（ASP.NET Core模型绑定失败）

2. 网络验证：打开浏览器开发者工具的Network标签，提交表单后查看Request Payload或FormData，确认实际发送到服务器的数据格式。

第二步：前端问题（如果data.field无数据）

解决方案
确保每个表单输入元素都添加了name属性，且与后端模型属性名匹配：

<!--错误写法--><inputtype="text"id="username"required/><!--正确写法--><inputtype="text"name="username"id="username"required/>

关键点：Layui是根据name属性来收集表单数据的，只有id是不够的，所以
输入框的Name属性必须台填写的

第三步：前端有数据但后端模型为空 → ASP.NET Core绑定问题

如果data.field有数据，但后端接收到的模型属性都是null

3.1、字段名称精确匹配（最基础也最容易忽略）

ASP.NET Core默认按照名称匹配原则进行绑定前端name属性的值必须与后端模型属性名完全一致（区分大小写）。

// 后端模型publicclassUserModel{publicstringUserName{get;set;}// 对应前端 name="UserName"publicintAge{get;set;}// 对应前端 name="Age"}

3.2、检查[FromBody] vs [FromForm]非常重要

3.2.1 说明[FromBody] vs [FromForm]使用方式与区别

[FromForm]

ASP.NET Core中，默认的绑定源取决于请求的Content-Type
application/x-www-form-urlencoded（表单默认）→ 使用[FromForm]（也是默认）

[FromBody]

application/json → 需要使用[FromBody]
如果前端使用的是Layui默认表单提交，Content-Type是application/x-www-form-urlencoded，后端不需要加任何特性，默认就能绑定。

但如果前端使用AJAX发送JSON数据，则需要：明确指定从Body绑定，使用 [FromBody]

示例：

[HttpPost]publicIActionResultSave([FromBody]UserModeluser)// 明确指定从Body绑定{// ...}

3.2.2当你发现调试时跳转到对应的方法，但是后台接受的模型 所有属性都为NUll。

那么很大可能就是使用ajax时 dataType和 contentType 配置问题，与后台的 [FromBody]、[FromForm]不对应

解决方式1 、注释ajax中的 dataType和 contentType ，后台方法中不要添加[FromBody]]特性，使用默认的[FromForm]
解决方式2 、 dataType: “json”,那么后台模型一定要添加[FromBody]

[HttpPost("AddUser")]publicIActionResultAddUser(UserViewModeluser){}form.on('submit(submit_AddUser)',function(data){varfield=data.field;// 获取表单字段值varFromData=JSON.stringify(field);// 显示填写结果，仅作演示用//layer.alert(JSON.stringify(field), {// title: '当前填写的字段值'//});// 此处可执行 Ajax 等操作 '/api/UserApi/AddUser' '@Url.Action("AddUser", "Api/User")'// …// contentType: 'application/json', '/Api/UserApi/AddUser'//JSON.stringify(field)$.ajax({url:'/User/AddUser',// dataType: "json",type:"post",// contentType: 'application/x-www-form-urlencoded',//contentType: 'application/json',data:field,success:function(res){console.log(res.code);//控制台输出日志，便于调试if(res.code==200){//alert('添加成功');layer.msg('添加成功');//跳转至后台varindex=parent.layer.getFrameIndex(window.name);//先得到当前iframe层的索引parent.layer.close(index);//再执行关闭layer.closeAll();}},error:function(){alert("添加失败");},});returnfalse;// 阻止默认 form 跳转});

其他-调试技巧

1、查看原始请求数据：在后端action中添加以下代码，查看实际接收到的数据：

[HttpPost]publicIActionResultSave(UserModeluser){varform=Request.Form;// 查看这里有哪些字段// 或者读取原始请求体usingvarreader=newStreamReader(Request.Body);varbody=reader.ReadToEndAsync().Result;// ...}