如何在http POST方法中使用angularjs传递两个不同类型的参数到Web API

Question

第一个参数是一个复杂类型对象(JSON)，第二个参数是一个简单类型(String)。这里我使用的是Web API 2。

我把我的代码下面。

Web API

 public class UserDetailsModel
 {
    [Key]
    [EmailAddress]
    public string LoginEmail { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Password { get; set; }
    public string DisplayPic { get; set; }
    [EmailAddress]
    public string AlternateEmail { get; set; }
    public string Organization { get; set; }
    public string Occupation { get; set; }
    public string Contact { get; set; }
    public DateTime DoB { get; set; }
    public string Gender { get; set; }
    public string Country { get; set; }
    public string State { get; set; }
    public string City { get; set; }
    public string Website { get; set; }
    public string Info { get; set; }
    public DateTime DateOfRegister { get; set; }
    //public string LoginIP { get; set; }
    public int LoginFlag { get; set; }
}
public int RegisterUser(UserDetailsModel userReg, string LoginIP)
 {
     .
     .
     .
 }

angularjs

var UserDetails = {
                'LoginEmail': $scope.LoginEmail,
                'LoginName': $scope.LoginName,
                'Password': $scope.Password,
                'DoB': $scope.DoB,
                'Gender': $scope.Gender,
                'City': $scope.City,
                'State': $scope.State,
                'Country': $scope.Country
};
var request = $http({
        method: 'post',
        url: urlBase + '/UserDetails',
        params: { 'userRegJSON': UserDetails, 'LoginIP': LoginIP }
    });

在上面的代码中，我在Web API中的LoginIP中获得UserDetails和192.152.101.102中的NULL。

var request = $http({
        method: 'post',
        url: urlBase + '/UserDetails',
        data: { 'userRegJSON': UserDetails, 'LoginIP': LoginIP }
    });

在上面的代码中，我在Web API中的UserDetails和LoginIP参数中都得到NULL。

如何在http POST方法中使用angularjs传递两个或多个不同的参数类型

Answer 1

你不能在webAPI中传递两个类型。要么将所有内容以单一类型传递，要么执行以下

操作

var request = $http({
    method: 'post',
    url: urlBase + '/UserDetails?LoginIp=' + LoginIP,
    data: UserDetails,
});

在API中将签名更改为

public int RegisterUser([FromBody]UserDetailsModel userReg, [FromUri]string LoginIP)
{
 .
 .
 .
}

Answer 2

看一下:在我的api方法签名中使用简单和复杂类型将多个对象从Angular控制器POST到Web API 2

Answer 3

当你希望在POST中传递2个参数时，Webapi不能很好地工作方法。Webapi中的ModelBinding总是针对单个对象工作，因为它映射了一个模型。您可以使用一些变通方法来完成此工作:

同时使用POST 和 QueryString参数如果同时具有复杂参数和简单参数，则可以在查询字符串上传递简单参数。你的代码应该实际工作与:像这样

/baseUri/UserDetails?LoginIP=LoginIP

但这并不总是可能的。在本例中，在查询字符串上传递用户令牌可能不是一个好主意。

参考@Ravi A的建议修改你的代码