Skip to main content
Home  › ... Razor

WebApi Tutorials

Tutorial Home › WebApi
WebApi Query - basic examples
#9 Basic Hybrid WebApi
Introduction Toolbars
Requirements
Resources

Hybrid (Dnn / Oqtane) WebApi Examples

This is an advanced implementation of the basic examples before. It uses #if statements to ensure that the same code can run in Dnn and Oqtane.

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

Output

<button type="button" class="btn btn-primary" onclick="callBasicHello(this)">
  Get Hello
</button> 
<button type="button" class="btn btn-primary" onclick="callSquare(this, 7)">
  Square 7
</button> <button type="button" class="btn btn-primary" onclick="callSquare(this, 27)">
  Square 27
</button>
  @* 2sxclint:disable:no-inline-script *@
<script>
  function callBasicHello(moduleContext) {
    $2sxc(moduleContext).webApi.fetchJson('app/auto/api/hybrid/hello')
      .then(function (results) { alert(results); });
  }

  function callSquare(moduleContext, original) {
    $2sxc(moduleContext).webApi.fetchJson('app/auto/api/hybrid/square?number=' + original)
      .then(function (results) { alert(results); });
  }
</script>

Source Code of ../api/HybridController.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.
using Oqtane.Shared;                      // Oqtane role names for [Authorize]
#else
using System.Web.Http;                    // .net 4.5 [AllowAnonymous] / [HttpGet]
using DotNetNuke.Web.Api;                 // [DnnModuleAuthorize] & [ValidateAntiForgeryToken]
using DotNetNuke.Security;                // DnnRoles for SecurityAccessLevel.Anonymous
#endif

#if NETCOREAPP
[Produces("application/json")]  // Ensures that strings are JSON and have quotes around them in .net 5
#endif
[AllowAnonymous]                          // all commands can be accessed without a login
public class HybridController : Custom.Hybrid.Api14 // see https://r.2sxc.org/CustomWebApi
{
  [AllowAnonymous]                        // Explicitly set for this method
  [HttpGet]                               // [HttpGet] says we're listening to GET requests
  public string Hello()
  {
    return "Hello from the basic controller in /api";
  }

  #if OQTANE
  [Authorize(Roles = RoleNames.Everyone)] // Oqtane authorize everyone / anonymous
  #else
  [DnnModuleAuthorize(AccessLevel = SecurityAccessLevel.Anonymous)] // Dnn equivalent
  #endif
  [HttpGet]                               // [HttpGet] says we're listening to GET requests
  public int Square(int number)
  {
    return number * number;
  }
}

// The next line is for 2sxc-internal quality checks, you can ignore this
// 2sxclint:disable:no-dnn-namespaces - 2sxclint:disable:no-web-namespace
WebApi Query - basic examples
#9 Basic Hybrid WebApi
Introduction Toolbars

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
<!-- unimportant stuff, hidden -->


<div @Sys.PageParts.InfoWrapper()>
  @Html.Partial("../shared/DefaultInfoSection.cshtml")
  <div @Sys.PageParts.InfoIntro()>
      <h2>Hybrid (Dnn / Oqtane) WebApi Examples</h2>
      <p>
        This is an advanced implementation of the basic examples before. It uses <code>@("#" + "if")</code> statements to ensure that the same code can run in Dnn and Oqtane. 
      </p>

      <p>
        Click to see the result of a WebApi call with the shared code:  
      </p>
    </div>
  </div>

  <button type="button" class="btn btn-primary" onclick="callBasicHello(this)">
    Get Hello
  </button> 
  <button type="button" class="btn btn-primary" onclick="callSquare(this, 7)">
    Square 7
  </button> <button type="button" class="btn btn-primary" onclick="callSquare(this, 27)">
    Square 27
  </button>
    @* 2sxclint:disable:no-inline-script *@
  <script>
    function callBasicHello(moduleContext) {
      $2sxc(moduleContext).webApi.fetchJson('app/auto/api/hybrid/hello')
        .then(function (results) { alert(results); });
    }

    function callSquare(moduleContext, original) {
      $2sxc(moduleContext).webApi.fetchJson('app/auto/api/hybrid/square?number=' + original)
        .then(function (results) { alert(results); });
    }
  </script>



@* Footer *@
@Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })