Introduction
In the previous Article http://www.c-sharpcorner.com/UploadFile/amit12345/mvc-4-web-api-net-4-5/ we saw how to get data from a Web API in various formats.
In this article I am going to explain how we post (put) data to Web API.
Code: Let's see the code and understand what we need to implement here.
Step 1: First all we will see what are POST and PUT methods in the Customer Controller.
In the following code the Post Method will take a CustomerModel.
// POST /api/customer
public void Post(CustomerModel customer)
{
context.AddToCustomers(new Customer { Id = customer.Id, Name = customer.Name, Salary = customer.Salary });
context.SaveChanges(System.Data.Objects.SaveOptions.AcceptAllChangesAfterSave);
}
In the following code the Put Method will take CustomerModel and customerID.
// PUT /api/customer/5
public void Put(int id, CustomerModel customer)
{
var cust = context.Customers.First(c => c.Id == id);
cust.Name = customer.Name;
cust.Salary = customer.Salary;
context.SaveChanges();
}
Now in Step 2 will see how we can post data to a Web API using JSON.
Step 2: See the highlighted code inside the JQuery block. We have created an instance of a CustomerModel Object inside a JavaScript block:
<script type="text/javascript">
$(document).ready(function(){
var CustomerCreate = {
Name: "Jackson",
Salary: 22222
};
createCustomer(CustomerCreate, function (newCustomer) {
alert("New Customer created with an Id of " + newCustomer.Id);
});
$("#AddCustomer").click(function () {
createCustomer(CustomerCreate, null);
});
function createCustomer(CustomerCreate, callback) {
$.ajax({
url: "/api/Customer",
data: JSON.stringify(CustomerCreate),
type: "POST",
contentType: "application/json;charset=utf-8",
statusCode: {
201: function (newCustomer) {
callback(newCustomer);
}
}
});
}});
</script>
In the HTML body we have added one HTML anchor tag and above inside the JavaScript block we have registered a click event for the anchor tag. Now when the user clicks on the anchor link, data will be posted to the server.
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title"><a href="/">ASP.NET Web API</a></p>
</div>
</div>
</header>
<div id="body">
<a id="AddCustomer" href="#">Create New Customer</a>
</div>
</body>
In the following image we can see how the data will be sent via the Post Method:
Happy Coding.