Web API
Created by Orckestra

Example 2: Getting data using OData

How to get data using OData

In the following example, we'll use standard C1 pages as data and build a Web API that will serve as a web point to retrieve this data. Then we'll create a C1 Razor function that will use OData to get the data.

Creating a Web API

Make sure you've installed the Composite.AspNet.WebAPI package.
Add a new class called "ODataTest" in /App_Code on your website.

Replace the generated code with this code:

using System.Linq;
using System.Web.Http;
using System.Web.Http.OData.Query;
using Composite.Data;
using Composite.Data.Types;
  
namespace Composite.Controllers
{
    public class PagesController : ApiController
    {
        [Queryable]
        public IQueryable<IPage> Get(ODataQueryOptions<IPage> options)
        {
            using (var c = new DataConnection())
            { 
                var querySettings = new ODataQuerySettings();
  
                return options.ApplyTo(c.Get<IPage>(), querySettings).Cast<IPage>().ToList().AsQueryable();
           }
        }
    }
}

Download the sample code

Alternatively, you can build it as a class library and add it to your website:

Create a Class Library project in Visual Studio.
Add required references to it.
Add a class called "ODataTest" to it.
Replace the generated code with the code above.
Build the project.
Copy the DLL to /Bin on your website.

Creating a C1 Razor function for data retrieval

Log in to the C1 Console.
In the Functions perspective, add a new Razor function called "ODataTest".

Replace the generated code with this code:

@inherits RazorFunction
 
@functions {
    public override string FunctionDescription
    {
        get  { return "A demo function that outputs a hello message."; }
    }
}
 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://www.composite.net/ns/function/1.0">
    <head>
        <script type="text/javascript">
// <!--            
            function LoadJson(url)
            {
                $.getJSON(url, function (data) {
 
                    $("#jsonResult")[0].textContent = JSON.stringify(data, null, 4);
                });
            }
//-->
        </script>
        <style type="text/css">
            .queryLink {
                display: inline-block; 
                background-color: lightblue; 
                padding: 10px 20px;
            }
        </style>
    </head>
    <body>
         
        <a href="#" onclick="LoadJson('/api/pages?$top=1')" class="queryLink">
            Load a page
        </a>
 
        <a href="#" onclick="LoadJson('/api/pages')" class="queryLink">
            Load all pages
        </a>
         
         
        <a href="#" onclick="LoadJson('/api/pages?$top=5')" class="queryLink">
            Load top 5 pages
        </a>
         
        <a href="#" onclick="LoadJson('/api/pages?$filter=Title eq \'OData\'')" class="queryLink">
            Filter by Title='OData'
        </a>
         
        <pre id="jsonResult" style="padding: 10px; max-width: 700px; border: 2px solid black">
             
        </pre>
         
         
    </body>
</html>

Download the sample code

Edit or create a page.
Insert this function on the page.
Save and publish the page.

Testing the demo

Now you can get data (C1 pages) in one of the following ways:

Making requests via the URL:

http://<websiteurl>/api/pages
http://<websiteurl>/api/pages?$top=2
http://<websiteurl>/api/pages?$orderby=Title

Clicking the respective buttons on the page where you inserted the "ODataTest" function.

Version 1.0.5

Tags JSON | Web API

Have a question?

Post it to the C1 CMS Foundation forum.

Know it first and engage with us on all channels

Web API Created by Orckestra