icon 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

  1. Make sure you've installed the Composite.AspNet.WebAPI package.
  2. Add a new class called "ODataTest" in /App_Code on your website.
  3. 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
            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:

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

Creating a C1 Razor function for data retrieval

  1. Log in to the C1 Console.
  2. In the Functions perspective, add a new Razor function called "ODataTest".
  3. 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">
            <script type="text/javascript">
    // <!--            
                function LoadJson(url)
                    $.getJSON(url, function (data) {
                        $("#jsonResult")[0].textContent = JSON.stringify(data, null, 4);
            <style type="text/css">
                .queryLink {
                    display: inline-block; 
                    background-color: lightblue; 
                    padding: 10px 20px;
            <a href="#" onclick="LoadJson('/api/pages?$top=1')" class="queryLink">
                Load a page
            <a href="#" onclick="LoadJson('/api/pages')" class="queryLink">
                Load all pages
            <a href="#" onclick="LoadJson('/api/pages?$top=5')" class="queryLink">
                Load top 5 pages
            <a href="#" onclick="LoadJson('/api/pages?$filter=Title eq \'OData\'')" class="queryLink">
                Filter by Title='OData'
            <pre id="jsonResult" style="padding: 10px; max-width: 700px; border: 2px solid black">
    Download the sample code
  4. Edit or create a page.
  5. Insert this function on the page.
  6. 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:

  • Clicking the respective buttons on the page where you inserted the "ODataTest" function.
Back to top