At first glance, WebForms Core technology seems to be a modern interpretation of Microsoft's old WebForms. Some developers, when they examine it in detail, conclude that the emerging WebForms Core technology is a competitor to front-end frameworks (like Vue, React, and Angular). But in fact, WebForms Core is an exciting return from front-end to back-end that competes with JavaScript. WebForms Core technology supports all HTML events such as Htmlevent OnmouseDown, OnDrop, OnDrag and others, which is useful for highly dynamic or interactive UIs.
CodeBehind 4
CodeBehind version 4 has been released with new features. CodeBehind version 4 has been updated to WebFormsjs version 1.6 and supports all its new features. This version adds the multi-response feature in WebForms Core technology.
The multi-response feature in WebForms Core will make the competition with JavaScript more serious. With the addition of the new multi-response feature, WebForms Core technology no longer relies on server-side logic, making it a better fit for applications that require offline functionality or client-side processing. Therefore, frequent updates can be performed without requiring a request to the server.
If server cache and client cache are applied to the server response (Action Control), the WebForms Core technology will perform better in terms of execution speed and the volume sent to the client. For this reason, in this version, the ability to cache the server response on the client side has been added to the CodeBehind framework.
This version also has added the ability to select parent tags in WebForms Core technology.
Multiple responses in action controls
Multi-response is a useful feature in WebForms Core technology that allows us to send multiple related responses in a single server response. In general, WebForms Core technology works much better than JavaScript and front-end frameworks when we have a request from the server; deleting a row from the database and deleting the same row from the View page or uploading an image and displaying the same uploaded image on the server is very easy to do using WebForms Core technology; but in situations where we do not have a request to the server and want to have a series of graphical displays on the client side, we must request the server at least once. To solve this problem, the multi-response feature has been added to WebForms Core technology. From now on, we can include multiple related responses in a single response. In version 4 of the CodeBehind framework, the ability to cache the server response client has also been added to take full advantage of the multi-response feature.
Example:
The following code is a controller class in the CodeBehind framework. In this class, an instance of the WebForms class is created and the StartIndex method is called 3 times.
Controller
using CodeBehind;
public class MyController : CodeBehindController
{
public void PageLoad(HttpContext context)
{
WebForms Form = new WebForms();
Form.SetBackgroundColor(InputPlace.Id("TextBox1"), "green");
Form.SetVisible(InputPlace.Query("h2:nth-of-type(2)"), false);
Form.StartIndex();
Form.SetTextAlign(InputPlace.Class("my-textbox", 1), "right");
Form.SetGetEvent(InputPlace.Class("my-list"), HtmlEvent.OnMouseEnter);
Form.SetFontSize("<li>1", "24px");
Form.StartIndex();
Form.AddClass("(gender)2", "my-css-class");
Form.SetValue("(email)", "myemail@gmail.com");
Form.StartIndex("MyIndex");
Form.AddStyle(InputPlace.QueryAll("h2:nth-of-type(2)"), "margin", "10px 20px");
Form.SetBackgroundColor("<form>|<p>", "violet");
Form.SetTextColor("<form>|<p>", "yellow");
Control(Form, true);
}
}
The following code is the action controls response of the controller class above. If you compare the codes, you will notice that calling the StartIndex method causes a # character to be added to each line.
Response
[web-forms]
bcTextBox1=green
vi*h2:nth-of-type(2)=0
#
ta{my-textbox}1=right
Eg{my-list}=onmouseenter|#
fs<li>1=24px
#
ac(gender)2=my-css-class
sv(email)=myemail@gmail.com
#=MyIndex
as[h2:nth-of-type(2)=margin:10px 20px
bc<form>|<p>=violet
tc<form>|<p>=yellow
To call each part of the response, we need to add the # character along with the index number to the end of the request path. The last time the StartIndex method was called, a string "MyIndex" was written as an input argument to this function; to call the MyIndex string, we just need to add the same expression after the # character at the end of the request path.
Result
Requesting example.com/my-view.aspx or example.com/my-view.aspx#0
The following action controls are performed:
bcTextBox1=green
vi*h2:nth-of-type(2)=0
Requesting example.com/my-view.aspx#1
The following action controls are performed:
ta{my-textbox}1=right
Eg{my-list}=onmouseenter|#
fs<li>1=24px
Requesting example.com/my-view.aspx#2
The following action controls are performed:
ac(gender)2=my-css-class
sv(email)=myemail@gmail.com
Requesting example.com/my-view.aspx#MyIndex or example.com/my-view.aspx#3
The following action controls are performed:
as[h2:nth-of-type(2)=margin:10px 20px
bc<form>|<p>=violet
tc<form>|<p>=yellow
The multi-response feature in WebForms Core technology significantly enhances interaction efficiency by allowing multiple related responses to be sent in one request. This capability is particularly useful for maintaining synchronization between server-side data and client-side displays without excessive requests. The integration of caching further optimizes performance, making it a powerful tool for developers working within this framework.
Client caching on server responses
As we mentioned in the previous section, in version 4 of the CodeBehind framework, the ability to cache the server response on the client side has been added.
In the example below, the Set method of the ClientCache class is called and the server response is cached on the client for 60 seconds.
View
@page
@layout "/layout.aspx"
@{
new ClientCache(context.Response.Headers).Set(60);
}
<b>@(new Random().Next(100000))</b>
Sending values embedded in the names of submit inputs
The framework now supports sending values embedded in the names of submit inputs, facilitating more intuitive data processing.
As you know, WebForms Core technology is faithful to HTML. In WebForms Core, a submit input tag automatically sends data to the server under the XMLHttpRequest object. One of the disadvantages of the submit input tag is that its title is the same as its value; for example, if you want to send a numeric value to the server and want to perform a delete operation, you either have to put the numeric value inside the hidden input tag or write a delete string next to this tag.
To solve this problem, a new embedded value feature has been added to the CodeBehind framework. From now on, you can add the value to the name attribute of the submit input tag.
Example:
On the following page, the submit input tags have a value of "Delete"; the name attribute of these tags starts with the name "Button" and numeric values are added to the tag name.
Each time a button is clicked, its name and value are sent to the server:
For example Button1=Delete
View
<!DOCTYPE html>
<html>
<head>
<script src="/script/web-forms.min.js"></script>
</head>
<body>
<form action="/admin/contact" method="POST">
<div id="Row1">Please send me the prices of products</div>
<input type="submit" name="Button1" value="Delete">
<div id="Row2">Please resume the training materials</div>
<input type="submit" name="Button2" value="Delete">
<div id="Row3">Please change the site theme to black</div>
<input type="submit" name="Button3" value="Delete">
</form>
</body>
</html>
Using the HasEmbedded method, we can detect when the submit button is clicked and extract the value from the input name.
Controller
using CodeBehind;
public partial class DeleteContactController : CodeBehindController
{
public void PageLoad(HttpContext context)
{
if (context.Request.Form.HasEmbedded("Button", out string Value))
Button_Click(Value);
}
private void Button_Click(string Id)
{
Database db = new Database();
db.DeleteContact(Id);
WebForms Form = new WebForms();
Form.Delete("Row" + Id);
Control(Form);
}
}
The HasEmbedded method is an extension to Form and Query data.
You can use the code below for the GET method.
if (context.Request.Query.HasEmbedded("Button", out string Value))
Button_Click(Value);
You can also extract values from input names with the GetEmbedded method.
string Value1 = context.Request.Form.GetEmbedded("Button");
string Value2 = context.Request.Query.GetEmbedded("Button");
Select parent input places in WebForms Core
Version 4 added the ability to access parent tags in WebForms Core technology.
Example:
In this example, the background color of the ul tag will be green.
In the following HTML code, there is a b tag with the id "Inner". We want to use the b tag to define the ul tag for the input place.
View
<div>
<ul>
<li>CodeBehind Framework</li>
<li>WebFormsJS</li>
<li>
<b id="Inner">WebForms Core technology</b>
</li>
<li>Elanat CMS</li>
<li>WebForms classes</li>
</ul>
</div>
Defining the input place using the InputPlace class:
Form.SetBackgroundColor(InputPlace.Id("Inner").AppendParrent().AppendParrent(), "green");
Defining the input place directly:
Form.SetBackgroundColor("//Inner", "green");
As shown in the code above, to access the parent tag, a slash character must be added before the input place.
Other features
New ability to remove parent tag in WebForms Core
In the following code, there is a p tag added inside a div tag. There is also a span tag inside the p tag.
View
<div>
<p>I really like the <span style="color:green">green</span> color range.</p>
</div>
In version 4, you can delete the parent of the input place by calling the DeleteParent method.
Form.DeleteParent("<span>")
The above code selects the input place as a span tag and causes the p tag to be removed from the HTML page.
New ability to fetch cookie in WebForms Core
In this version, the Cookie method has been added to the Fetch class (a static class that is compatible with the WebForms class).
Calling the Cookie method with the key input does not fetch the cookie values.
Form.SetText("{zone}2", Fetch.Cookie("key"))
The above code places the value of a cookie named "key" inside the third tag that has the class "zone"
Added AddLine method to support extended multi-command methods
In order to extend the WebForms class, the AddLine method has also been added so that we can create new action control commands from previous commands in sequence.
Form.AddLine("name", "value")
Using the AddLine method has many benefits for extending the WebForms class and reducing the WebForms code and increasing the readability of the code.
And a series of minor changes and improvements
In this version, some WebFormsJS code has been rewritten and some other code has been improved and some duplicate code has been converted to methods.
Conclusion
The release of CodeBehind version 4 represents a historic moment in web development. By enhancing server-side capabilities and introducing innovative features, it positions itself as a compelling alternative in an increasingly competitive landscape dominated by JavaScript frameworks. As developers continue to seek efficient and powerful tools for building modern web applications, CodeBehind's unique blend of nostalgia and innovation is likely to attract significant attention.
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
Top comments (0)