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.
  1. // POST /api/customer
  2. public void Post(CustomerModel customer)
  3. {
  4. context.AddToCustomers(new Customer { Id = customer.Id, Name = customer.Name, Salary = customer.Salary });
  5. context.SaveChanges(System.Data.Objects.SaveOptions.AcceptAllChangesAfterSave);
  6. }
In the following code, the Put Method will take CustomerModel and customerID.
  1. // PUT /api/customer/5
  2. public void Put(int id, CustomerModel customer)
  3. {
  4. var cust = context.Customers.First(c => c.Id == id);
  5. cust.Name = customer.Name;
  6. cust.Salary = customer.Salary;
  7. context.SaveChanges();
  8. }
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:
  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. var CustomerCreate = {
  4. Name: "Jackson",
  5. Salary: 22222
  6. };
  7. createCustomer(CustomerCreate, function (newCustomer) {
  8. alert("New Customer created with an Id of " + newCustomer.Id);
  9. });
  10. $("#AddCustomer").click(function () {
  11. createCustomer(CustomerCreate, null);
  12. });
  13. function createCustomer(CustomerCreate, callback) {
  14. $.ajax({
  15. url: "/api/Customer",
  16. data: JSON.stringify(CustomerCreate),
  17. type: "POST",
  18. contentType: "application/json;charset=utf-8",
  19. statusCode: {
  20. 201: function (newCustomer) {
  21. callback(newCustomer);
  22. }
  23. }
  24. });
  26. }});
  27. </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.
  1. <body>
  2. <header>
  3. <div class="content-wrapper">
  4. <div class="float-left">
  5. <p class="site-title"><a href="/">ASP.NET Web API</a></p>
  6. </div>
  7. </div>
  8. </header>
  9. <div id="body">
  10. <a id="AddCustomer" href="#">Create New Customer</a>
  11. </div>
  12. </body>
In the following image we can see how the data will be sent via the Post Method:
PostwepApi2.png
Happy Coding.