New Repository on GitHub, WebFormsJS is Here!

This content originally appeared on DEV Community and was authored by elanatframework

WebFormsJS is a JavaScript library that provides the infrastructure for interacting with web controls in the CodeBehind framework; this allows developers to easily manage HTML tags on the server-side.

A New Architecture for Efficient Web Development

Web development has always been a complex and time-consuming process, with multiple layers of complexity and numerous technologies to manage. WebFormsJS is a new JavaScript library that simplifies this process by providing a robust infrastructure for interacting with web controls (HTML tags) on the server-side, allowing developers to focus on server responses without worrying about the front-end.

Using WebFormsJS eliminates the need for front-end development to a large extent. You will no longer need to use front-end frameworks such as React, Angular and Vue, and you will not even need to work with JavaScript on the front-end. Please note that the simultaneous use of WebFormsJS with front-end frameworks or JavaScript also gives many advantages to your project.

Please see the following example:

This is an HTML page that requests a page from the server to add its contents inside a div tag with the id MyTag.

Simple AJAX whih JavaScript

<!DOCTYPE html>
<html>
<head>
    <script>
    function loadDoc()
    {
        const xhttp = new XMLHttpRequest();
        xhttp.onload = function()
        {
            document.getElementById("MyTag").innerHTML = this.responseText;
            document.body.style.backgroundColor = "#409354";
            document.getElementsByTagName("h2")[0].setAttribute("align","right");
        }
        xhttp.open("GET", "/AjaxPage.aspx");
        xhttp.send();
    }
    </script>
</head>
<body>
<div id="MyTag"></div>
<div>
    <h2>Request from server</h2>
    <button type="button" onclick="loadDoc()">Set Content</button>
</div>

</body>
</html>

According to the above codes, we have an HTML page in which there is a JavaScript method to receive the response of a page in AJAX form.

Executing the JavaScript method causes three things to happen:
1- Finding the content of a page from the server and adding it to a part of the HTML page
2- Changing the background color
3- Set right to left for one of the tags

Note: options 2 and 3 are done on the client side, and if we want to change them from the server, we need to request the server twice more or we have to retrieve all three options with one request in a complicated process.

In order to support WebFormsJS, we rewrote the above HTML page as below.

Using WebFormsJS

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="/script/web-forms.js"></script>
</head>
<body>

<form method="GET" action="/AjaxPage.aspx">
    <div id="MyTag"></div>
    <div>
        <h2>Request from server</h2>
        <input name="MyButton" type="submit" value="Set Content" />
    </div>
</form>

</body>
</html>

We copied the web-forms.js file from the link below and saved it in the script/web-forms.js path.

https://github.com/elanatframework/Web_forms/blob/elanat_framework/web-forms.js

When we request the page from the server, the server sends the following response.

Server response

[web-forms]
stMyTag=Server response text
bc<body>=#409354
ta<h2>=right

We at Elanat team call this structure Action Controls. Action Controls are WebFormsJS received codes that are received in INI format. WebFormsJS automatically detects whether the server response has Action Controls or not. If the server's response is based on the structure of an INI file that starts with [web-forms], it will process the Action Controls, otherwise it will replace the server's response in the form of AJAX on the page.

Line 1: stMyTag=Server response text Here, the first two characters are st, which means to set the text, and then it is specified that it should be applied to a tag with the id MyTag, and after the equal character (=) there is the received text.
Line 2: bc<body>=#409354 Here, the first two characters are bc, which means the background color, and then it is specified that it should be applied to the body tag, and after the equal character (=) there is the color value.
Line 3: ta<h2>=right Here, the first two characters are ta, which means text align, and then it is determined that it will be applied to a tag named li, and after the equal character (=) there is a value of right which means right to left.

WebFormsJS on the server-side

If you use a flexible back-end framework, you can easily create a process for generating Action Controls; otherwise, you can ask the owners or developers to rewrite the core of the back-end framework or create a new module to support WebFormsJS.

An example of using WebFormsJS in the CodeBehind framework

We create a new View in which there is an input of select type; we want to add new option values in select, so we put two textbox input for the name and value of the new option in the View, and we also create a checkbox input for whether the new option is selected or not in this View.

View (Form.aspx)

@page
@controller FormController
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Send Form Data</title>
    <script type="text/javascript" src="/script/web-forms.js"></script>
</head>
<body>
    <form method="post" action="/Form.aspx">

        <label for="txt_SelectName">Select name</label>
        <input name="txt_SelectName" id="txt_SelectName" type="text" />
        <br>
        <label for="txt_SelectValue">Select value</label>
        <input name="txt_SelectValue" id="txt_SelectValue" type="text" />
        <br>
        <label for="cbx_SelectIsSelected">Select Is Selected</label>
        <input name="cbx_SelectIsSelected" id="cbx_SelectIsSelected" type="checkbox" />
        <br>
        <label for="ddlst_Select">Select</label>
        <select name="ddlst_Select" id="ddlst_Select">
            <option value="1">One 1</option>
            <option value="2">Two 2</option>
            <option value="3">Three 3</option>
            <option value="4">Four 4</option>
            <option value="5">Five 5</option>
        </select>
        <br>
        <input name="btn_Button" type="submit" value="Click to send data" />

    </form>
</body>
</html>

We first activate the IgnoreViewAndModel attribute; by doing this, we prevent the View page from returning. Then we create an instance of the WebForms class and add a new value in the drop-down list according to the values sent through the Form method. Finally, we must place the created instance of the WebForms class inside the Control method.

Controller (FormController)

public partial class FormController : CodeBehindController
{
    public void PageLoad(HttpContext context)
    {
        if (!string.IsNullOrEmpty(context.Request.Form["btn_Button"]))
            btn_Button_Click(context);
    }

    private void btn_Button_Click(HttpContext context)
    {
        IgnoreViewAndModel = true;

        Random rand = new Random();
        string RandomColor = "#" + rand.Next(16).ToString("X") + rand.Next(16).ToString("X") + rand.Next(16).ToString("X") + rand.Next(16).ToString("X") + rand.Next(16).ToString("X") + rand.Next(16).ToString("X");

        WebForms Form = new WebForms();

        string SelectValue = context.Request.Form["txt_SelectValue"];
        string SelectName = context.Request.Form["txt_SelectName"];
        bool SelectIsChecked = context.Request.Form["cbx_SelectIsSelected"] == "on";

        Form.AddOptionTag(InputPlace.Id("ddlst_Select"), SelectName, SelectValue, SelectIsChecked);
        Form.SetBackgroundColor(InputPlace.Tag("body"), RandomColor);

        Control(Form);
    }
}

Each time the button is clicked, new values are added to the drop-down list and the background changes to a random color.

This is a simple example of CodeBehind framework interaction with WebFormsJS.

These features will be available in version 2.9 of the CodeBehind framework. In the coming days, version 2.9 of the CodeBehind framework will be released.

Advantages of WebFormsJS over using JavaScript and AJAX:

Simplified code: WebFormsJS provides a simpler and more concise way of interacting with web controls on the server-side, reducing the complexity of code and making it easier to maintain.
Automatic form serialization: WebFormsJS automatically serializes form data, eliminating the need to manually serialize and deserialize data using techniques like JSON or XML.
Progress bar: WebFormsJS includes a progress bar that displays the amount of data sent on the screen, providing a more engaging user experience.
Server-Side processing: WebFormsJS allows for server-side processing of form data, enabling more complex logic and validation to be performed on the server-side.
Support for multiple controls: WebFormsJS supports multiple controls, including checkboxes, radio buttons, select boxes, and text inputs, making it easy to interact with multiple controls on the server-side.
Customizable: WebFormsJS provides customizable options, such as the ability to set the progress bar display, error messages, and other settings.
Robust infrastructure: WebFormsJS provides a robust infrastructure for interacting with web controls on the server-side, making it suitable for large-scale applications.

In contrast, using JavaScript and AJAX:

Requires manual serialization and deserialization of form data
Does not provide a progress bar or error handling
Does not support multiple controls or server-side processing
Is more verbose and complex to use

Comparison with Frontend Frameworks

Frontend frameworks like React, Angular, and Vue have gained popularity in recent years for their ability to create dynamic and interactive user interfaces. However, compared to WebFormsJS, they have some key differences:

Complexity: Frontend frameworks can be complex to set up and require a deep understanding of JavaScript and the framework itself. In contrast, WebFormsJS simplifies web development by allowing developers to focus on server-side interactions and control the HTML elements.

Performance: While frontend frameworks offer high performance and efficiency, WebFormsJS also boasts high performance and low bandwidth consumption. It efficiently manages server responses and controls HTML tags, reducing the complexity of web development.

Customization: Frontend frameworks offer extensive customization options and flexibility to create unique user interfaces. WebFormsJS also provides customization options, such as postback, progress bar, and script extraction, but focuses more on server-side interaction.

Action Controls: WebFormsJS introduces the concept of Action Controls, which are received in INI format to define specific actions for HTML tags. This provides a clear and structured way to handle server responses and modify controls on the page.

Conclusion

WebFormsJS is a powerful JavaScript library that simplifies web development by providing a robust infrastructure for interacting with web controls on the server-side. Its advanced system, low bandwidth consumption, and customization options make it an attractive choice for developers looking to build efficient and scalable web applications.

A New Architecture for Efficient Web Development

WebFormsJS on the server-side

Advantages of WebFormsJS over using JavaScript and AJAX:

Comparison with Frontend Frameworks

Conclusion

Related links

Related Posts