What is WebForms Core?

WebForms Core is a modern technology from Elanat, introduced in 2024, that provides a two-way communication model between server-side code and the client-side WebFormsJS library. Its main purpose is to allow the server to control HTML elements and execute client-side operations without requiring extensive frontend code.

In this architecture, instead of sending large amounts of data or complete page structures, the server sends compact commands to the client. WebFormsJS executes these commands in the browser and can also return the result of client-side operations back to the server.

One of the important capabilities of WebForms Core is its support for JavaScript modules. Server-side code can dynamically load a JavaScript module, call its exported methods, and retrieve their return values.

This article demonstrates this capability using the storage_size.js module.

How to use WebForms Core technology?

Two steps are required.

1. On the client side

Add WebFormsJS to the page:

<script type="module" src="/script/web-forms.js"></script>

WebFormsJS is responsible for receiving WebForms Core commands and executing them in the browser.

2. On the server side

Import the WebForms class for your server-side programming language.

For this example, we use C# with the CodeBehind framework.

Server-side JavaScript Module Loading

WebForms Core allows server-side code to dynamically load JavaScript modules on the client.

The server can use:

form.LoadModule(
    "/script/module/storage_size.js",
    ["sz_GetStorageSize"]
);

This command loads the storage_size.js module and makes the sz_GetStorageSize method available for server-side invocation.

After loading the module, the server can call the method using:

Fetch.ModuleMethod(...)

This makes it possible to request information from browser APIs and return the result to the server.

Introducing the Storage Size Module

The storage_size.js module provides a simple interface for obtaining the size of different browser storage mechanisms.

The module exposes the following method:

sz_GetStorageSize(type, unit)

The first parameter specifies the storage type:

cache
cookie
indexeddb
localstorage
sessionstorage
origin

The second parameter specifies the output unit.

For example:

B
KB
MB
GB
TB

If no unit is specified, the result is returned in bytes.

For example:

sz_GetStorageSize("cache")

returns the size in bytes.

While:

sz_GetStorageSize("origin", "MB")

returns the result in megabytes.

Storage Types

The module supports several browser storage mechanisms.

Cache

The cache option calculates the size of responses stored through the Cache Storage API.

Cookie

The cookie option calculates the size of the cookies accessible through JavaScript.

IndexedDB

The indexeddb option calculates an approximate logical size of the data stored in IndexedDB.

Because browsers do not provide a standard API for obtaining the exact physical disk usage of IndexedDB, this value is an estimation based on the stored records.

Local Storage

The localstorage option calculates the size of the key/value data stored in localStorage.

Session Storage

The sessionstorage option calculates the size of the key/value data stored in sessionStorage.

Origin

The origin option uses the browser's Storage API to obtain the storage usage reported for the current Origin.

This value represents the browser-reported storage usage for the Origin and should not be considered the sum of the individual values returned by the other options.

Example Project

The example project contains the following structure:

Project Root
├── WebForms.cs
├── Controller.cs
└── wwwroot
    ├── page.aspx
    ├── layout.aspx
    ├── script
    │   ├── web-forms.js
    │   └── module
    │       └── storage_size.js

View (page.aspx)

The page contains a button that triggers the server-side operation:

@page
@controller ModuleStorageSizeController
@layout "/layout.aspx"
@{
    ViewData.Add("title", "Module Storage Size");
}

<h1>WebForms Core - Storage Size Module</h1>

<button id="Button1">Click me!</button>

When the button is clicked, a request is sent to the server and the server executes the module-related operation.

Server-side Controller (Controller.cs)

The controller contains the following code:

using CodeBehind;

public partial class ModuleStorageSizeController : CodeBehindController
{
    public void PageLoad(HttpContext context)
    {
        if (context.Request.Query.ContainsKey("load"))
        {
            Button1_OnClick(context);
            return;
        }

        WebForms form = new WebForms();

        form.SetGetEvent(
            "Button1",
            HtmlEvent.OnClick,
            "?load"
        );

        Write(form.ExportToHtmlComment());
    }

    private void Button1_OnClick(HttpContext context)
    {
        WebForms form = new WebForms();

        form.SetCookie(
            "test",
            "0123456789",
            3600
        );

        form.CreateFormatStorage(
            "test",
            "0123456789"
        );

        form.AddCacheValue(
            "test",
            "0123456789"
        );

        form.AddSaveValue(
            "test",
            "0123456789"
        );

        form.LoadModule(
            "/script/module/storage_size.js",
            ["sz_GetStorageSize"]
        );

        form.Message(
            "@: Cache: " +
            form.Inject(
                Fetch.ModuleMethod(
                    "sz_GetStorageSize",
                    ["cache"]
                )
            ) +
            "B"
        );

        form.Message(
            "@: Cookie: " +
            form.Inject(
                Fetch.ModuleMethod(
                    "sz_GetStorageSize",
                    ["cookie"]
                )
            ) +
            "B"
        );

        form.Message(
            "@: Indexed DB: " +
            form.Inject(
                Fetch.ModuleMethod(
                    "sz_GetStorageSize",
                    ["indexeddb"]
                )
            ) +
            "B"
        );

        form.Message(
            "@: Local Storage: " +
            form.Inject(
                Fetch.ModuleMethod(
                    "sz_GetStorageSize",
                    ["localstorage"]
                )
            ) +
            "B"
        );

        form.Message(
            "@: Session Storage: " +
            form.Inject(
                Fetch.ModuleMethod(
                    "sz_GetStorageSize",
                    ["sessionstorage"]
                )
            ) +
            "B"
        );

        form.Message(
            "@: Origin: " +
            form.Inject(
                Fetch.ModuleMethod(
                    "sz_GetStorageSize",
                    ["origin", "MB"]
                )
            ) +
            "MB"
        );

        IgnoreAll();

        Write(form.Response());
    }
}

Page Request

When page.aspx is initially requested, a new instance of ModuleStorageSizeController is created and the PageLoad method is executed.

The controller first checks whether the load query exists:

if (context.Request.Query.ContainsKey("load"))
{
    Button1_OnClick(context);
    return;
}

If the query does not exist, the server registers a GET event for the button:

form.SetGetEvent(
    "Button1",
    HtmlEvent.OnClick,
    "?load"
);

The resulting WebForms Core command is added to the page:

<!--[web-forms
EgButton1=onclick|?load
]-->

Therefore, clicking the button causes a request to the server with the load query.

Button1_OnClick Method

The Button1_OnClick method performs the main operation.

Its purpose is to create some browser-side storage data, load the JavaScript module, request storage sizes from the client, and display the results.

1. Create a WebForms Object

WebForms form = new WebForms();

The WebForms object is used to create the commands that will be sent between the server and client.

2. Create Test Storage Data

The example first creates data in several storage mechanisms.

Cookie

form.SetCookie(
    "test",
    "0123456789",
    3600
);

This creates a cookie containing the value:

0123456789

with a lifetime of 3600 seconds.

IndexedDB

form.CreateFormatStorage(
    "test",
    "0123456789"
);

This creates test data in the Format Storage implementation backed by IndexedDB.

Local Storage

form.AddCacheValue(
    "test",
    "0123456789"
);

This creates a value in Local Storage.

Session Storage

form.AddSaveValue(
    "test",
    "0123456789"
);

This creates a value in Session Storage.

These operations provide sample data so that the storage size module has data to inspect.

3. Load the JavaScript Module

The module is loaded using:

form.LoadModule(
    "/script/module/storage_size.js",
    ["sz_GetStorageSize"]
);

This tells WebForms Core to load:

/script/module/storage_size.js

and expose its:

sz_GetStorageSize

method.

The important point is that the server does not need to implement browser storage APIs itself. Instead, it requests the browser to execute the JavaScript module.

4. Call the Module Method

The server calls:

Fetch.ModuleMethod(
    "sz_GetStorageSize",
    ["cache"]
)

The first parameter is the module method name.

The second parameter contains the arguments that will be passed to the JavaScript method.

For example:

Fetch.ModuleMethod(
    "sz_GetStorageSize",
    ["localstorage"]
)

corresponds conceptually to:

sz_GetStorageSize("localstorage")

on the client.

5. Injecting the Module Method Result

The Fetch.ModuleMethod() function creates a command for executing a method of the loaded JavaScript module on the client side.

For example:

Fetch.ModuleMethod(
    "sz_GetStorageSize",
    ["cache"]
)

corresponds to calling:

sz_GetStorageSize("cache")

in the browser.

The Inject() method can be used together with Fetch.ModuleMethod() to insert the result of the client-side method execution into the generated WebForms Core command.

For example:

form.Message(
    "@: Cache: " +
    form.Inject(
        Fetch.ModuleMethod(
            "sz_GetStorageSize",
            ["cache"]
        )
    ) +
    "B"
);

In this example, the storage size is calculated on the client side by storage_size.js. The result is then injected into the client-side command generated by WebForms Core and used as part of the message displayed by WebFormsJS.

Therefore, no value is sent back to the server. The server only defines the module method call and constructs the command; the JavaScript module executes the operation in the browser and the result is used on the client side.

6. Getting Different Storage Sizes

The controller requests the size of Cache Storage:

Fetch.ModuleMethod(
    "sz_GetStorageSize",
    ["cache"]
)

Cookie:

Fetch.ModuleMethod(
    "sz_GetStorageSize",
    ["cookie"]
)

IndexedDB:

Fetch.ModuleMethod(
    "sz_GetStorageSize",
    ["indexeddb"]
)

Local Storage:

Fetch.ModuleMethod(
    "sz_GetStorageSize",
    ["localstorage"]
)

Session Storage:

Fetch.ModuleMethod(
    "sz_GetStorageSize",
    ["sessionstorage"]
)

And finally, the total Origin storage usage is requested in megabytes:

Fetch.ModuleMethod(
    "sz_GetStorageSize",
    ["origin", "MB"]
)

The second argument changes the unit returned by the module.

7. Sending the Response

The example uses:

IgnoreAll();

Write(form.Response());

IgnoreAll() prevents the View and Layout from being sent again.

Only the generated WebForms Core response is returned to the client.

The response contains the commands required to execute the module method calls and display their results.

Final Output

After clicking the button, the browser executes the requested module methods and the resulting values are displayed as messages.

The output is conceptually similar to:

Cache: 10B
Cookie: 14B
Indexed DB: 10B
Local Storage: 14B
Session Storage: 14B
Origin: 0.01MB

The exact values depend on the browser and the storage implementation.

In particular, the IndexedDB value is an approximation, while the Origin value is reported by the browser's Storage API.

Execution Flow

The complete execution flow can be summarized as:

Browser
   │
   │ Click Button
   ▼
Server
   │
   │ LoadModule()
   │ Fetch.ModuleMethod()
   │ Inject()
   ▼
WebForms Core Response
   │
   │ Sends module commands
   ▼
WebFormsJS
   │
   │ Load storage_size.js
   │
   │ Execute sz_GetStorageSize()
   ▼
Browser Storage APIs
   │
   │ Calculate storage size
   ▼
WebFormsJS
   │
   │ Use the returned value
   │ │
   │ └── Display through Message
   ▼
Browser

In this flow, the storage size is calculated entirely on the client side. The server does not receive the calculated value. Instead, the server creates the WebForms Core commands using LoadModule(), Fetch.ModuleMethod(), and Inject(). These commands are sent to WebFormsJS, which loads the module, executes sz_GetStorageSize(), obtains the value from the browser's storage APIs, and uses the returned value directly on the client side.

This demonstrates that a WebForms Core module method can perform a client-side operation and use its return value within the client-side execution of the generated WebForms Core commands, without requiring another request to the server.

Summary

The storage_size.js module demonstrates how WebForms Core can use reusable JavaScript modules to perform browser-side operations under server-side control.

The server dynamically loads the module with LoadModule() and defines calls to sz_GetStorageSize() using Fetch.ModuleMethod(). When the WebForms Core response is processed by WebFormsJS, the module is loaded in the browser and the requested method is executed using the browser's Storage APIs.

The result of the module method is used directly on the client side through the generated WebForms Core commands. No additional request is required to send the calculated storage size back to the server.

This architecture allows browser-specific functionality to remain inside reusable JavaScript modules while the server controls when the module is loaded, which methods are invoked, and how their results are used in the client-side response.

The storage_size.js example demonstrates how this approach can be used to work with Cache Storage, Cookies, IndexedDB, Local Storage, Session Storage, and Origin storage usage without requiring a large client-side framework.