How to pass two different types parameters in http POST method using angularjs to Web API?

Question

First parameter is a complex type object(JSON) and second parameter is a simple type(String).Here I am using Web API 2.

I am putting my code below.

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

Here in above code, I am getting NULL in UserDetails and 192.152.101.102 in LoginIP in Web API.

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

Here in above code, I am getting NULL in both parameter UserDetails and LoginIP in Web API.

Then how to pass two or more different parameter types in http POST method using angularjs.

score 2 · Accepted Answer · answered Sep 01 '16 at 06:44

2

You cannot pass 2 types in webAPI.Either you pass everything in a single type or you can do the below

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

});

In the API change the signature to

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

answered Sep 01 '16 at 06:44

Ravi A.

2,163
2
18
26

Now it is working. But I have one question. If I remove [FromBody] and [FromUri] from Parameters, It is also working. So what is the best way and Why? – Om Prakash Gupta Sep 01 '16 at 08:49
1

Yes those are for a cleaner code not mandatory in this situation.Say if you have 2 complex types in that case you need to prefix which type is coming from body and which one will be in query string. – Ravi A. Sep 01 '16 at 09:14

score 0 · Answer 2 · edited May 23 '17 at 12:32

0

Webapi doesn't work fairly well when you wish to pass 2 parameters in a POST method. ModelBinding in Webapi always works against a single object because it maps a model. There a few workarounds that you can use to make this work:

Use both POST and QueryString Parameters in Conjunction If you have both complex and simple parameters, you can pass simple parameters on the query string. Your code should actually work with: something like this

/baseUri/UserDetails?LoginIP=LoginIP

but that's not always possible. In this example it might not be a good idea to pass a user token on the query string though.

Refer to @Ravi A's suggestions for making changes in your code.

edited May 23 '17 at 12:32

Community

1
1

answered Sep 01 '16 at 06:46

Pushpendra

1,694
14
27

Actually we can pass complex type using GET as well. See here http://stackoverflow.com/questions/15814160/how-to-pass-complex-object-to-asp-net-webapi-get-from-jquery-ajax-call – Ravi A. Sep 01 '16 at 07:06
My apologies, Yes I agree with you. – Pushpendra Sep 01 '16 at 07:19

score 0 · Answer 3 · edited May 23 '17 at 12:32

0

Go throught this: Use simple and complex types in my api method signatures POST multiple objects from Angular controller to Web API 2

edited May 23 '17 at 12:32

Community

1
1

answered Sep 01 '16 at 06:51

Amit

348
1
6
12

How to pass two different types parameters in http POST method using angularjs to Web API?

3 Answers3