WebFormsJS is a client-side library of WebForms Core technology that, along with the WebForms class on the server side, enables the integrated use of this technology for web development.
WebForms Core technology is built on the "Server-Commands/Client-Execution" concept. In this technology, the server sends direct commands to the client, and the client interprets and then executes the commands.
In the new version of WebForms Core technology, we have included the possibility of extending the WebFormsJS library. From now on, you can add your own special commands to this technology. The extension section is located at the end of the WebFormsJS library and starts with the /* Start Extension */ comment and ends with the /* End Extension */ comment. In this section you can extend the WebForms Core technology and modify the following examples. It includes several methods that we will explain below.
Please Note: WebForms Core technology does not require writing JavaScript except in extremely specific scenarios such as native client computing or extreme client applications. Also, for situations where you don't need Action Control flow data, it's better to create a new method and call that method with the CallMethod method in the Fetch section of the WebForms server class.
When should we use new modular commands?
When we want to implement a specific and new application and WebForms Core technology does not support that command and has no intention of supporting it.
Note: If you think a new command or feature is needed to be added to WebForms Core technology, be sure to let us know.
To create a new command, you must first specify the character structure of your command. To avoid any conflicts, please try to start the Action Control command with numbers and use only ASCII format; using letters and characters increases the possibility of conflicts in current or future versions.
Set WebForms Value
This method is executed before the tag management interpretation flow and the output true continues the interpretation and the output false stops the interpretation and ignores the Action Controls regardless of their number. In this method, you can write the interpretation code before you manage the behavior of the tags (which is possible in the next method).
function cb_SetWebFormsValuesExtension(evt, ActionOperation, ActionFeature, Value, LastElementPlaceList, TransientDOM)
{
switch (ActionOperation)
{
case '0':
switch (ActionFeature)
{
case '0': alert("Hello " + Value); return true;
}
}
}
By default, this method has a code interpreter that uses alert to display the message. In this test example, for a command like 00=My text alert, the browser opens and the text "Hello My text" is displayed in the alert. And then the value true is returned to continue the tag management interpretation flow.
We can create new such code interpreters for development in this section. You can delete this default interpreter. We decided to create a new command to create an animation on the page that interprets this command.
The structure of this command is as follows:
01={duration}
The following codes also interpret the above command.
function cb_SetWebFormsValuesExtension(evt, ActionOperation, ActionFeature, Value, LastElementPlaceList, TransientDOM)
{
switch (ActionOperation)
{
case '0':
switch (ActionFeature)
{
case '0': alert("Hello " + Value); return true;
+ case '1':
+ document.body.style.transition = "background-color 0.5s ease";
+ document.body.style.backgroundColor = "lightblue";
+ setTimeout(() =>
+ {
+ document.body.style.backgroundColor = "";
+ }, Value);
+ return true;
}
}
}
Server code
form.AddLine("01", "3000"); // Value is animation duration
We can call the command using the "AddLine" method in the WebForms class on the server.
Action Control result
[web-forms]
01=3000
Note: You can convert a value to multiple values with the "|" character.
Note: Instead of using the "AddLine" method, you can use the advanced constructs of your desired programming language to create advanced methods. The following article is a good reference for extending WebForms class methods in C#:
https://dev.to/elanatframework/extending-methods-in-webforms-core-57jj
Set Value To Input Extension
This method is used to manage tags. Through CurrentElement we can have full access to Input Place. This is a very powerful method; in this method you can do anything you want with the tags you specify.
function cb_SetValueToInputExtension(evt, ActionOperation, ActionFeature, CurrentElement, Value)
{
switch (ActionOperation)
{
case '1':
switch (ActionFeature)
{
case '0': console.log(CurrentElement.outerHTML + "|" + Value);
}
}
}
In the default example of this method, the complete structure of a tag (along with a value) is displayed in the Console section of the browser with the console.log method.
Usage example:
10<p>2=Text
In the above example, the third p tag along with the value entered in the browser is logged.
<p class="menu">
<a href="/about">About</a>
</p>|Text
We have created a new command to add a placeholder, suitable for input tags.
11{InputPlace}=Placeholder text
The following codes also interpret the above command.
function cb_SetValueToInputExtension(evt, ActionOperation, ActionFeature, CurrentElement, Value)
{
switch (ActionOperation)
{
case '1':
switch (ActionFeature)
{
case '0': console.log(CurrentElement.outerHTML + "|" + Value); break;
+ case '1': CurrentElement.placeholder = Value;
}
}
}
Server code
form.AddLine("11" + "Textbox1", "Enter name");
Action Control result
[web-forms]
11Textbox1=Enter name
Note: You can convert a value to multiple values with the "|" character.
Fetch Value
This method works based on the Fetch class (which is a function of the WebForms class on the server). The Fetch structure is as follows: it takes the Value data and modifies it.
function cb_FetchValueExtension(evt, ActionOperation, ActionFeature, Value)
{
switch (ActionOperation)
{
case '2':
switch (ActionFeature)
{
case '0': return "Hello " + Value;
}
}
}
For example, the following code adds the user's name to the b tag by calling the "prompt" method:
Server code
form.AddText("<b>", Fetch.Script("prompt('Please enter name','Your name')"));
Of course, you can also write the above code as follows, but it is never recommended.
form.AddText("<b>", "@_prompt('Please enter name','Your name')");
We have created a new Fetch command to display the amount of data in the HTML page.
{ac}{InputPlace}=@21{Encoding type};
The following codes also interpret the above command.
function cb_FetchValueExtension(evt, ActionOperation, ActionFeature, Value)
{
switch (ActionOperation)
{
case '2':
switch (ActionFeature)
{
case '0': return "Hello " + Value;
+ case '1':
+ var htmlContent = document.documentElement.outerHTML;
+ if (Value === "ASCII")
+ return "Page size (ASCII): " + htmlContent.length + " characters";
+ if (Value === "UTF8")
+ {
+ var encoder = new TextEncoder();
+ var utf8Bytes = encoder.encode(htmlContent);
+ return "Page size (UTF8): " + utf8Bytes.length + " bytes";
+ }
+ return "Unknown encoding type: " + Value;
}
}
}
Server code
form.AddText("<b>", "@21" +"UTF8");
Action Control result
[web-forms]
at<b>=@21UTF8
Note: You can convert a value to multiple values with the "," character.
Save Value
This method is used when you want to save a data. You can save information from a tag; for example, in this method you can get and save the number of attributes of a tag. You can save data in two parts Local and Session and then retrieve them with the Fetch.Saved and Fetch.Cache methods.
Example
Server code
form.SetValue("Textbox1", Fetch.Saved("my-key"));
The "cb_SetStorage" method saves the data in Local if true is entered in the first argument and temporarily stores it in the session if it is negative. The second argument is "Name" and is usually used as a Key.
function cb_SaveValueExtension(evt, ActionOperation, ActionFeature, Name, CurrentElement)
{
switch (ActionOperation)
{
case '3':
switch (ActionFeature)
{
case '0': cb_SetStorage(true, Name, "Hello saved in local storage"); break;
case '1': cb_SetStorage(false, Name, "Hello saved in session storage");
}
}
}
For example, the following code checks for the presence of a script tag in the tag and stores the value 1 or 0 in the session depending on the check.
@33{InputPlace}={Key}
The following codes also interpret the above command.
function cb_SaveValueExtension(evt, ActionOperation, ActionFeature, Name, CurrentElement)
{
switch (ActionOperation)
{
case '3':
switch (ActionFeature)
{
case '0': cb_SetStorage(true, Name, "Hello saved in local storage"); break;
case '1': cb_SetStorage(false, Name, "Hello saved in session storage"); break;
+ case '3': cb_SetStorage(false, Name, (CurrentElement.getElementsByTagName("script").length > 0) ? "1" : "0");
}
}
}
Server code
form.AddLine("@33" + "MyTag", "my-key");
Action Control result
[web-forms]
@33MyTag=my-key
Check Condition
This method is an advanced construct for adding conditions that are used to control the state. The state control construct can allow dependent Action Controls to execute synchronously and asynchronously when its control structure returns true.
function cb_CheckConditionExtension(evt, Action, Control)
{
switch (Action)
{
case "40": return (Control == "Hello");
}
}
Returning null when using timed conditions causes us to exit the condition.
Example
[web-forms]
{et={FirstValue}|{SecondValue}
sw{InputPlace}={Width}
Server Code
form.IsEqualTo("500", Fetch.Saved("my-key"));
form.SetWidth("<form>", 300);
Result
[web-forms]
{et=500|@clmy-key
sw<form>=300px
Here we have added a new command to check whether the entered number is a prime number or not.
{41={Value}
The following codes also interpret the above command.
function cb_CheckConditionExtension(evt, Action, Control)
{
switch (Action)
{
case "40": return (Control == "Hello"); break;
+ case "41":
+ if (Control <= 1)
+ return false;
+ if (Control === 2)
+ return true;
+ if (Control % 2 === 0)
+ return false;
+ const sqrt = Math.sqrt(num);
+ for (let i = 3; i <= sqrt; i += 2)
+ if (num % i === 0)
+ return false;
+ return true;
}
}
Server code
form.AddLine("{41", "59");
Action Control result
[web-forms]
{41=59
Conclusion
With the introduction of the Extension section in version 1.9 of WebFormsJS, developers can add new behaviors and custom commands without changing the core of the library.
WebFormsJS takes an important step towards modularizing the WebForms Core architecture with Extensions. This feature is invaluable for teams using WebForms Core, as it allows them to extend client-side behavior in a customized and controlled manner, without having to worry about changes to the lower layers of the system.