JavaScript VS WebForms Core Technology

WebForms Core technology is a new feature in the CodeBehind framework. By using WebForms Core, all HTML DOMs are controlled on the server and there is no need to develop the front (scripting on the client side). In this technology, server only generates commands in INI format and these commands are rendered on the client side; therefore, there is no pressure on the server.

In the video, the functionality of WebForms Core technology is shown.

Example: Number of entered characters

In this article, we want to compare WebForms Core technology with JavaScript. Our example is an HTML page that has a textarea inside it, and when characters are entered in it, the number of characters in the textarea is displayed.
In this example, the performance and appearance of the WebForms Core page is the same compared to the corresponding JavaScript page.

The image below shows how this example works.

WebForms Core

The page below is a View created under the CodeBehind framework. On this page, there is a textarea where the onkeyup event requests the path "/web-forms.aspx?length=true" by means of the GetBack method. According to the initialization of the Controller in the lower View page, the requests of the path "/web-forms.aspx" will cause the ContentController to be executed.

View (web-forms.aspx)

@page
@controller ContentController
@layout "/layout.aspx"
@{
  ViewData.Add("title","WebForms Core page");
}
<textarea name="txt_Content" onkeyup="GetBack('/web-forms.aspx?length=true')"></textarea><br><br>
<b>Text length: <span>0</span></b>

In the Controller class, the existence of the length query is checked first. An instance of the WebForms class is then created. The SaveValueLength method saves the text length of the tag named txt_Content temporarily. Then the stored value is placed inside the span tag. Finally, the current commands are cached. Calling the Control method along with the created instance of the WebForms class causes commands to be sent to the client.
If we do not cache the server commands, every time a character is entered in the textarea, a new request will be sent to the server.

Controller

using CodeBehind;

public partial class ContentController : CodeBehindController
{
    public void PageLoad(HttpContext context)
    {
        if (context.Request.Query["length"].Has())
        {
            WebForms form = new WebForms();

            form.SaveValueLength("(txt_Content)");
            form.SetText("<span>", Fetch.Saved());

            form.SetCache();

            Control(form, true);
        }
    }
}

Note: In WebForms Core technology, a JavaScript library called WebFormsJS provides the communication conditions between the server and the client.

The following codes are called Action Controls, which are generated on the server and rendered on the client side by the WebFormsJS library. Due to the addition of the cache command, these commands are called once from the server and are stored in the browser's cache for the next time.

Server code (Action Controls)

[web-forms]
@ge(txt_Content)=.
st<span>=@cl.
cd=*

JavaScript

Here's the functionality of the WebForms Core example back to JavaScript. In the lower View there is a textarea whose onkeyup event calls the setTextLength method in JavaScript.

@page
@layout "/layout.aspx"
@{
  ViewData.Add("title","JavaScript page");
}
<textarea name="txt_Content" onkeyup="setTextLength()"></textarea><br><br>
<b>Text length: <span>0</span></b>

<script type="text/javascript" src="/script/length.js"></script>

The script tag above calls the length.js file. The following code is located in the length.js file.

function setTextLength() {
    var text = document.querySelector('textarea[name="txt_Content"]').value;
    document.querySelectorAll('span')[0].textContent = text.length;
}

According to the above codes, the length of the textarea is placed inside the span tag.

Comparison

In the JavaScript example, the length.js file is requested from the server. But in WebForms Core, Action Controls commands are requested only when the user adds a value in the textarea.
It is interesting to know that the processing required to create Action Controls commands on the server side is almost the same as the processing required to call a static file on the server.

Conclusion

In some scenarios like the example in this article, WebForms Core outperforms client-side scripting in every way. Also, in some other scenarios, scripting or using front-end frameworks perform better. WebForms Core does not want to replace JavaScript, this technology can be combined with JavaScript and simplify the development process of web-based systems.

Related links

CodeBehind on GitHub:
https://github.com/elanatframework/Code_behind

Get CodeBehind from NuGet:
https://www.nuget.org/packages/CodeBehind/

CodeBehind page:
https://elanat.net/page_content/code_behind