Skip to main content
Home  › ... 2sxc Apps › 2sxc Tutorial

WebApi Tutorials

Tutorial Home
WebApi Polymorph - basic examples
#7 WebApi App.Data - basic examples
WebApi App.Query - basic examples

App.Data WebApi Examples

In this example, we'll get app-data from the WebApi.

Click to see the result of a WebApi call with the shared code:

Requirements
Resources 

<script>
  function getPersons(moduleContext) {
    $2sxc(moduleContext).webApi.fetchJson('books/persons')
      .then(function(data) {
        alert('Found ' + data.length + ' persons. \n'
          + 'The first one is "' + data[0].FirstName + ' ' + data[0].LastName + '"\n\n'
          + 'The raw JSON: \n' + JSON.stringify(data)
        );
      });
  }

  function getBooks(moduleContext) {
    $2sxc(moduleContext).webApi.fetchJson('books/books')
      .then(function(results) {
        alert('Found ' + results.length + ' books. \n'
          + 'The first one is "' + results[0].Title + '"\n\n'
          + 'The raw JSON: \n' + JSON.stringify(results)
          );
      });
  }

  function getPersonsAuto(moduleContext) {
    $2sxc(moduleContext).webApi.fetchJson('books/personsAuto')
      .then(function(results) {
        alert('On WebApi with Auto-Convert: Found ' + results.length + ' persons. \n'
          + 'The first one is "' + results[0].FirstName + ' ' + results[0].LastName + '"\n\n'
          + 'The raw JSON: \n' + JSON.stringify(results)
        );
      });
  }
</script>
WebApi Polymorph - basic examples
#7 WebApi App.Data - basic examples
WebApi App.Query - basic examples

Info about the Base Class

This tutorial inherits from the Custom.Hybrid.Razor14 base class.

This allows us to use Kit.Page to access IPageService without having to use GetService<>

Source Code of this file

Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code 

@inherits Custom.Hybrid.Razor14
@{
  // Tell the page that we need the 2sxc Js APIs
  Kit.Page.Activate("2sxc.JsCore"); 
}
<!-- unimportant stuff, hidden -->

App.Data WebApi Examples In this example... <!-- unimportant stuff, hidden -->
<button type="button" class="btn btn-primary" onclick="getPersons(this)">
  Get Persons Custom
</button> 

<button type="button" class="btn btn-primary" onclick="getBooks(this)">
  Get Books Custom
</button> 

<button type="button" class="btn btn-primary" onclick="getPersonsAuto(this)">
  Get Persons with Auto-Convert
</button> 


<script>
  function getPersons(moduleContext) {
    $2sxc(moduleContext).webApi.fetchJson('books/persons')
      .then(function(data) {
        alert('Found ' + data.length + ' persons. \n'
          + 'The first one is "' + data[0].FirstName + ' ' + data[0].LastName + '"\n\n'
          + 'The raw JSON: \n' + JSON.stringify(data)
        );
      });
  }

  function getBooks(moduleContext) {
    $2sxc(moduleContext).webApi.fetchJson('books/books')
      .then(function(results) {
        alert('Found ' + results.length + ' books. \n'
          + 'The first one is "' + results[0].Title + '"\n\n'
          + 'The raw JSON: \n' + JSON.stringify(results)
          );
      });
  }

  function getPersonsAuto(moduleContext) {
    $2sxc(moduleContext).webApi.fetchJson('books/personsAuto')
      .then(function(results) {
        alert('On WebApi with Auto-Convert: Found ' + results.length + ' persons. \n'
          + 'The first one is "' + results[0].FirstName + ' ' + results[0].LastName + '"\n\n'
          + 'The raw JSON: \n' + JSON.stringify(results)
        );
      });
  }
</script>




<!-- unimportant stuff, hidden -->

Source Code of /api/BooksController.cs

Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code 

// Add namespaces for security check in Oqtane & DNN despite differences in .net core/.net Framework
// If you only target one platform, you can remove the parts you don't need
#if NETCOREAPP
using Microsoft.AspNetCore.Authorization; // .net core [AllowAnonymous] & [Authorize]
using Microsoft.AspNetCore.Mvc;           // .net core [HttpGet] / [HttpPost] etc.
#else
using System.Web.Http;                    // .net 4.5 [AllowAnonymous] / [HttpGet]
using DotNetNuke.Web.Api;                 // [DnnModuleAuthorize] & [ValidateAntiForgeryToken]
#endif
using System.Linq;        // this enables .Select(x => ...)
using ToSic.Eav.DataFormats.EavLight; // For Auto-Conversion (see below)

[AllowAnonymous]                          // all commands can be accessed without a login
[ValidateAntiForgeryToken]                // protects API from users not on your site (CSRF protection)
public class BooksController : Custom.Hybrid.Api14 // see https://r.2sxc.org/CustomWebApi
{
  [HttpGet]                               // [HttpGet] says we're listening to GET requests
  public dynamic Persons()
  {
    // we could do: return App.Data["Persons"];
    // but the raw data is difficult to use, so we'll improve it

    // instead we'll create nice objects for our use
    return AsList(App.Data["Persons"])
      .Select(p => new {
        Id = p.EntityId,
        p.FirstName,
        p.LastName,
        Picture = p.Mugshot,
      });
  }

  [HttpGet]                               // [HttpGet] says we're listening to GET requests
  public dynamic PersonsAuto()
  {
    // 2sxclint:disable:v14-no-getservice
    var json = GetService<IConvertToEavLight>();
    return json.Convert(App.Data["Persons"]);
  }

  [HttpGet]                               // [HttpGet] says we're listening to GET requests
  public dynamic Books()
  {
    return AsList(App.Data["Books"])
      .Select(b => new {
        Id = b.EntityId,
        b.Title,
        b.Cover,
        Awards = AsList(b.Awards as object)
          .Select(a => a.EntityTitle)
      });
  }
}

// The next line is for 2sxc-internal quality checks, you can ignore this
// 2sxclint:disable:no-dnn-namespaces - 2sxclint:disable:no-web-namespace