How to Make an Ajax Call to WebAPI from Visual WebPart in SharePoint 2013

Sathish Nadarajan
SharePoint MVP
Published On :   09 Dec 2015
Visit Count
Today :  1    Total :   8207

In the recent development era, almost every customer is looking for the SandBox Solutions. In that case, we cannot use many Server Side Object Model Coding Standards. In this scenario, most of the business logics will be moved to the WebAPI and the WebParts will consume the WebAPI. In this article, let us see such a webpart, which consumes a WebAPI and renders the output from the WebAPI as a Table.

As usual, we will be creating a project and add a Visual WebPart. Not the Visual WebPart (Farm Solution Only).


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

 <script type="text/javascript">
      $(document).ready(function () {
             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));

Happy Coding,

Sathish Nadarajan.