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:
public class User
{
public int UserID { get; set; }
public string Email { get; set; }
}
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.
<!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( .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();
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.
