WebFormJS Legend Begins, React Will Die?

CodeBehind is a web development framework published by Elanat. If you pay attention to the structure and naming in the CodeBehind framework, you will realize that this new framework is a nostalgia of Microsoft’s former Web-Forms. Not long ago, version 2.9 of the CodeBehind framework was released with the new Web-Forms feature. The new Web-Forms functions similarly to Microsoft’s former Web-Forms, but with a different approach. The new Elanat Web-Forms is an automatic two-way mechanism on the server and client side that communicate with each other through a dedicated protocol.

In this article, we discuss this ambitious approach of Elanat in the CodeBehind framework then we compare CodeBehind WebForms with React.

We will quickly show you an example to see the wonderful mechanism of WebForms in the CodeBehind framework.

Example (Login Page)

The code below is an example of a View file for user login.
This file contains a form tag that contains a field for name and a field for password. There is also a submit button to send data to the server.

View – login.aspx

@page
@controller LoginController
@layout "/layout.aspx"
@{ ViewData.Add("title","Login to admin");
} <div class="container"> <form action="/login.aspx" method="post"> <label for="txt_Name">Username:</label> <input type="text" id="txt_Name" name="txt_Name" placeholder="Enter your username"><br><br> <label for="txt_Password">Password:</label> <input type="password" id="txt_Password" name="txt_Password" placeholder="Enter your password"><br><br> <input type="submit" name="btn_Button" value="Login"> </form> </div>

The new WebForms feature is available in the CodeBehind framework using WebFormsJS.
WebFormsJS is a JavaScript library owned by Elanat. WebFormsJS is created automatically by the CodeBehind framework in the root/script/web-forms.js path.

Note: Working with WebForms in the CodeBehind framework requires adding WebFormsJS on the client side. In the header of the layout.aspx file, the following script tag has been added in the head section.
<script type="text/javascript" src="/script/web-forms.js"></script>

The code below is the login page controller class. The Controller class is LoginController, which inherits from CodeBehindController. This class handles the logic for the login form and it will show the link to the admin page to the user if the credentials are correct.

Controller

using CodeBehind; public partial class LoginController : 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) { IgnoreAll(); string Name = context.Request.Form["txt_Name"]; string Password = context.Request.Form["txt_Password"]; WebForms Form = new WebForms(); if (string.IsNullOrEmpty(Name)) { Form.DeleteValue(InputPlace.Id("txt_Name")); Form.SetBackgroundColor(InputPlace.Id("txt_Name"), "violet"); Form.SetBackgroundColor(InputPlace.Id("txt_Name"), "unset"); Form.SetDelay(5); Form.AddTag(InputPlace.Tag("form"), "h4"); Form.SetText(InputPlace.Tag("h4", -1), "Please enter the name."); Form.SetTextColor(InputPlace.Tag("h4", -1), "violet"); Form.Delete(InputPlace.Tag("form").AppendPlace(InputPlace.Tag("h4", -1))); Form.SetDelay(5); } if (string.IsNullOrEmpty(Password)) { Form.DeleteValue(InputPlace.Id("txt_Password")); Form.SetBackgroundColor(InputPlace.Id("txt_Password"), "violet"); Form.SetBackgroundColor(InputPlace.Id("txt_Password"), "unset"); Form.SetDelay(5); Form.AddTag(InputPlace.Tag("form"), "h4"); Form.SetText(InputPlace.Tag("h4", -1), "Please enter the password."); Form.SetTextColor(InputPlace.Tag("h4", -1), "violet"); Form.Delete(InputPlace.Tag("form").AppendPlace(InputPlace.Tag("h4", -1))); Form.SetDelay(5); } if (string.IsNullOrEmpty(Name) || string.IsNullOrEmpty(Password)) { Control(Form); return; } if ((Name == "admin") && (Password == "123")) { Form.Delete(InputPlace.Tag("form")); // Or Form.SetDisabled(InputPlace.Name("btn_Button"), true); Form.AddTag(InputPlace.Class("container"), "h3"); Form.SetText(InputPlace.Tag("h3", -1), "The entered information is correct. Hello " + Name + "! you can select the link below to go to the admin page"); Form.SetTextColor(InputPlace.Tag("h3", -1), "green"); Form.AddTag(InputPlace.Class("container"), "br"); Form.AddTag(InputPlace.Class("container"), "a", "a_AdminPage"); Form.SetText(InputPlace.Id("a_AdminPage"), "Admin page"); Form.SetAttribute(InputPlace.Id("a_AdminPage"), "href", "/admin"); } else { Form.DeleteValue(InputPlace.Id("txt_Name")); Form.SetBackgroundColor(InputPlace.Id("txt_Name"), "red"); Form.SetBackgroundColor(InputPlace.Id("txt_Name"), "unset"); Form.SetDelay(5); Form.DeleteValue(InputPlace.Id("txt_Password")); Form.SetBackgroundColor(InputPlace.Id("txt_Password"), "red"); Form.SetBackgroundColor(InputPlace.Id("txt_Password"), "unset"); Form.SetDelay(5); Form.AddTag(InputPlace.Tag("form"), "h4"); Form.SetText(InputPlace.Tag("h4", -1), "The name or password is incorrect"); Form.SetTextColor(InputPlace.Tag("h4", -1), "red"); Form.Delete(InputPlace.Tag("form").AppendPlace(InputPlace.Tag("h4", -1))); Form.SetDelay(5); } Control(Form); }
}

The PageLoad method is called when the page is loaded. It checks if the form has been submitted by checking if the btn_Button parameter is not null or empty. If it is, it calls the btn_Button_Click method.

This method handles the login form submission. It gets the values of txt_Name and txt_Password from the form data and performs the following actions:

• Validation: It checks if both txt_Name and txt_Password are empty. If either of them is empty, it sets a validation message and focuses on the corresponding input field.
• Login Logic: If both fields are not empty, it checks if the username is “admin” and the password is “123”. If true, it displays a success message and adds a link to the admin page.
• Error Handling: If the username or password is incorrect, it sets error messages for both fields and displays an error message.

When you submit the form with an incorrect name and password (if the name is not “admin” and the password is not “123”), this happens:

• The controller receives the form data and validates it.
• Clears the values ​​of both input fields and changes their background color to red.
• It displays an error message at the bottom of the form with red text.

What is sent to the server?
The data that is sent to the server is done through WebFormsJS as AJAX. No additional data is sent to the server and the process of sending data through the form tag in HTML remains intact.

Example of sending data:

txt_Name=Alfred&txt_Password=xyz&btn_Button=Login

What is the server response?
The server only sends commands through the Action Controls protocol and does not need to return the current page.

Example server response:

[web-forms]
dvtxt_Name=1
bctxt_Name=red
→5)bctxt_Name=unset
dvtxt_Password=1
bctxt_Password=red
→5)bctxt_Password=unset
nt<form>=h4
st<h4>-1=The name or password is incorrect
tc<h4>-1=red
→5)de><form>|<h4>-1=1

The codes above are Action Controls that we explain line by line below:

• [web-forms]: Specifies that the response is Action Controls.
• dvtxt_Name=1: the text entered by the user in the name input is deleted.
• bctxt_Name=red: The background of the input section turns red.
• →5)bctxt_Name=unset: After 5 seconds, the background of the name input becomes empty.
• dvtxt_Password=1: the text entered by the user in the password input is deleted.
• bctxt_Password=red: The background of the password input turns red.
• →5)bctxt_Password=unset: After 5 seconds, the background of the password input becomes empty.
• nt<form>=h4: An h4 tag is created at the end of the form tag.
• st<h4>-1=The name or password is incorrect: The text “The name or password is incorrect” is placed inside the last h4 tag (the tag created above).
• tc<h4>-1=red: The text color of the last h4 tag (the tag created above) will be red.
• →5)de><form>|<h4>-1=1: After 5 seconds, the last h4 tag (the one created above) inside the form tag will be removed.

The video below shows how this example works

In this example, everything is controlled from the server side and there is no need for scripting on the client side. Only the web-forms.js script path is added in the Layout file in the head section. The process of sending data is the same as in HTML mode.

A few points about WebForms in the CodeBehind framework:

• There is no pressure on the server side and only protocol codes are created
• The bandwidth consumption is very low
• WebFormJS is faithful to HTML and works exactly like HTML in the form submit structure and data submission
• Everything is controlled on the server side and there is no need to develop the client side
• WebForms in the CodeBehind framework can go beyond these simple examples
• This is the initial version of WebFormJS and will have more features in future versions

CodeBehind WebForms VS React

Automatic process versus micro-scenario
Synchronizing server-side development with React is challenging when you use React because you have to create a lot of server-side APIs for the server to respond to React requests.
In the CodeBehind framework, you give all the answers in the Controller class.

Update and maintenance problems
With each React update, many problems arise for the compatibility of the current project and it becomes difficult to maintain the codes.
Meanwhile, the CodeBehind framework is in charge of the compatibility between the WebForms structure on the server and WebFormsJS on the client (just update!).

Frequent requests to the server
Consider a page for changing user preferences: this page has languages, calendars, templates, and the like for drop-down lists; if you want to create this page with React, you need to request the server several times to get the dynamic data. Static items such as the first day of the week and time difference do not need to request data from the server, but building multilingual websites with React is very complicated; in this scenario the language data is static, but you need to request the data from the server at least once for each page.
But CodeBehind WebForms make a request to the server once, and the server sends N Action Controls commands, and WebFormsJS executes these commands one after the other.

A different approach than traditional web development
Developing systems with React requires peripheral tools that are unlike traditional web practices and are hard to learn.
But CodeBehind WebForms are a structure faithful to HTML and based on the attributes of the form tag, they send data exactly like submit in HTML.

Installing dependencies and complex configuration
The incompatibility of dependencies in different versions and the need for complex configuration make it challenging to develop systems with React.
Meanwhile, to use CodeBehind WebForms, it is enough to add the WebFormsJS script tag to the head section of the HTML page.

Long development
Development with React requires mastery of JavaScript and JSX, and the software development process is long.
But development with CodeBehind WebForms is fast and there is no need for front-end development.

Hard to debug
The amount of code in React is very large, and due to the nature of React that manages the DOM on the client side, it is very difficult to find errors.
But Action Controls commands in CodeBehind WebForms have already been tested on the server and client side, so the possibility of errors is very low.

Conclusion

The WebForms feature in the CodeBehind framework is a revolutionary initiative that potentially challenges traditional approaches to web development. WebForms introduced by Elanat is a interesting and innovative feature. The structure of the new WebForms is different from Microsoft’s old WebForms and it just evokes the nostalgia of the old WebForms. The concept of reviving the nostalgia of web forms in ASP.NET Core is a bold move, and it’s impressive that it’s coupled with the implementation of WebFormsJS, a JavaScript library that interacts with server-side web controls.

Related links

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

CodeBehind in NuGet:
https://www.nuget.org/packages/CodeBehind/

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

WebFormsJS on GitHub:
https://github.com/elanatframework/Web_forms