CloudSelf-hosted

.NET WebForms / ASPX

ASP.NET WebForms and plain ASPX pages are a popular way to create dynamic web-sites due to their relative simplicity. In such an application the front-end (HTML) is provided in a separate file from the server-side code (a "Code Behind" file) allowing separation of concerns, while allowing easy communication between them.

Installing

The first step is to install the Cloudtables.Api package from Nuget, which you can do in the Nuget package manager for Visual Studio (which we will assume you are using).

ASPX

To use CloudTables in an ASPX file for your WebForm application, use an existing file or create a new Web Form or ASPX file (not from a master template). Visual Studio will automatically fill the aspx file in with a template such as:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CloudTables.aspx.cs" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     
    </div>
    </form>
</body>
</html>

Important The CloudTables library installed via Nuget makes use of asynchronous patterns, so you must add Async="true" to the <%@ Page ... > line.

We'll next add the script tag used to position and display the CloudTable on your page - you can find this in the Embed tab for the data set you wish to show. The resulting file will look something like this:

<%@ Page Async="true" Language="C#" AutoEventWireup="true" CodeBehind="CloudTables.aspx.cs" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <script
            src="https://sub-domain.cloudtables.io/loader/{data-set-id}/table/d"
            data-token="<%= Token %>"
        ></script>
    </div>
    </form>
</body>
</html>

Code behind

Notice in the above code we have made us of a variable called Token. We now need to use the Code behind file to get an access token from CloudTables granting suitable access rights and fill in that variable.

The first thing we need to do is add the namespaces that will be used:

  • CloudTables - For the CloudTables .NET API
  • System.Threading.Task - Allowing async actions in our controller

Next in Page_Load register an AsyncTask:

RegisterAsyncTask(new PageAsyncTask(CloudTablesToken));

where CloudTablesToken is a method we will define. It simply creates a new CloudTables instance, passing in your unique identifying information and returns the generated token:

public async Task CloudTablesToken() {
    var api = new Api("sub-domain", ":apiKey");
    Token = await api.Token();
}

Where:

  • :apiKey should be replaced by the API key that you want to use for the access.

The completed Code Behind file will look like this:

using System;
using System.Web.UI;
using CloudTables;
using System.Threading.Tasks;

namespace WebApplication
{
    public partial class _Default : Page
    {
        public string Token;

        protected async void Page_Load(object sender, EventArgs e)
        {
            RegisterAsyncTask(new PageAsyncTask(CloudTablesToken));
        }

        public async Task CloudTablesToken() {
            var api = new Api("sub-domain", ":apiKey");
            // Optionally specify `.ClientId()`
            // And `.ClientName()` for auditing

            Token = await api.Token();
        }
    }
}

Run it!

That's it - you will now have a CloudTable embedded into your WebForm / ASPX file when run.

© 2022 CloudTables designed and created by SpryMedia Ltd.
SpryMedia Ltd is registered in Scotland, company no. SC456502.
Terms of Service | Privacy Policy.