时间戳

首页 > 技术文章 > 在.NET MVC框架中WebAPI接收不到前端Ajax传来的Post请求数据

在.NET MVC框架中WebAPI接收不到前端Ajax传来的Post请求数据

NZT-HJX 2020-07-14 15:39 原文

问题简介：AJAX post data is null in controller mvc or WebApi

问题场景：我在做.net mvc项目时需要用到Ajax往后端的WebApi Service请求数据时，发现通过url往后端进行get请求没有任何问题，但是当我使用Post请求时，无论是将数据集包在对象中还是将数据以单个值一个一个往后台进行Post请求，后台的DataModel总是无法获取到Post请求中Body里面的数据。

下面就是我当时的代码：

后端WebApi接口：

        [Route("SchoolService/AddOne")]
        [HttpPost]
        public Result<string> AddOne(SchoolModel data)
        {
                SchoolModel AddValue = new SchoolModel()
                {
                    Id = data.Id,
                    Name = data.Name,
                    Address = data.Address
                };
            SchoolDTO.GetInstance().AddEntity(data);
            return new Result<string>("success");
        }

前端页面：Index.cshtml

注:这里的组件我用的是Element-UI样式

        <el-form ref="School" :model="School" label-width="80px">
            <el-form-item label="ID" prop="Id">
                <el-input v-model="School.Id" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="学校名">
                <el-input v-model="School.Address" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="School.Name" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @@click="AddOne()">立即添加</el-button>
                <el-button @@click="resetForm()">重置</el-button>
            </el-form-item>
        </el-form>

前端Ajax请求：

注：前端页面是MVC控制器的视图页面，但是引入了Vue.js。下面代码中有部分Vue代码。

var app = new Vue({
        el: '#main-content',
        data: {
            School: { },
        },
        methods: {
            //添加一条学校信息
            AddOne: function () {
                const that = this;
                var data = that.School;
                console.log("that.School", data);
                //$.post("/SchoolService/AddOne", that.School) 这个试了也不行
                $.ajax({
                    url: '/SchoolService/AddOne',
                    async: false,
                    dataType:'JSON'
                    type: "POST",
                    data: data,//这里无论使用哪种形式例如{"data":data},或者直接 
                                    //{"Id":1,"Name":2,"Address":3}都不行
                    error: function (res) {
                    console.log(res);
                    },
                    success: function (res) {
                    console.log(res.data);
                    }
                })
            },

        },
    
}

但是令人感到诡异的一点 就是上面的WebApi接口我使用PostMain来进行测试是没有任何问题的！

PostMain请求案例：

 

 这就证明了我后端接口肯定是没问题的，问题肯定出在前端Ajax请求上面！

后来我查了很多国内网站试了很多方法都没有效果，实在无奈去国外翻英文帖子终于找到一个遇到和我类似问题的哥们，下面也有解决方案，试了下果然可以！

成功Ajax请求案例：

 AddOne: function () {
                const that = this;
                var data = that.School;
                console.log("that.School", data);

                $.ajax({
                    url: '/SchoolService/AddOne',
                    dataType: "json",
                    type: "POST",
                    contentType: 'application/json',
                    data: JSON.stringify(data),//关键点
                    async: true,
                    processData: false,
                    cache: false,
                    success: function (data) {
                        that.$message({
                            type: 'success',
                            message: '添加成功!'
                        });
                        that.GetSchoolData();
                    },
                    error: function (xhr) {
                        that.$message({
                            type: 'info',
                            message: '错误!'
                        });
                    }
                });
            },

那么问题来了：我之前在发送数据时已经将数据整成JSON格式了，为什么还要在data里面再转换一次呢？

我个人感觉是ajax在控制器页面中默认是以string类型传向后台的，这个可能不像小程序那样可以直接传对象。我们必须要转换成json才可以，具体原因也不是很清楚。希望有大佬能解释一下是什么原因以免以后再掉进这个坑里。

本人解决问题的国外帖子地址：

https://stackoverflow.com/questions/20922961/ajax-post-data-is-null-in-controller-mvc

推荐阅读