JSON 数据不会在 asp.net 核心 Web API 中序列化答案

【问题标题】：JSON data does not serialize in asp.net core web APIJSON 数据不会在 asp.net 核心 Web API 中序列化
【发布时间】：2017-01-30 02:18:58
【问题描述】：

我使用 ASP.Net Core WebApi 和 AngularJS 创建了一个简单的登录页面。当我使用 $http 从 angularJS 将数据发布到 Web api 时，JSON 数据不会像 Web Api 控制器中的预期那样序列化。

这是我在 Web API 中的 ViewModel 类

 public class LoginVM
 {
    [Required]
    public string Username { get; set; }

    [Required]
    public string Password { get; set; }

 }

Web API 控制器方法

 [HttpPost]
 [Route("UserLogin")]
 public LoginVM UserLogin(LoginVM loginVM)
 {
        if (loginVM.Username == "Admin" && loginVM.Password == "123")
        {
            return new LoginVM();
        }
        else
        {
            return null;
        }
 }

statup.cs 中的ConfigureServices 方法

 public void ConfigureServices(IServiceCollection services)
    {
        // Add framework services.
        services.AddMvc()
            .AddJsonOptions(options =>
            {
                options.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
            });


        services.AddCors(options => options.AddPolicy("AllowAll", p => p.AllowAnyOrigin()));


    }

AngularJS 服务

(function () {
'use strict';

app.factory("membershipService", membershipService);

membershipService.$inject = ['$http', '$rootScope', '$log'];

function membershipService($http, $rootScope, $log) {

    var urlHost = "http://localhost:33443";

    function login(user) {
        var url = urlHost + "/user/UserLogin"
        return $http.post(url, user)
        .then(function (result) {
            $log.info(result);
            return result.data;
        }, function (error) {
            $log.info(error);
        }
        );
    };

    return {
        login: login
    };

}

}());

这里我不打算提及 AngularJs 视图和控制器代码，因为用户对象以以下 json 格式成功传递给 AngularJS 服务

{username="admin",password="123"}

不幸的是，Json 数据没有按预期序列化到 Web Api 控制器方法中的 LoginVM 对象。用户名和密码字段都变为空。

如果有人能解释一下我在代码中做错了什么，请不胜感激

【问题讨论】：

你能访问Web API控制器方法吗？您是否能够读取通过 loginVM 传入的数据？
你用 Fiddler 或 Postman 测试过吗？不行就试试。
到达控制器方法。它使用 Username=null 和 Password=null 序列化为 LoginVM 对象
尝试使用“用户名”和“密码”而不是“用户名”和“密码”创建对象。我有一个没有“AddJsonOptions”的项目。

标签： angularjs json asp.net-web-api asp.net-core

【解决方案1】：

尝试添加 [FromBody]

         [HttpPost]
     [Route("UserLogin")]
     public LoginVM UserLogin([FromBody]LoginVM loginVM)
     {
            if (loginVM.Username == "Admin" && loginVM.Password == "123")
            {
                return new LoginVM();
            }
            else
            {
                return null;


 }
 }

以及服务的变化：

(function () {
'use strict';

app.factory("membershipService", membershipService);

membershipService.$inject = ['$http', '$rootScope', '$log'];

function membershipService($http, $rootScope, $log) {

    var urlHost = "http://localhost:33443";

    function login(user) {
        var url = urlHost + "/user/UserLogin"
        return $http.post(url, { loginVM : user})
        .then(function (result) {
            $log.info(result);
            return result.data;
        }, function (error) {
            $log.info(error);
        }
        );
    };

    return {
        login: login
    };

}

}());

如果传递的数据将有一个在控制器方法中捕获的其他名称（如果您使用 google chrome f12 并检查在 post 中传递了哪些数据），Modelbinder 将不会绑定您的视图模型

如果这不起作用，请尝试从字符串反序列化 json。

[HttpPost]


    [Route("UserLogin")]
     public LoginVM UserLogin(string loginVM)
     {
    var model = JsonConvert.DeserializeObject<LoginVM >(loginVM); 
            if (model .Username == "Admin" && model .Password == "123")
            {
                return new LoginVM();
            }
            else
            {
                return null;
            }
     }

(function () {
'use strict';

app.factory("membershipService", membershipService);

membershipService.$inject = ['$http', '$rootScope', '$log'];

function membershipService($http, $rootScope, $log) {

    var urlHost = "http://localhost:33443";

    function login(user) {
        var url = urlHost + "/user/UserLogin"
        return $http.post(url, {loginVM: JSON.stringify(user) } )
        .then(function (result) {
            $log.info(result);
            return result.data;
        }, function (error) {
            $log.info(error);
        }
        );
    };

    return {
        login: login
    };

}

}());

【讨论】：