Данные JSON не сериализуются в asp.net core web API

Question

Я создал простую страницу входа с использованием ASP.Net Core WebApi и AngularJS. Когда данные POST передаются в web api из angularJS с использованием $ http, данные JSON не сериализуются так, как ожидалось, в контроллере Web Api.

Вот мой ViewModel класс в Web API

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

ConfigureServices метод statup.cs

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 вид и код контроллера здесь, так как объект пользователь успешно переходит на службу AngularJS в следующем формате JSON

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

К сожалению, данные Json не сериализации на объект LoginVM в Web Api как ожидалось. Оба поля Username и password становятся пустыми.

Цените, если кто-то может объяснить мне, что я сделал неправильно в моем коде

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; 


} 
} 

И изменение seervice:

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

} 

}()); 

ModelBinder не будет привяжите свою модель представления, если в переданных данных будет указано другое имя, которое оно выбрало в методе контроллера (если вы используете google chrome f12 и проверяете, какие данные передаются в сообщении)

ЕСЛИ это не работает, попробуйте deserialize json from string.

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

} 

}());