DEV Community

Elanat Framework
Elanat Framework

Posted on

drop_down_menu.js Module in WebForms Core

#javascript #frontend #dotnet #webformscore

What is WebForms Core?

WebForms Core is a modern technology from Elanat, introduced in 2024, that is actually a new multi-paradigm in web development. This technology is a two-way protocol that establishes automatic communication between a server-side class called WebForms (available for various programming languages ​​such as C#, PHP, Python, and Java) and a client-side JavaScript library called WebFormsJS. Its main goal is to manage HTML elements and manipulate the DOM directly from the server, in a way that largely eliminates the need for extensive front-end development and writing complex client-side code. In this model, instead of sending large amounts of data or the entire HTML structure, the server sends concise commands in the form of INI format to the client for precise and targeted updates, which leads to reduced bandwidth consumption, near-zero latency, and high server scalability. This approach addresses the common challenges of front-end framework complexity, high dependencies, and large node_modules, and encourages developers to focus more on server-side logic.

How to use WebForms Core technology?

Two steps are required:
1- On the client side: Add the WebFormsJS script to your HTML page.

<script type="module" src="/script/web-forms.js"></script>
Enter fullscreen mode Exit fullscreen mode

Get the WebFormsJS script from the following link:
https://github.com/webforms-core/Web_forms/blob/elanat_framework/web-forms.js

2- On the server side: Import the WebForms class for your programming language.
Get the WebForms class associated with the server programming language from the following link:
https://github.com/webforms-core/Web_forms_classes

Server-side JavaScript Module Loading Feature

One of the standout features of WebForms Core is the ability to dynamically load JavaScript modules from the server. This feature revolutionizes the way client code is managed and executed and offers several benefits:

Benefits of server-side JS module loading:

  1. Intelligent Lazy Loading: JavaScript modules are loaded only when needed
  2. Better memory management: Prevents unnecessary code loading in the browser
  3. Increased performance: Reduces initial page load time
  4. Higher security: Better control over code executed on the client side
  5. Maintainability: Centralized module management on the server

How it works:

WebForms Core loads JavaScript files from the specified path using the LoadModule() method and then makes specific functions of that module available. This mechanism allows for dynamic interaction between the server and the client.

Introducing the example: DropDown Menu module

Exploring the drop_down_menu.js module

The dropdown menu module is a practical example of WebForms Core capabilities that demonstrates how complex UI components can be created by working together on the server and client. This module is available at the following GitHub address:

Module address: https://github.com/webforms-core/Web_forms/blob/elanat_framework/module/menu/drop_down_menu.js

Main methods of this module:

  1. ddm_AddItem(text, url, level): To add new items to the menu
  • The level parameter specifies the hierarchical structure of the menu

  1. ddm_ResetMenu(): To clear all menu items and reset it

  2. ddm_Render(className, appendMenuCSS): To render the menu and generate HTML

  • Automatically injects the required CSS

  1. ddm_GetMenuCSS(className): To get the menu CSS styles

  2. ddm_InjectMenuCSS(className): To inject styles into the head section Page

Example of use in server (C#):

This example was created using the Elanat team's backend framework, CodeBehind. You can use WebForms Core technology in all popular web programming languages.

Note: WebForms Core technology and the CodeBehind framework are similar in naming to Microsoft's former WebForms; however, they are both powerful, modern systems that offer advanced functionality and operate differently from Microsoft's WebForms.

Project Root

├── WebForms.cs          // WebForms Class in Server
├── Controller.cs
├── wwwroot
│   ├── page.aspx
│   └── script
│       ├── web-forms.js // WebFormsJS in Client
│       └── module
│           └── drop_down_menu.js
Enter fullscreen mode Exit fullscreen mode

View (page.aspx)

@page
@controller ModuleDropDownMenuController
<!DOCTYPE html>
<html>
<head>
    <title>DropDown Menu Module</title>
    <script type="module" src="/script/web-forms.js"></script>
</head>
<body>
    <h1>WebForms Core - DropDown Menu Module</h1>
    <button id="Button1">Click me!</button>
    <p id="pTag">
    </p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Server Response (Controller.cs)

using CodeBehind;

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

        WebForms form = new WebForms();

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

        Control(form);
    }

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

        form.LoadModule("/script/module/drop_down_menu.js", ["ddm_AddItem", "ddm_Render"]);

        form.CallModuleMethod("ddm_AddItem", ["Home", "/"]);
        form.CallModuleMethod("ddm_AddItem", ["Product", "#"]);
        form.CallModuleMethod("ddm_AddItem", ["Laptop", "/laptops", "-"]);
        form.CallModuleMethod("ddm_AddItem", ["Gaming", "/laptops/gaming", "--"]);
        form.CallModuleMethod("ddm_AddItem", ["Office", "/laptops/office", "--"]);
        form.CallModuleMethod("ddm_AddItem", ["Mobile", "/mobiles", "-"]);
        form.CallModuleMethod("ddm_AddItem", ["Budget", "/mobiles/budget", "--"]);
        form.CallModuleMethod("ddm_AddItem", ["Midrange", "/mobiles/midrange", "--"]);
        form.CallModuleMethod("ddm_AddItem", ["Flagship", "/mobiles/flagship", "--"]);
        form.CallModuleMethod("ddm_AddItem", ["Contact", "/contact"]);
        form.CallModuleMethod("ddm_AddItem", ["About", "/about"]);

        form.SetText("pTag", Fetch.ModuleMethod("ddm_Render"));

        Control(form, true);
    }
}
Enter fullscreen mode Exit fullscreen mode

Page request

When the "page.aspx" page is requested by the user's browser, a new instance of the controller named "ModuleDropDownMenuController" is created and the PageLoad method is called.

In this method, the presence of the "action" query in the request is first checked, if it is present, the "Button1_OnClick" method is executed.

Next, a new instance of the WebForms class is created and a click event is requested from the server for the HTML button with id "Button1" and the query "?action" is assigned.

Calling the Control method causes the following HTML comment (containing the WebForms commands) to be added to the "page.aspx" page.

...
</body>
</html>
<!--[web-forms]
EgButton1=onclick|?load-->
Enter fullscreen mode Exit fullscreen mode

Button1_OnClick method

Purpose of the function

This function handles the click event on the Button1 button and creates a drop-down menu and displays it on the screen.

Steps to execute the function:

1. Create a WebForms object 

WebForms form = new WebForms();
Enter fullscreen mode Exit fullscreen mode

A new instance of the WebForms class is created that handles the communication with the client side.

2. Load the JavaScript module 

form.LoadModule("/script/module/drop_down_menu.js", ["ddm_AddItem", "ddm_Render"]);
Enter fullscreen mode Exit fullscreen mode

This command does two things:

  • Loads the drop_down_menu.js file from the specified path on the client side
  • Makes the two functions ddm_AddItem and ddm_Render available from this module

3. Adding menu items 

form.CallModuleMethod("ddm_AddItem", ["Home", "/"]);
form.CallModuleMethod("ddm_AddItem", ["Product", "#"]);
// and more...
Enter fullscreen mode Exit fullscreen mode

Each of these commands adds an item to the menu. Parameters in order:

  1. Item text (e.g. "Home")
  2. Link address (e.g. "/")
  3. Level in hierarchy (optional)

How ​​to display hierarchy:

  • No parameter: Main item
  • "-": Level 1 submenu
  • "--": Level 2 submenu
  • "---": Level 3 submenu and so on

4. Rendering and displaying the menu 

form.SetText("pTag", Fetch.ModuleMethod("ddm_Render"));
Enter fullscreen mode Exit fullscreen mode

This command:

  1. Calls the ddm_Render module function
  2. Gets the HTML output of the menu
  3. Replaces the content of the element with id="pTag" with the HTML code of the menu

5. Sending commands to the client 

Control(form, true);
Enter fullscreen mode Exit fullscreen mode

Note: Setting the value "true" as the second argument to the 'Control' function will prevent View and Layout from being re-sent in the response.

Sends all WebForms commands set so far to the client as an INI-formatted response.

Final output in browser:

After clicking the button, the following commands are automatically sent from the server to the client in INI format.

Action Controls

[web-forms]
Ml=/script/module/drop_down_menu.js|ddm_AddItem|ddm_Render
lM=ddm_AddItem|Home|/
lM=ddm_AddItem|Product|#
lM=ddm_AddItem|Laptop|/laptops|-
lM=ddm_AddItem|Gaming|/laptops/gaming|--
lM=ddm_AddItem|Office|/laptops/office|--
lM=ddm_AddItem|Mobile|/mobiles|-
lM=ddm_AddItem|Budget|/mobiles/budget|--
lM=ddm_AddItem|Midrange|/mobiles/midrange|--
lM=ddm_AddItem|Flagship|/mobiles/flagship|--
lM=ddm_AddItem|Contact|/contact
lM=ddm_AddItem|About|/about
stpTag=@cMddm_Render
Enter fullscreen mode Exit fullscreen mode

Created hierarchical structure

Home
Product
  - Laptop
    - Gaming
    - Office
  - Mobile
    - Budget
    - Midrange
    - Flagship
Contact
About
Enter fullscreen mode Exit fullscreen mode

Screenshot

The following screenshot shows the rendered dropdown menu after clicking the button.

DropDown Menu

Summary

WebForms Core offers a new approach to web application development by providing the ability to dynamically load JavaScript modules from the server. The example of the drop-down menu module is a good example of how this feature can be used to create interactive and dynamic components.

This architecture not only increases the performance of applications, but also simplifies their maintenance and development. By separating business logic on the server and intelligently managing client resources, WebForms Core provides an ideal solution for modern web projects.

The complete drop-down menu module, along with server and client code, is available from the GitHub repository and can be used as a template for developing other custom modules.

Top comments (0)