如何使用angularjs在http POST方法中将两种不同类型的参数传递给Web API？

Question

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

我将我的代码放在下面。

网络 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 }
    });

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

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

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

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

Answer 1

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

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

/baseUri/UserDetails?LoginIP=LoginIP

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

请参阅 @Ravi A 的 suggestions 以更改您的代码。

Answer 2

通过这个： 在我的 api 方法签名中使用简单和复杂的类型 POST multiple objects from Angular controller to Web API 2

Answer 3

您不能在 webAPI 中传递 2 种类型。您可以在单一类型中传递所有内容，也可以执行以下操作

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

});

在 API 中将签名更改为

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