#4 WebApi - Basic example using all HTTP methods
Requirements
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:
Output
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 NETCOREAPP
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
Output
To see the source of the WebApi Controller, check the first sample on this page.
Output
To see the source of the WebApi Controller, check the first sample on this page.
Output
To see the source of the WebApi Controller, check the first sample on this page.
#4 WebApi - Basic example using all HTTP methods
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>Very basic WebApi Examples</h2> <p> In this example, we'll assume your WebApi controller is called <code>Orders</code> (so the file is called <code>OrdersController.cs</code> and has a class called <code>OrdersController</code>). It's located in <code>/api</code> which is the default location for WebApi controllers. <br> We'll show various usages of the http methods with the new <code>webApi.fetch(...)</code> </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="getOrdersFetch(this)">Quick Fetch GET "Orders"</button> @* 2sxclint:disable:no-inline-script *@ <script> function getOrdersFetch(moduleContext) { $2sxc(moduleContext).webApi.fetchJson('orders/get') .then(data => alert('Result using quick Fetch: ' + JSON.stringify(data))); } </script> @Html.Partial("MessageHybrid.cshtml") <button type="button" class="btn btn-primary" onclick="postOrdersFetch(this)">Quick Fetch POST "Orders"</button> @* 2sxclint:disable:no-inline-script *@ <script> function postOrdersFetch(moduleContext) { $2sxc(moduleContext).webApi.fetchJson('orders/post', { amount: Math.floor(Math.random() * 100) }) .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> @* 2sxclint:disable:no-inline-script *@ <script> function putOrdersFetch(moduleContext) { $2sxc(moduleContext).webApi.fetchJson('orders/put', { amount: Math.floor(Math.random() * 100) }, 'PUT') .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> @* 2sxclint:disable:no-inline-script *@ <script> function deleteOrdersFetch(moduleContext) { $2sxc(moduleContext).webApi.fetchJson('orders/delete', null, 'DELETE') .then(data => alert('Delete executed')); } </script> @* Footer *@ @Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })