In 2024, Elanat gave a new meaning to web development by introducing WebForms Core. WebForms Core technology allows you to manage HTML tags from the server. This technology simplifies the complex process of web development. In WebForms Core technology, the server load is low and is similar to JSON responses in front-end frameworks. The server response is just a small command in INI format that is sent to the client, which results in an update of the HTML page. This technology enables users to interact with other parts of the application while waiting for the server response.
In this article, we will prove why, despite WebForms Core technology, the front-end is becoming obsolete.
Delete contact scenario
The scenario we are looking at is displaying a list of contacts on the admin page. In this scenario, the admin can delete the contacts from the database by clicking on the delete button. In this scenario, the state of the page is preserved and after deleting the contact, the contact tag is also removed from the HTML page.
In this example, we used the CodeBehind framework.
Please note that WebForms Core technology can be used in all programming languages and all back-end frameworks.
Using JavaScript
In this example, HTML provides the front-end structure, JavaScript handles the client-side logic, and the C# controller handles the server-side operations.
This HTML Result sets up a webpage with three div elements, each containing a message and a button. When the button is clicked, it calls the DeleteContact JavaScript function with a specific Id.
HTML Result
<!DOCTYPE html>
<html>
<head>
<title>Using JavaScript</title>
<script src="/script/contact.js"></script>
</head>
<body>
<div id="Row1">Please send me the prices of products <input type="button" onclick="DeleteContact(1)" value="Delete"></div>
<div id="Row2">Please resume the training materials <input type="button" onclick="DeleteContact(2)" value="Delete"></div>
<div id="Row3">Please change the site theme to black <input type="button" onclick="DeleteContact(3)" value="Delete"></div>
</body>
</html>
In the head section, a link to an external JavaScript file named contact.js has been added; the content of the contact.js file is as follows.
This JavaScript file defines the DeleteContact function, which sends an HTTP request to delete a contact and deletes the contact tag.
JavaScript file (contact.js)
function DeleteContact(Id)
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function ()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200 && xmlhttp.responseText == "true")
document.getElementById("Row" + Id).outerHTML = null;
}
xmlhttp.open("GET", "/admin/contact/?do_delete=true&contact_id=" + Id, true);
xmlhttp.send();
}
In the controller, the main method first checks whether the query string contains a parameter called do_delete or not; if present, the btn_Delete_Click method is called.
In the btn_Delete_Click method, the user is deleted and then returns a true string to the client.
Controller
using CodeBehind;
public class ContactController : CodeBehindController
{
public void PageLoad(HttpContext context)
{
if (context.Request.Query["do_delete"].Has())
btn_Delete_Click(context);
}
private void btn_Delete_Click(HttpContext context)
{
int Id = context.Request.Query["contact_id"].ToNumber();
new Database().DeleteContact(Id);
Write("true");
}
}
Using WebForms Core Technology
In this example, HTML provides the front-end structure, WebFormsJS handles the client-side logic automatically, and the C# controller handles the server-side operations.
This HTML output sets up a web page with three div elements, each containing a message and a submit button, inside a form tag. When the button is clicked, the page state remains static and an XMLHttpRequest is automatically sent to the server by WebFormsJS.
HTML Result
<!DOCTYPE html>
<html>
<head>
<title>Using WebForms Core Technology</title>
<script src="/script/web-forms.min.js"></script>
</head>
<body>
<form action="/admin/contact">
<div id="Row1">Please send me the prices of products<span> Delete </span><input type="submit" name="btn_Delete" value="1"></div>
<div id="Row2">Please resume the training materials<span> Delete </span><input type="submit" name="btn_Delete" value="2"></div>
<div id="Row3">Please change the site theme to black<span> Delete </span><input type="submit" name="btn_Delete" value="3"></div>
</form>
</body>
</html>
In the head section, a link to the WebFormsJS library has been added.
Note: In WebForms Core technology, the WebFormsJS library on the front-end automatically communicates with the WebForms class on the back-end.
In the controller, the main method first checks whether the query string contains a parameter called btn_Delete or not; if present, the btn_Delete_Click method is called.
In the btn_Delete_Click method, the user is deleted and then an instance of the WebForms class is created and the Delete method is called, and finally, by calling the Control method, the commands of the created instance of the WebForms class are placed in the server response and sent to the client.
Controller
using CodeBehind;
public class ContactController : CodeBehindController
{
public void PageLoad(HttpContext context)
{
if (context.Request.Query["btn_Delete"].Has())
btn_Delete_Click(context);
}
private void btn_Delete_Click(HttpContext context)
{
int Id = context.Request.Query["btn_Delete"].ToNumber();
new Database().DeleteContact(Id);
WebForms Form = new WebForms();
Form.Delete("Row" + Id);
Control(Form);
}
}
Note: Please note that the
Controlmethod is related to the CodeBehind framework. If you are working with a framework that does not yet have the WebForms Core technology module, you can set theForm.Response()method to the server response.
What is the client requesting?
WebForms Core technology is faithful to the HTML structure, so the following URL is requested.
/admin/contact/?btn_Delete=1
What is the server responding?
[web-forms]
deRow1=1
Deleting a tag is very easy using WebForms Core technology. You just need to create an instance of the WebForms class, then call the Delete method, and finally send the commands using the Control method.
Note: Using WebForms Core, you can apply various commands to the HTML page, such as creating tags, adding attributes, changing the background color, etc.
Example
In this example, a message indicating that the contact was successfully deleted is displayed to the user for 3 seconds.
In the following code, in addition to deleting the contact tag, an h3 tag is added at the end of the form tag, and in the following lines, the background color of this tag is changed to green, and the text of the message indicating that the contact was successfully deleted is added inside the h3 tag. The Delete method also deletes the h3 tag, and the AssignDelay method causes a 3-second delay for deleting the h3 tag.
WebForms Form = new WebForms();
Form.Delete("Row" + Id);
+Form.AddTag("<form>", "h3");
+Form.SetBackgroundColor("<h3>-1", "green");
+Form.AddText("<h3>-1", "Contact successfully deleted.");
+Form.Delete("<h3>-1");
+Form.AssignDelay(3);
Control(Form);
The codes sent from the server to the client in the above example are also according to the following commands.
[web-forms]
deRow1=1
nt<form>=h3
bc<h3>-1=green
at<h3>-1=Contact successfully deleted.
:3)de<h3>-1=1
In WebForms Core technology, the amount of processing required to generate INI codes is equal to the amount of processing required to serialize and generate JSON format in the development process of front-end frameworks; therefore, the pressure on the server is at its most optimal level.
This example clearly shows that WebForms Core technology brings all the benefits of JavaScript, and there is no performance difference between WebForms Core and JavaScript. The benefits of WebForms Core technology go directly to developers who are looking for simplicity without sacrificing performance. Developers no longer need to write extensive JavaScript code, further reducing the need for specialized front-end skills. This is the hallmark of modern web development!
While web development has shifted from back-end to front-end in recent years, the unexpected introduction of WebForms Core is a major challenge for front-end web development. WebForms Core solves back-end problems and encourages web developers to focus on the back-end. This represents a major shift in the way developers approach web applications.
WebForms Core Advantages:
Simplicity: The WebForms Core approach uses standard HTML submission forms, which are simple, easy, and fast to implement without requiring additional JavaScript knowledge.
Server-side management: The management logic is completely on the server side, making it a powerful and professional tool for developers familiar with server-side programming.
Maintaining page state: Using WebForms Core provides a smooth user experience, as tags are managed without refreshing the entire page.
Instant feedback: Tags change immediately after the server response, providing immediate feedback to the user and allowing users to continue interacting with the page while the request is being processed.
No markup required: This technology does not require markup on pages; whereas using JavaScript requires the event to be applied directly to the tags (or indirectly with the AddEventListener method).
Reduced bandwidth usage: Since the server can send simple commands in a lightweight format such as INI, the need for large JavaScript packages is reduced.
Advanced interactivity: WebForms Core technology provides powerful tools for creating complex user interfaces, managing state, and ensuring a responsive, interactive, and engaging user experience.
Conclusion
Elanat's WebForms Core technology represents a revolutionary approach that could significantly alter the landscape of web development. By shifting control from the front end to the server side and simplifying data management, it challenges the dominance of existing client-side frameworks. As this technology gains traction, it may lead to a reevaluation of traditional front-end development practices, potentially making them less relevant in certain contexts.
Top comments (0)