SharePoint 2013 Online and ASP.NET Web API using JSONP

Consider a scenario where you have to display data or make decisions on a SharePoint 2013 page based on the data that exists in a database. Here is what you can do:

Abstract:
1. Create an Empty ASP.NET Web API project.
2. Enable the project for JSONP format
3. Add the Controller, Model, the business and data access logic to the service
4. Deploy the Service
5. Add script to SharePoint 2013 page

Details:
1. Create an Empty ASP.NET Web API project.
This is fairly simple step, all you need is MVC4 or above and .NET Framework 4.5. Using Visual Studio 2012/2013, Add new project, select an empty project and check the Web API box and click OK.

2. Enable the project for JSONP format:
- Open package manager in visual studio (Tools>NuGet Package Manager > Package Manager Console and run the following command, it will add the required dlls to your project:

Install-Package WebApiContrib.Formatting.Jsonp

 - In App_Start folder of the project, create a new class:

    public class FormatterConfig
    {
public static void RegisterFormatters(MediaTypeFormatterCollection formatters)
        {
            var jsonFormatter = formatters.JsonFormatter;
            jsonFormatter.SerializerSettings = new JsonSerializerSettings
            {
                ContractResolver = new CamelCasePropertyNamesContractResolver()
            };

             // Insert the JSONP formatter in front of the standard JSON formatter.
            var jsonpFormatter = new JsonpMediaTypeFormatter(formatters.JsonFormatter);
            formatters.Insert(0, jsonpFormatter);
        }

     }


The Application_Start method in your Global.asax.cs should look like this:

         protected void Application_Start()
        {
            FormatterConfig.RegisterFormatters(GlobalConfiguration.Configuration.Formatters);
            GlobalConfiguration.Configure(WebApiConfig.Register);
        }

3. Add the Controller, Model, the business and data access logic to the service
I added the "Web API Controller Class (v2)" in the project.

4. Deploy the Service
- Create a new site in IIS, create bindings with a host-name and SSL.
NOTE: If you won't use SSL, you'll see the mixed content warnings or "security risk" warnings from browsers when you'll call the service from JavaScript. 
- Publish the service from visual studio and copy the published files to the site directory.

4. Test:
Create an HTML page and paste the following code in it. This code should work. (if it doesn't, open developer toolbar of the browser to make sure there are no errors).

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<button id="getJsonp">Get JSONP</button>
<script type="text/javascript">
$("#getJsonp").click(function () {
$.ajax({
        type: 'GET',
              url: "http://localhost/api/values/1",
              callback: callbackFunc,
              contentType: "application/json; charset=utf-8",
              dataType: 'jsonp'
              }).done(function(data){
alert(data);
});
});

 function callbackFunc(resultData) {
}
</script>
</body>
</html>

5. Add script to SharePoint 2013 page
If it passes the above test, the highlighted (in blue) jQuery script can be added to the SharePoint page. Make sure you replace the localhost with an actual host-name accessible to all users, of course :)

Comments

Post a Comment

Feel free to give constructive feedback or let me know if it was helpful.

Popular posts from this blog

Unable to delete Shared Services Provider in SharePoint (MOSS)

Sometimes The SSP you create in MOSS are not created properly. This can be result of interruption while SSP was being created or in result of bad migration from SPS03 or MCMS to MOSS. Symptoms: 1. In left nav of SharePoint Central Administration, the name of your new SSP will not render rather, it will show up as text. 2. If you try to delete that from the Central Admin, the Delete option is disabled. Resolution: You should delete the SSP using stsadm command line tool (NOTE: My SSP's name is "SSP" which is specified after "title" in command: C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\BIN>stsa dm -o deletessp -title "SSP" However, if you have any dependencies, you will have to delete them first or you will get following error when you try deleting it through command line tool: An object in the SharePoint administrative framework, "SharedResourceProvider Na me=SSP Parent=SPFarm Name=SharePoint_Config&quo
Read more

The server was unable to process the request due to an internal error. For more information about the error, either turn on IncludeExceptionDetailInFaults (either from ServiceBehaviorAttribute or from the configuration behavior) on the server in order to send the exception information back to the client, or turn on tracing as per the Microsoft .NET Framework 3.0 SDK documentation and inspect the server trace logs.

Image
  While configuring the SharePoint 2010 for Forms Based Authentication, I encountered above error. To get the problem, I had to change “IncludeExceptionDetailInFaults” to true somewhere. But WHERE? Here is what solved my problem: Go to following path: 1. C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\WebServices\SecurityToken 2. Open Web.config there. 3. Add following in the “behaviors > serviceBehaviors > behavior” node. <serviceDebug includeExceptionDetailInFaults="true"/> Now try to login and see what error it gives, off to a next error
Read more

Cannot add a SimpleContent column to a table containing element columns or nested relations

Recently I ran into a problem while dealing with DataSets. I was adding a colum to an XSD through Visual Studio desinger and it kept failing with following error: Cannot add a SimpleContent column to a table containing element columns or nested relations. This is a known issue. However, the solution is not well known :) To be simple and streight forward, I tell you the solution which I tried and it worked, 1. Note down the column names, datatypes and relationships of the table. 2. Delete the table. 3. Add new table and add columns to it. 4. Redefine relationships. Best of luck.
Read more