CORS support for ASP.NET Web API

CORS (Cross-Origin Resource Sharing) in an ASP.NET Web API 

I have been facing a dreadful issue "access denied access-control-allow-origin not included in response" error whenever I tried to send an AJAX request. I was able to land my call to the web API service and also checked that the Web API service was returning the correct response with correct headers. Still I was unable to find the solution to it and it really got frustrating.

I followed several tutorials on the web to allow the CORS in web API like:

http://aspnetwebstack.codeplex.com/wikipage?title=CORS%20support%20for%20ASP.NET%20Web%20API

then I found this one

http://blogs.msdn.com/b/carlosfigueira/archive/2012/02/20/implementing-cors-support-in-asp-net-web-apis.aspx

This tutorial here was the most comprehensive one and actually contained everything that we should know about CORS and moved me one step ahead. I was successfully able to send CORS requests on my local machine.

Again this error appeared when I deployed in production and then I had to remove the previous CORS handler. I was back to square one and was really desperate to find a solution because this was happening in production.

Finally, I found the magical lines which did the trick for me. Thanks to http://encosia.com/using-cors-to-access-asp-net-services-across-domains/ article.

<system.webServer>

 <httpProtocol>

  <customHeaders>

   <add name="Access-Control-Allow-Origin" value="*" />

   <add name="Access-Control-Allow-Headers" value="Content-Type" />

  </customHeaders>

 </httpProtocol>

</system.webServer>

I hope it helps someone in need because I definitely know how miserable our life gets if such an issue appears.

SHAREPOINT CUSTOM SEARCH WITH KENDOUI

As discussed in the previous post I had planned to incorporate Kendo UI with the SharePoint 2013 Custom Search Results page, I am going to develop a Web Part which will use the Kendo Grid.

For those who are still wondering what this kendo UI is all about.. It really is a cool; HTML5, Javascript etc based Framework which provides several widgets for more details visit <a href="http://www.kendoui.com/">http://www.kendoui.com/</a>

INTEGRATING KENDO UI
In the previous section we made a user control now user control has both .ascx page and the code behind file. Add the reference to the kendo UI style sheets but before doing that we need to place the files in the 15hive in the Layouts folder so that these style sheets are available for our user control. Place them in the STYLES folder in the Layouts folder.


Add Script tag in the file to use kendoUI:
  <link href="/_layouts/15/kendoFiles/Content/kendo/2012.2.710/kendo.common.min.css" rel="stylesheet" type="text/css"></link>
    <link href="/_layouts/15/kendoFiles/Content/kendo/2012.2.710/kendo.blueopal.min.css" rel="stylesheet" type="text/css"></link>
  <script src="/_layouts/15/kendoFiles/Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="/_layouts/15/kendoFiles/Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
<script src="/_layouts/15/kendoFiles/Scripts/kendo/2012.2.710/kendo.web.min.js" type="text/javascript"></script>
    <script src="/_layouts/15/kendoFiles/Scripts/kendoui-Custom.js"></script>
   
   <script type="text/javascript">
       function getParameterByName(name) {
           var match = RegExp('[?&]' + name + '=([^&]*)')
                           .exec(window.location.search);
           return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
       }
       var queryTerms = getParameterByName('k');//for the case if there is query string search request
       function PerformSearch() {
           queryTerms = document.getElementById('query').value;
           Results.init($('#resultsDiv'));
           Results.load();
         
       }      
       Results = {
           element: '', url: '',
           init: function (element) {
               Results.element = element;
               Results.url = _spPageContextInfo.webAbsoluteUrl + "/_api/search/query?querytext='" + queryTerms + "'";
           },
           load: function () {
               $.ajax({
                   url: Results.url,
                   method: "GET",
                   headers: { "Accept": "application/json; odata=verbose" },
                   success: Results.onSuccess, error: Results.onError
               });
           },     onSuccess: function (data) {
               var results = data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results;
               var dSource = new Array();            
               var html = "<table>";
               for (var i = 0; i < results.length; i++) {
                   dSource[i] = new Object();
                   dSource[i].Title = results[i].Cells.results[3].Value;
                   dSource[i].Path = results[i].Cells.results[6].Value;
               }
               $("#products").kendoGrid({
                   dataSource: dSource                
               });

           },
           onError: function (err) { alert(JSON.stringify(err)); }
       }

   </script>

In this JavaScript snippet we are creating a KendoUI Grid in the div that we have allocated for it in the .ascx file(as shown below). We will use the OData Services exposed by the SharePoint 2013 to call the search service and use the data returned by the service to create a data source for our KendoGrid control. And this is how we will show the results.
 
Now the Kendo UI and the Custom Search is all setup, enter any search query on our visual webpart and you will get the result, currently it is showing only two search result fields which we will alter using the column model of KendoGrid.

With the help of the latest REST based services provided by the SharePoint using kendo Grid or any other ajax supported grid has become real easy.

I will share further posts related to SharePoint 2013 development or ASP.Net which could be of any help to the developers who are seeking help in this regard.