Question

我使用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对象。用户名和密码字段都变为空。

感谢有人能解释我在我的代码中做错了什么

Answer 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
    };

}

}());

如果传递的数据将具有此控制器方法捕获的其他名称（如果您使用谷歌浏览器f12并检查后期传递的数据），则模型绑定器不会绑定您的视图模型

如果这不起作用，请尝试从字符串反序列化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
    };

}

}());

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

1 个答案: