DEV Community

Cover image for CodeBehind 4.2 Released
Elanat Framework
Elanat Framework

Posted on

CodeBehind 4.2 Released

#dotnet #backend #github #webformscore

In an era dominated by heavy JavaScript frameworks in web development, WebForms Core challenges the current front-end development trend and brings web development back to the server. This technology embraces a simple approach: just write HTML and let the server handle everything.

WebForms Core is not a step backward

It doesn't ignore modern web development or progress, but reimagines it in a way that brings respect back to the server. This technology eliminates unnecessary front-end complexity. By using WebForms Core, most of the codebase can remain on the server while maintaining agility. WebForms Core is a major revolution in the web that combines the advantages of front-end frameworks with the simplicity of server-side development. At a time when JavaScript-dominated tools, massive SPAs, and API-first architectures are the norm, many believed server-driven UI was a thing of the past—but WebForms Core proves it can be the future. It treats HTML again as a UI language, not just a target of JavaScript.

Version 1.8 of WebForms Core Technology

In version 4.2 of the CodeBehind framework, our team at Elanat updated it to include the latest version of WebForms Core—version 1.8. This upgrade brought new features to the technology and resulted in astonishing performance for the CodeBehind framework.

We at Elanat have spent significant time developing new features and improving performance for the release of WebForms Core version 1.8.

Replacing "event" instead of "this"

In version 1.8 of the WebForms Core technology, by using advanced solutions while preserving the "async" functionality, we were able to replace "this" with "event." With this change, we gained access to more data such as the selected button and the mouse position on the page. In the future, we will also add all other event-related data to the WebForms Core technology.

  • Ability to access the tag in which the event was executed (current or target)

In this version you will have access to the tag where the event was triggered.

Current DOM

// Pattern
// InputPlace.Current
// $

// Example
form.Delete(InputPlace.Current);
form.Delete("$");
Enter fullscreen mode Exit fullscreen mode

You can even access the internal tags that are placed in the parent tag position of the event.

Target DOM

// Pattern
// InputPlace.Target
// !

// Example
form.Delete(InputPlace.Target);
form.Delete("!");
Enter fullscreen mode Exit fullscreen mode
  • Accessibility by selected key name

The following method sets the entered key to the value of a text input tag.

form.SetValue("TextBox1", Fetch.EventKey);
Enter fullscreen mode Exit fullscreen mode
  • Ability to access mouse position on page

You can access various mouse positions on the page using the following methods in the "Fetch" class.

form.SetValue("TextBox1", Fetch.EventPageX);
form.SetValue("TextBox2", Fetch.EventPageY);
form.SetValue("TextBox3", Fetch.EventClientX);
form.SetValue("TextBox4", Fetch.EventClientY);
form.SetValue("TextBox5", Fetch.EventOffsetX);
form.SetValue("TextBox6", Fetch.EventOffsetY);
Enter fullscreen mode Exit fullscreen mode

Cache class

  • Ability to permanently store values ​​in localStorage

In previous versions, we could temporarily save different tag values ​​by calling methods that start with the word "Save" and then use this data by calling the "Saved" method in the "Fetch" class.

form.SaveValue("TextBox1");
form.SetBackgroundColor("<body>", Fetch.Saved());
Enter fullscreen mode Exit fullscreen mode

Now in this version, we can permanently save different tag values ​​by calling methods that start with the word "Cache" and then use this data by calling the "Cache" method in the "Fetch" class.

form.CacheValue("TextBox1");
form.SetBackgroundColor("<body>", Fetch.Cache());
Enter fullscreen mode Exit fullscreen mode

GoTo feature

  • New GoTo feature to return to previous lines of Action Controls with the ability to specify the repetition rate

In the example below, the content template is saved first and then repeated 9 more times to add 10 templates for the content on the page; we can also set the content value next.

form.SaveText("Content");
form.AddText("Content", Fetch.Saved());
form.SetText("Content|<h2>-1", Fetch.SavedLineConsume("ContentValue"));
form.SetText("Content|<p>-1", Fetch.SavedLineConsume("ContentValue"));
form.SetText("Content|<span>-1", Fetch.SavedLineConsume("ContentValue"));
form.GoTo(1, 8);
Enter fullscreen mode Exit fullscreen mode

The GoTo method in the above example refers to the second Action Control, AddText, 8 times.

Note, we can also use negative numbers to refer to the Action Control index.

form.SaveText("Content");
form.AddText("Content", Fetch.Saved());
form.SetText("Content|<h2>-1", Fetch.SavedLineConsume("ContentValue"));
form.SetText("Content|<p>-1", Fetch.SavedLineConsume("ContentValue"));
form.SetText("Content|<span>-1", Fetch.SavedLineConsume("ContentValue"));
form.GoTo(-4, 8);
Enter fullscreen mode Exit fullscreen mode

GoTo is a great method that significantly reduces bandwidth.

Save URL data

  • Ability to save and restore URL

In previous versions we could get the path data of a URL, however in the new version we can store the data of a URL temporarily and permanently and retrieve them at the right time.

form.SaveUrl("/url_path");
form.CacheUrl("/url_path");
Enter fullscreen mode Exit fullscreen mode

Line reading

  • Ability to save and restore line by line

In this version you can retrieve data line by line.

The example below retrieves the first and second lines of a tag with the ID "Template" and places its values ​​in other tags.

form.SaveText("Template", "tmp");
form.SetText("{content}|<p>", Fetch.SavedLine("tmp", 0));
form.SetFontSize("{content}|<p>", Fetch.SavedLine("tmp", 1));
Enter fullscreen mode Exit fullscreen mode

You can also use the SavedLineConsume method in the Fetch class. This allows you to delete the first retrieved line at the same time.

form.SaveText("Template", "tmp");
form.SetText("{content}|<p>", Fetch.SavedLineConsume("tmp"));
form.SetFontSize("{content}|<p>", Fetch.SavedLineConsume("tmp"));
Enter fullscreen mode Exit fullscreen mode

Example lines data

Hello World!
18px
Enter fullscreen mode Exit fullscreen mode
  • Ability to save and restore INI format

You can also retrieve INI data.

We repeat the same example above, this time for INI data.

form.SaveText("Template", "tmp");
form.SetText("{content}|<p>", Fetch.SavedINI("tmp", "content-text"));
form.SetFontSize("{content}|<p>", Fetch.SavedINI("tmp", "font-size"));
Enter fullscreen mode Exit fullscreen mode

Example INI data

[my-ini-data]
content-text=Hello World!
font-size=18px
Enter fullscreen mode Exit fullscreen mode

New WebForms methods

  • Ability to access tag index 
form.SaveIndex("{my-class}");
form.CacheIndex("$");
Enter fullscreen mode Exit fullscreen mode

The above methods store the index of the tag in the parent tag temporarily and permanently.

  • Adding the ability to add PreventDefault and StopPropagation methods to events

PreventDefault

The PreventDefault method in JavaScript is used to stop the default action that belongs to an event from happening.

form.SetPreventDefaultEvent("<a>", HtmlEvent.OnClick);
form.SetPreventDefaultEventListener("<a>", HtmlEventListener.Click);
Enter fullscreen mode Exit fullscreen mode

StopPropagation

In JavaScript, StopPropagation is a method used to prevent an event from bubbling up the DOM tree.

form.SetPreventDefaultEvent("<p>", HtmlEvent.OnMouseEnter);
form.SetPreventDefaultEventListener("<p>", HtmlEventListener.MouseEnter);
Enter fullscreen mode Exit fullscreen mode
  • New method to add hidden tags more easily 
form.AddHidden("<form>", "Value");
form.AddHidden("<form>", "Value", "Hidden1");
Enter fullscreen mode Exit fullscreen mode

AddHidden is a practical method that allows you to manage the sent data better.

Other improvement

  • Improved support for adding attributes and the ability to specify the splitter character
  • Improved the cb_AddEvent and cb_AddEventListener methods
  • Automatically clearing expired caches
  • Executing the onload event after assignment in tags
  • Using efficient methods instead of innerHTML and outerHTML
  • Checking browser support and add error for not supporting WebFormsJS
  • Optimization to preserve event listeners after changing internal tags
  • And a series of minor changes and improvements

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

WebForms Core organization on GitHub:
https://github.com/webforms-core

Top comments (2)

Collapse
 
aspxone-official profile image
AspXone •

Hey, We just wanted to ask if we could collaborate with you to make a link in bio page. I could make you a link in bio page for free!

Collapse
 
elanatframework profile image
Elanat Framework •

At Elanat, we welcome you and others to share your own built systems. However, we do not see a need to create a bio page.
Thank you for your suggestion.