Explaining WebForms in ASP.NET Core

Introduction

This article is about a new technology called WebForms Core, which is a new feature added to the CodeBehind framework. CodeBehind framework is developed by Elanat under ASP.NET Core and competes with Microsoft's default web frameworks (ASP.NET Core MVC, Razor Pages, and Blazor); so WebForms Core is not related to Microsoft.

Microsoft introduced WebForms in 2002, a simple framework for server-side web development. Although web development was simplified with Microsoft's former WebForms, in addition to many disadvantages, this structure produced additional overhead in all three areas of memory, processing, and bandwidth.

Web development has always been a complex and time-consuming process due to the presence of multiple layers of complexity and multiple technologies to manage. WebForms Core is a new technology in ASP.NET Core (under the CodeBehind framework) that manages the web development process by providing a robust infrastructure. In this structure, web controls (HTML tags on the client) are managed on the server side. This allows developers to focus on server responses without worrying about the front end. WebForms Core consists of a JavaScript library called WebFormsJS and a server-side response structure that automatically communicates with a proprietary protocol.

The new WebForms is inspired by the core technology of Microsoft's former WebForms. However, this is not a direct continuation or revival of Microsoft's WebForms in ASP.NET Core; instead, it's a modern reinterpretation of the concept, built using ASP.NET Core and other contemporary technologies, with none of its drawbacks. Compared to Microsoft's former WebForms, the functionality of the new WebForms goes beyond web controls, so WebForms Core controls all HTML page components, unlike Microsoft's former WebForms, which is limited to web controls only.

Before further explanations, we explain the functionality of WebForms Core with an example.

View page

The View below is a View file named Default.aspx created in the wwwroot directory (the default file is for the URL path). According to this file, a Controller class named MyController is assigned in the attributes section of the page, and a layout is also determined in this View file; in the head section of the layout, the following script tag has been added.

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

The above tag is called the WebFormsJS library. The WebFormsJS library is automatically created by the CodeBehind framework; if you plan to use WebFormsJS in another framework, refer to the following link to get it.

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

The Default.aspx file contains two similar form tags, and because two separate requests are made, this tag is divided into two parts to avoid sending additional data to the server.

The first form tag contains a text type input for the user's name, a number type input tag for the font size, a text type tag for the background color, and a submit button for sending data.

The second form tag contains a drop-down list that stores the names of web frameworks. Below this drop-down list, a submit button has been added to remove data from this list. In the below them, a text input for the framework name and a hidden input for the framework value have been added, under which there is a submit button to insert these values ​​in the drop-down list.

View (Default.aspx)

@page
@controller MyController
@layout "/layout.aspx"
@{
  ViewData.Add("title","WebForms Core page");
}
    <form method="post" action="/" >

        <label for="txt_Name">Your Name</label>
        <input name="txt_Name" id="txt_Name" type="text" />
        <br>
        <label for="txt_FontSize">Set Font Size</label>
        <input name="txt_FontSize" id="txt_FontSize" type="number" value="16" min="10" max="36" />
        <br>
        <label for="txt_BackgroundColor">Set Background Color</label>
        <input name="txt_BackgroundColor" id="txt_BackgroundColor" type="text" />
        <br>
        <input name="btn_SetBodyValue" type="submit" value="Click to send data" />

    </form>
    <hr>
    <form method="post" action="/" >

        <label for="ddlst_WebFrameworkList">Web-Framework List</label>
        <select name="ddlst_WebFrameworkList" id="ddlst_WebFrameworkList">
            <option value="1">ASP.NET Core MVC</option>
            <option value="2">Blazor</option>
            <option value="3">CodeBehind Framework</option>
            <option value="4">Razor Pages</option>
        </select>
        <br>
        <input name="btn_RemoveWebFramework" type="submit" value="Remove" />
        <br>
        <label for="txt_WebFrameworkName">Web-Framework Name</label>
        <input name="txt_WebFrameworkName" id="txt_WebFrameworkName" type="text" />
        <br>
        <input name="hdn_WebFrameworkValue" type="hidden" value="5"/>
        <br>
        <input name="btn_AddWebFramework" type="submit" value="Add" />

    </form>

The image below is a screenshot of the View page.

Calling the WebFormsJS library causes the onclick attribute with the PostBack(this) value to be automatically added to all submit type inputs.

As we said before, the WebFormsJS script tag has been added to the layout file below.

The following codes show a summary of the layout file codes.

Layout (layout.aspx)

@page
@islayout
@{
  string WelcomeText = "Welcome to the CodeBehind Framework!";
}
<!DOCTYPE html>
<html>
<head>
  <title>CodeBehind Framework - @ViewData.GetValue("title")</title>
  <script type="text/javascript" src="/script/web-forms.js"></script>
</head>
<body>
  @PageReturnValue
</body>
</html>

The above layout file includes the style, nav tags, header, and footer pages and is not shown here in full for better readability (except for the important ones; other additional items in this file have been removed).

Controller Class

The code below shows the Controller class. The PageLoad method is the default method in the Controller class in the CodeBehind framework, which is executed along with the Controller call. In the PageLoad method, the three received buttons are separated, and clicking on each button causes the corresponding methods to be executed.

Controller class (MyController.cs)

using CodeBehind;

public partial class MyController : CodeBehindController
{
    public void PageLoad(HttpContext context)
    {
        if (!string.IsNullOrEmpty(context.Request.Form["btn_SetBodyValue"]))
        {
            btn_SetBodyValue_Click(context);
            return;
        }

        if (!string.IsNullOrEmpty(context.Request.Form["btn_RemoveWebFramework"]))
        {
            btn_RemoveWebFramework_Click(context);
            return;
        }

        if (!string.IsNullOrEmpty(context.Request.Form["btn_AddWebFramework"]))
        {
            btn_AddWebFramework_Click(context);
            return;
        }
    }

    private void btn_SetBodyValue_Click(HttpContext context)
    {
        string Name = context.Request.Form["txt_Name"];
        string BackgroundColor = context.Request.Form["txt_BackgroundColor"];
        int FontSize = context.Request.Form["txt_FontSize"].ToNumber();

        WebForms Form = new WebForms();

        Form.SetFontSize(InputPlace.Tag("form"), FontSize);
        Form.SetBackgroundColor(InputPlace.Tag("form"), BackgroundColor);
        Form.SetDisabled(InputPlace.Name("btn_SetBodyValue"), true);

        Form.AddTag(InputPlace.Tag("form"), "h3");
        Form.SetText(InputPlace.Tag("h3"), "Welcome " + Name + "!");

        Control(Form);

        IgnoreAll();
    }

    private void btn_RemoveWebFramework_Click(HttpContext context)
    {
        string WebFrameworkValue = context.Request.Form["ddlst_WebFrameworkList"];

        WebForms Form = new WebForms();

        Form.DeleteOptionTag(InputPlace.Id("ddlst_WebFrameworkList"), WebFrameworkValue);

        Control(Form);

        IgnoreAll();
    }

    private void btn_AddWebFramework_Click(HttpContext context)
    {
        string WebFrameworkName = context.Request.Form["txt_WebFrameworkName"];
        string WebFrameworkValue = context.Request.Form["hdn_WebFrameworkValue"];

        WebForms Form = new WebForms();

        Form.AddOptionTag(InputPlace.Id("ddlst_WebFrameworkList"), WebFrameworkName, WebFrameworkValue);
        Form.IncreaseValue(InputPlace.Name("hdn_WebFrameworkValue"), 1);

        Control(Form);

        IgnoreAll();
    }
}

When the first form button is clicked, the following data is sent to the server.

txt_BackgroundColor=violet&txt_FontSize=28&txt_Name=Nicolas&btn_SetBodyValue=Click to send data.

As you can see, the data sent is the same as the one sent in the default HTML. The button of the first form has the name btn_SetBodyValue, and the presence of this name is checked in the PageLoad method of the Controller class so that if it exists in form data, the btn_SetBodyValue_Click method is executed.

In the btn_SetBodyValue_Click method, the data of user name, font size, and background color are first read through Request.Form. An instance of the WebForms class is then created. In lower codes, the font size and background color are applied to the form tag, and then the submit button is disabled. Then, an h3 tag is added at the end of the form tag, and the string "Welcome {user}!" is added inside the h3 tag. In the end, the Control method is called, along with the created instance of the WebForms class (Form) to determine the server's response. Calling the IgnoreAll method causes only Controller values ​​to be written in the response, and View and layout are ignored.

The server response is the following value.

[web-forms]
fs<form> = 28px
bc<form> = violet
sd(btn_SetBodyValue) = 1
nt<form> = h3
st<h3> = Welcome Nicolas!

The above ini file is sent by the server to the client, and then WebFormsJS receives and renders this data. The presence of the "[web-forms]" string indicates that this response contains Action Controls commands (each line after the "[web-forms]" string is named an Action Control.)

• Action control fs<form>=28px means setting the font size of the form tag to 28 pixels.
• Action control bc<form>=violet means setting the background color of the form tag to violet.
• Action control sd(btn_SetBodyValue)=1 means to disable the button named btn_SetBodyValue
• Action control nt<form>=h3 means adding the h3 tag to the form tag
• Action control st<h3>=Welcome, Nicolas! means adding the text "Welcome Nicolas!" into the h3 tag

Note: If the string "[web-forms]" is not present at the beginning of the server's response, WebFormsJS replaces the server's response in Ajax form in the body tag (can be changed).

When the remove button of the second form is clicked, the following data is sent to the server.

hdn_WebFrameworkValue=5&txt_WebFrameworkName=&ddlst_WebFrameworkList=1&btn_RemoveWebFramework=Remove

In the btn_RemoveWebFramework_Click method, the value of the current drop-down list is first read through Request.Form. An instance of the WebForms class is then created. Then, the current value of the drop-down list is removed.

The server response is the following value.

[web-forms]
doddlst_WebFrameworkList = 1

Action control doddlst_WebFrameworkList=1 means removing the option tag from a tag with the id ddlst_WebFrameworkList.

When the add button of the second form is clicked, the following data is sent to the server.

hdn_WebFrameworkValue=5&txt_WebFrameworkName=Spring Boot&ddlst_WebFrameworkList=2&btn_AddWebFramework=Add

In the btn_AddWebFramework_Click method, first, the data of the framework name and the value of the framework are read through Request.Form. An instance of the WebForms class is then created. Then, according to the values ​​of the name and received value, a new option tag is added to the drop-down list. Also, the amount of hidden input increases by one.

The server response is the following value.

[web-forms]
aoddlst_WebFrameworkList = 5 | Spring Boot
+v(hdn_WebFrameworkValue) = 1

• action control aoddlst_WebFrameworkList=5|Spring Boot means adding the option tag with "Spring Boot" text and 5 value to a tag with the id ddlst_WebFrameworkList
• action control +v(hdn_WebFrameworkValue)=1 means adding the value of a tag named hdn_WebFrameworkValue equal to 1

The image below is a screenshot of the View page after clicking on all three submit buttons.

Note. To simplify the codes, you can delete the InputPlace class and select the tags below.

Set by id

Form.DeleteOptionTag(InputPlace.Id("ddlst_WebFrameworkList"), WebFrameworkValue);

The above example can be written as follows.

Form.DeleteOptionTag("ddlst_WebFrameworkList", WebFrameworkValue);

Set by tag name

Form.AddTag(InputPlace.Tag("form"), "h3");

The above example can be written as follows.

Form.AddTag("<form>", "h3");

The code above sends the command to create an h3 tag inside the form tag with index 0 (the first form tag). To select the second form tag, you must do the following.

Form.AddTag("<form>1", "h3");

Set by name

Form.IncreaseValue(InputPlace.Name("hdn_WebFrameworkValue"), 1);

The above example can be written as follows.

Form.IncreaseValue("(hdn_WebFrameworkValue)", 1);

The code above sends the command to add one to the first input named hdn_WebFrameworkValue. In order to select the third input called hdn_WebFrameworkValue, you must do the following.

Form.IncreaseValue("(hdn_WebFrameworkValue)2", 1);

There are things like class name, query selector, multiple selection, and hierarchical determination to determine the tags, but to keep the article simple, we will not explain them.

Advantages of WebForms Core

• The server only generates the protocol code, and there is no memory overhead or processing overhead on it.
• Everything is controlled on the server side, and there is no need to develop the client side.
• Supports multiple controls, including checkboxes, radio buttons, and all HTML tags.
• ViewState is not used, and there is full control over View pages.
• HTML data remains without reload, and there is no PostBack mechanism.
• You can change View and change new View tags.
• No need to create a View, you can make a request to the server from an HTML file.
• The process of sending and receiving data from the client to the server is done automatically with AJAX.

Tips

1. It is true that using WebForms Core, there is no need for client-side scripting. However, WebForms Core also supports JavaScript functions.
2. In order to make the WebForms Core request detection process simple for the server, requests are sent by adding a header named Post-Back and the value true.
3. A web forms tag is added to the end of the HTML page for requests that are executed for the first time in the browser; this tag can be moved to any part of the page.

Fidelity to HTML

WebForms Core is HTML-faithful, and apart from adding the web-forms.js file to the head of the View page, you don't need to do anything else. The HTML will remain pure, and no extra data will be sent to the server. Sending data is not affected, and the inputs are automatically serialized (if needed) and then sent, taking into account the form tag and its action and method attributes.

WebForms Core VS Front-End Development

WebForms Core is a server-dependent technology; usually, client-side scripts or front-end frameworks request a page, web part, or service from the server using AJAX (or the Fetch method) (it is rare that they do not request from the server). In this section, we describe the advantages of using WebForms Core compared to client-side scripts or front-end frameworks:

Complexity

Setting up front-end frameworks can be complex and requires a deep understanding of JavaScript and the framework itself.

In contrast, WebForms Core simplifies web development by allowing developers to focus on server-side interactions and control of HTML elements.

Automated process vs micro scenario

Synchronizing server-side development with front-end frameworks is challenging because you have to create many server-side APIs for the server to respond to requests from front-end frameworks.

In WebForms Core, there is no need to create an API, and you provide all the responses in the Controller class or Model class on the server.

Update and maintenance issues

With every update of Front-End frameworks, many problems arise for the compatibility of the current project, and it becomes difficult to maintain the codes.

Meanwhile, WebForms Core is responsible for the compatibility between the WebForms structure on the server side and WebFormsJS on the client side; therefore, the update does not affect the compatibility of the project.

Frequent requests to the server

Creating interactive pages with front-end frameworks or client-side scripting requires that you make multiple requests to the server to get dynamic data.

However, WebForms Core requests the server only once, and the server sends Action Controls commands, and WebFormsJS executes these commands one after the other.

A different approach than traditional web development

Developing systems with Front-End frameworks requires peripheral tools that are unlike traditional web methods and are hard to learn.

But WebForms Core is an HTML-faithful construct, and based on form tag attributes, it submits data exactly as it would in HTML.

Installing dependencies and complex configuration

The incompatibility of dependencies in different versions and the need for complex configuration make the development of systems with Front-End frameworks challenging.

Meanwhile, to use WebForms Core, just need to add the WebFormsJS script tag to the head part of the HTML page.

Long development

Development with Front-End frameworks requires mastery of JavaScript and internal structures (such as JSX), and the software development process is long.

But development with WebForms Core is done quickly on the server side and there is no need for Front-End development.

Debugging is hard

The amount of code in Front-End frameworks is huge and due to the nature of Front-End frameworks that manage the DOM on the client side, it is very difficult to find errors.

However, the Action Controls commands in WebForms Core have already been tested on the server and client side, so the possibility of errors is very low.

Conclusion

WebForms Core is an advanced system that creates a strong infrastructure for interacting with web controls on the server side, and its application makes the process of building and developing web applications simple, scalable, and efficient. The functionality of WebForms Core is similar to the old Microsoft WebForms, however, it is just a nostalgic reminder of the old Microsoft WebForms and offers a different and modern approach with more flexibility.

In this article, we introduced WebForms Core with a simple example; the WebForms Core technology in the CodeBehind framework includes more, more diverse, and advanced features. More features will be added to WebForms Core with future releases.

Reference

• CodeBehind Framework in GitHub
• WebFormsJS in GitHub