Multiple Model in Web API Controller's Method

Khairul Islam Sujon

Rate me:

4.00/5 (6 votes)

28 Mar 2016CPOL2 min read

21.1K

In this tip, we will see how to use multiple models as ASP.NET web API controller's method parameter.

Introduction

When we have multiple parameters for our API controller's method, normally we use parameter binding and bind our parameters with our model's properties. Sometimes, we need to use multiple model as the controller's method parameter for receiving data in web API. But by default, web API doesn't have the support for using multiple model as method parameter. Last week, I was working with a web API project, and for a particular task in that project, I had to use multiple model as my controller's method parameter. I did the thing using a simple trick and today I'm sharing this and hope it will help someone who's facing the same problem.

In this tip, we will:

First, create two model classes
Second, create an API controller class and an html view
Third, create a viewmodel
And post data from view to controller

Using the Code

Step 1

In this step, we will create two separate models for our application named - User and GCM. And in these models, we will add some property like:

//this is our User model    
    public class User
    {
        public int UserID { get; set; }

        public string Email { get; set; }
    }


//this is our GCM model
    public class GCM
    {
        public int GCMID { get; set; }

        public string GCMNo { get; set; }
    }

Step 2

Secondly, we will create our controller class named DefaultController with a method where we will post our data.

public class DefaultController : ApiController
{
    [Route("api/default/signup")]
    public IHttpActionResult SignUp()
    {
       return Ok("ok");
    }
}

And now, we will create our html view from where we will post data to the above method.

HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <div>
        <input type="button" value="Submit" onclick="submit();" />
    </div>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
    <script>
        function submit() {
            var oUser =
            {
                "UserID": "1", "Email": "sujon.ahmed@celimited.com"
            }
            var oGCM =
            {
                "GCMID": "1", "GCMNo": "2rty4r5t5t6y65hgn7h4n3gh"
            }
            $.post('api/default/signup', { "User": oUser, "GCM": oGCM })
                .done(function (data) {
                    console.log(data);
                })
                .fail(function (jqXHR, textStatus, err) {
                    console.log(err);
                });
        }
    </script>
</body>
</html>

Here, we have a button and its onclick event we binded a function called submit. And on that submit function, we will post our data to the API method using JQuery.

Step 3

Now, we will create a ViewModel and it will hold two properties of User and GCM type.

public class PostUserGCM
{
    public User User { get; set; }
    public GCM GCM { get; set; }
}

Step 4

And finally, we will use the above ViewModel as our controller's method parameter.

public class DefaultController : ApiController
{
    [Route("api/default/signup")]
    public IHttpActionResult SignUp(PostUserGCM oPostUserGCM)
    {
        User oUser = new User();
        GCM oGCM = new GCM();
        //now we will map our model from viewmodel
        oUser = oPostUserGCM.User;
        oGCM = oPostUserGCM.GCM;

        return Ok("ok");
    }
}

After that, we are now able to do our task with our User and GCM model.

Conclusion

In this tip, we have seen how to use multiple models as web API controller's method parameter. We have also seen a sample implementation on how to post data to a web API method using JQuery. I hope this has been informative.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Khairul Islam Sujon

Software Developer (Junior) Computer Ease Limited

Bangladesh

This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.