Post
Ask Question

Post Data to MVC 4 WEB API .NET 4.5

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


Similar Articles