How To Make An Ajax Call To WebAPI From Visual WebPart In SharePoint 2013

Step 1

Build your solution in release mode.

To build the solution, kindly download the sample application from the link Restful CRUD Operations in WebApi Using ADO.NET Objects and SQL Server and start working further. Please choose the release option from the dropdown list as encircled in red.



Step 2
Right-click on the project and choose the publish command to publish the Web API. Kindly look at the images shown below.





As soon as you click on the publish button it publishes the build and prompts for a message in the bottom of success as shown in the image below:



Step 3
Now type "Inetmgr” in the Start window and click on inetmgr to open IIS as shown in the image below:



Step 4
To add a new application as a virtual directory right-click on the default website and click on the Add application property. Please refer to the following image.



Provide an alias name of your choice and provide the physical path from your directory.

Note:

1. It should be a published solution path that we've created in Step 2 above.
   
2. Change the application pool “DefaultAppPool” to ASP.Net v4.0 after clicking on the “select” option. If you encounter an error like “unrecognized attribute 'targetframework'. Note that attribute names are case-sensitive IIS7” then here is the solution for that.
   
   Unrecognized attribute 'targetframework'. Note that attribute names are case-sensitive IIS7.
   
   

Step 5

The sample application has been hosted in IIS with the name DotnetPiper.



To verify that the WebApi has been hosted perfectly, browse to the application again. Go to IIS and right-click on the application then select Manage Application -> Browse. It will look as in the image shown below.



The preceding Blue screen shows that the Web API is up and running.

I've used Fiddler to trace the requests, so I will open Fiddler to execute the following link to retrieve the information of the EmployeeId 15: http://localhost/DotnetPiper/api/Employees/GetEmployeeById/15

 

 

Execution of AddEmployee (POST) Method of WebApi

Since the WebApi is already in running mode, I'll execute the following link to add an employee to the database. http://localhost/DotnetPiper/api/Employees/AddEmployee and will pass the following JSON parameters { "EmployeeId": 30, "Name" : "AjayJadeja", "ManagerId" : 7 }.


Please open the database to confirm whether or not the user “Ajay Jadeja” has been added to the database. Kindly look at the image shown below:



We are nearly done with the execution of the Post method.

Execution of DeleteEmployeeById (Delete) Method of WebApi.

Now open the EmployeeController again and paste the following code into that as the Delete WebApi method:

 

 

Since the WebApi is already in running mode, I'll execute the following link to delete an employee by the employee id database. http://localhost/DotnetPiper/api/Employees/Delete/20.

Note: If you face an error at time of execution of DELETE and PUT.Kindly refer this link for resolution.

WepApi HTTP Error 405.0 - Method Not Allowed

Please open the database to confirm that EmployeeId “20” has been deleted. Kindly look at the image shown below.



Note: I have intentionally left the implementation of the Update method so that the end user can have hands-on to this. I'll also add a database backup for user help.

Go through with these detailed links to learn more about the WebApi.

• How MediaTypeFormatter and MediaTypeMapping are associated with each other in the WebApi.
  
• WebAPI: MediaTypeFrommatters in WebAPI.

Detailed links to learn more about the WebApi.

Points to consider:

• You should have a little knowledge of the WebApi.
  
• You should have knowledge of the Fiddler tool to execute the functionality.
  
• There is a need for SQL Server also.

On the ASCX file, we need to call the WebAPI.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<script type="text/javascript">          $(document).ready(function () {              $.ajax({              url: webAPIURL + '/api/MyController/' + Parameter1 + '/' + parameter2,              type: 'GET',              dataType: 'jsonp',              success: function (data) {                  if (data.length > 0) {                      $.each(data, function (idx, elem) {                           //Do the actual process here..  //$('#areaDocTopics').append('<div class="col-xs-6 col-sm-4 col-lg-3"><a class="block block-link-hover3 text-center" href="#" onclick="CallBackSuccess(\'' + elem.Url + '\');return false;" ><div class="block-content block-content-full bg-green"><h5><i class="fa fa-bookmark"></i>' + elem.Title + '</h5></div><div class="block-content block-content-full block-content-mini"><span class="articles"><i class="fa fa-newspaper-o"></i>' + elem.Count + '</span><span class="videos"><i class="fa fa-video-camera"></i>' + elem.Count + '</span><span class="documents"><i class="fa fa-file-text-o"></i>' + elem.Count+ '</span></div></a></div>');                      });                  }                  else {                      $('#areaDocTopics').html('<div class="alert alert-warning text-center"><h3>No data found</h3></div>');                  }                                  },              error: function (x, y, z) {                  alert(JSON.stringify(x) + '\n' + JSON.stringify(y) + '\n' + JSON.stringify(z));                                  }             });      });  </script>