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 :  2    Total :   6949
Plan, Migrate, Secure, Report
SharePoint & Office 365 Tool. Simple & Easy to Use. 15-Day Trial!

SharePoint Office 365 Tool
Simple & Powerful Tool for Migration, Security & Reporting. Free Trial


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).

clip_image002

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

 <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>
 

Happy Coding,

Sathish Nadarajan.

SharePoint Usage Reports
Usage reports, collaboration and audit for SharePoint.
Categories

KWizCom Forms App