WebApi Tutorials

WebApi - Basic example with CSRF protection

#4 WebApi - Basic example using all HTTP methods

Very basic WebApi Examples

In this example, we'll assume your WebApi controller is called Orders (so the file is called OrdersController.cs and has a class called OrdersController). It's located in /api which is the default location for WebApi controllers.
We'll show various usages of the http methods with the new webApi.fetch(...)

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

Requirements

2sxc 12.08

Resources

      <button type="button" class="btn btn-primary" onclick="getOrdersFetch(this)">Quick Fetch GET "Orders"</button> 
  
  <script>
    // Fetch using modern Browser APIs
    // This is the more manual method, in case you don't expect JSON or want more control
    // This uses the full internal syntax `app/auto/api/controller/method`
    function getOrdersFetch(moduleContext) {
      $2sxc(moduleContext).webApi.fetch('orders/get')
        .then(response => response.json())
        .then(data => alert('Result using quick Fetch: ' + JSON.stringify(data)));
    }
  </script>
  
  

      <button type="button" class="btn btn-primary" onclick="postOrdersFetch(this)">Quick Fetch POST "Orders"</button> 
  
  <script>
    // Fetch using modern Browser APIs
    // This is the more manual method, in case you don't expect JSON or want more control
    // This also uses the shortest API syntax `controller/method`
    function postOrdersFetch(moduleContext) {
      $2sxc(moduleContext).webApi.fetch('orders/post', { amount: Math.floor(Math.random() * 100) })
        .then(response => response.json())
        .then(data => alert('Result using quick Fetch: ' + JSON.stringify(data)));
    }
  </script>

  

      <button type="button" class="btn btn-primary" onclick="putOrdersFetch(this)">Quick Fetch PUT "Orders"</button> 
  
  <script>
    // Fetch using modern Browser APIs
    // This is the more manual method, in case you don't expect JSON or want more control
    // This also uses the shortest API syntax `controller/method`
    function putOrdersFetch(moduleContext) {
      $2sxc(moduleContext).webApi.fetch('orders/put', { amount: Math.floor(Math.random() * 100) }, 'PUT')
        .then(response => response.json())
        .then(data => alert('Result using quick Fetch: ' + JSON.stringify(data)));
    }
  </script>

  

      <button type="button" class="btn btn-primary" onclick="deleteOrdersFetch(this)">Quick Fetch DELETE "Orders"</button> 
  
  <script>
    // Fetch using modern Browser APIs
    // This is the more manual method, in case you don't expect JSON or want more control
    // This also uses the shortest API syntax `controller/method`
    function deleteOrdersFetch(moduleContext) {
      $2sxc(moduleContext).webApi.fetch('orders/delete', null, 'DELETE')
        .then(response => response.json())
        .then(data => alert('Delete executed'));
    }
  </script>

  

WebApi - Basic example with CSRF protection

#4 WebApi - Basic example using all HTTP methods

WebApi - Bare Metal for custom requests

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 -->

Very basic WebApi Examples In this... <!-- unimportant stuff, hidden -->



  <button type="button" class="btn btn-primary" onclick="getOrdersFetch(this)">Quick Fetch GET "Orders"</button> 
  
  <script>
    // Fetch using modern Browser APIs
    // This is the more manual method, in case you don't expect JSON or want more control
    // This uses the full internal syntax `app/auto/api/controller/method`
    function getOrdersFetch(moduleContext) {
      $2sxc(moduleContext).webApi.fetch('orders/get')
        .then(response => response.json())
        .then(data => alert('Result using quick Fetch: ' + JSON.stringify(data)));
    }
  </script>
  

  <button type="button" class="btn btn-primary" onclick="postOrdersFetch(this)">Quick Fetch POST "Orders"</button> 
  
  <script>
    // Fetch using modern Browser APIs
    // This is the more manual method, in case you don't expect JSON or want more control
    // This also uses the shortest API syntax `controller/method`
    function postOrdersFetch(moduleContext) {
      $2sxc(moduleContext).webApi.fetch('orders/post', { amount: Math.floor(Math.random() * 100) })
        .then(response => response.json())
        .then(data => alert('Result using quick Fetch: ' + JSON.stringify(data)));
    }
  </script>


  <button type="button" class="btn btn-primary" onclick="putOrdersFetch(this)">Quick Fetch PUT "Orders"</button> 
  
  <script>
    // Fetch using modern Browser APIs
    // This is the more manual method, in case you don't expect JSON or want more control
    // This also uses the shortest API syntax `controller/method`
    function putOrdersFetch(moduleContext) {
      $2sxc(moduleContext).webApi.fetch('orders/put', { amount: Math.floor(Math.random() * 100) }, 'PUT')
        .then(response => response.json())
        .then(data => alert('Result using quick Fetch: ' + JSON.stringify(data)));
    }
  </script>


  <button type="button" class="btn btn-primary" onclick="deleteOrdersFetch(this)">Quick Fetch DELETE "Orders"</button> 
  
  <script>
    // Fetch using modern Browser APIs
    // This is the more manual method, in case you don't expect JSON or want more control
    // This also uses the shortest API syntax `controller/method`
    function deleteOrdersFetch(moduleContext) {
      $2sxc(moduleContext).webApi.fetch('orders/delete', null, 'DELETE')
        .then(response => response.json())
        .then(data => alert('Delete executed'));
    }
  </script>


<!-- unimportant stuff, hidden -->

Note about Hybrid WebAPIs

These examples are all done to work in both Dnn ☢️ and Oqtane 💧. Because of this, the Api Controller have special conditional statements like #if NETSTANDARD which uses different namespaces in .net core and .net Framework.
If you only target Dnn or Oqtane, you can remove the lines you don't need. See See how to use #if

Source Code of /api/OrdersController.cs

// 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.Collections.Generic;

[AllowAnonymous]                          // all commands can be accessed without a login
public class OrdersController : Custom.Hybrid.Api14 // see https://r.2sxc.org/CustomWebApi
{
  public List<Order> orders = new List<Order>{
    new Order{ Id = 1, Amount = 10 },
    new Order{ Id = 2, Amount = 37 }
  };

  [HttpGet]				// [HttpPost] says we're listening to POST requests
  public List<Order> Get()
  {
    return orders;
  }

  [HttpPost]				// [HttpPost] says we're listening to POST requests
  public Order Post([FromBody] Order order)
  {
    order.Id = orders[orders.Count - 1].Id + 1;
    orders.Add(order);
    return orders[orders.Count - 1];
  }

  [HttpPut]				// [HttpPut] says we're listening to PUT requests
  public Order Put([FromBody] Order order)
  {
    orders[0].Amount = order.Amount;
    return orders[0];
  }

  [HttpDelete]        // [HttpDelete] says we're listening to DELETE requests
  public string Delete()
  {
    orders.RemoveAt(0);
    return "";
  }
}

public class Order {
  public int Id;
  public int Amount;
}