WebForms Core

WebFormsJS

WebFormsJS is the client-side JavaScript library of WebForms Core. It provides the client-side execution engine that processes WebForms Core responses from the server and applies the requested changes to the HTML document.

WebFormsJS is designed to work with server-side WebForms class implementations. Developers can use WebForms Core to manipulate the client-side DOM from server-side code without having to write JavaScript for every UI interaction.

WebFormsJS is loaded as an ES module directly in the HTML page:

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

The library can be used with the minified version as well:

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

WebFormsJS receives and executes WebForms Core commands on the client.

Developers can customize the WebForms Options to match their project structure and preferred implementation approach.

WebForms Core

WebForms Core is a server-oriented web development technology that allows developers to build interactive web applications using server-side programming languages while keeping the client-side layer lightweight.

The server uses a WebForms class implementation for the selected programming language to generate WebForms Core responses. WebFormsJS receives these responses in the browser and executes the corresponding commands on the HTML DOM.

Unlike web frameworks and tools that rely on data flow, WebForms Core uses a command-driven flow and a stateless server architecture. It is available for all popular programming languages used for web development, allowing developers to use the same programming model across different languages and platforms.

WebForms Core consists of two main components:

1. Commander: The WebForms class used to define and generate WebForms Core commands
2. Executor: The WebFormsJS library that receives and executes those commands in the browser

WebForms Core is a technology developed by Elanat.

The following example demonstrates a simple contact form using WebFormsJS on the client and the WebForms class on the server.

HTML page

<!DOCTYPE html>
<html>
<head>
    <title>WebForms Core Example</title>
    <script type="module" src="/script/web-forms.js"></script>
</head>
<body>
    <h1>Contact Us</h1>

    <form action="/contact" method="post">
        Name:<input type="text" name="name" required><br>
        Email:<input type="email" name="email" required><br>
        Message:<br>
        <textarea name="message" rows="4" cols="50" required></textarea><br>
        <input type="submit" name="button" value="Submit">
    </form>
</body>
</html>

On the server side, you need the WebForms class implementation for your server-side programming language.

C# example in CodeBehind framework

using CodeBehind;

public partial class ContactController : CodeBehindController
{
    public void PageLoad(HttpContext context)
    {
        if (context.Request.IfForm().ContainsKey("button"))
            Button_Click(context);
    }

    private void Button_Click(HttpContext context)
    {
        // Code for adding the contact to the database
        // ...

        WebForms form = new WebForms();

        string name = context.Request.Form["name"];

        form.AddTag("<form>", "h3");
        form.SetBackgroundColor("<h3>", "green");
        form.SetText("<h3>", name + "! Your message was sent successfully.");
        form.Delete("<h3>");
        form.AssignDelay(3000);
        form.SetDisabled("(button)", true);

        Write(form.Response());

        IgnoreViewAndModel = true;
    }
}

In this example, after the button is clicked, an instance of the WebForms class is created. A new h3 tag is added inside the form, the submission message is displayed in it, and the tag is removed after a 3-second delay. The submit button is also disabled. Finally, the generated WebForms Core response is returned to the client using the Response() method.

Note: When WebForms Core commands need to be used during the initial page load or sent together with the HTML document, you can use ExportToHtmlComment() instead of Response(). It embeds the generated WebForms Core commands in an HTML comment, allowing WebFormsJS to detect and execute them when the HTML document is loaded.

For example, the server can generate WebForms Core commands during the initial page load:

public void PageLoad(HttpContext context)
{
    if (context.Request.IfForm().ContainsKey("button"))
    {
        Button_Click(context);
        return;
    }

    WebForms form = new WebForms();

    form.SetBackgroundColor("<body>", "lightblue");

    Write(form.ExportToHtmlComment());
}

What is sent from the client to the server?

In WebForms Core, data is sent as if it were an HTML form submission.

message=Please send your product price list to my email account.&[email protected]&name=Adriano&button=Submit

What does the server send to the client?

The server response uses a syntax similar to the INI format.

[web-forms]
sd(button)=1
nt<form>=h3
bc<h3>=green
st<h3>=Adriano! Your message was sent successfully.
:3000)de<h3>=1

Installation

Installation via Package

npm package: https://www.npmjs.com/package/webformsjs

CLI:

npm install webformsjs

Download / Copy the File

• WebFormsJS on Elanat: https://elanat.net/webforms-js
• WebFormsJS on GitHub: https://github.com/webforms-core/WebFormsJS