Folders and files
| Name | Name | Last commit date | ||
|---|---|---|---|---|
WebFormsJS is the front-end component of WebForms Core technology, responsible for communicating with the back-end through the WebForms class.
As a JavaScript library, WebFormsJS provides the client-side infrastructure for interacting with web controls in the CodeBehind framework. This enables developers to manage and manipulate HTML elements entirely from the server side.
WebForms Core is a modern architecture inspired by Microsoft’s former Web Forms model, but without its limitations. It delivers significantly higher performance, allowing it to manage all HTML elements efficiently and with minimal overhead.
By using WebForms Core, developers can focus solely on generating the server response—there is no need to build a separate front end. Controls are defined and configured on the server, and WebForms Core handles the client-side behavior automatically. It can also operate independently of the CodeBehind framework. Later in this article, we will explain how to structure server responses to communicate effectively with WebFormsJS.
One of the notable strengths of WebForms Core is its extremely low bandwidth consumption. In this sense, it is like a gasoline car that absorbs as much carbon as it emits—a system that offsets much of its own cost.
- Provides powerful built-in features, including postback handling, progress bars, and automatic script extraction.
- Runs on simple HTML pages, without the need for views or server-side script pages.
- Automatically sends form data via Ajax: WebFormsJS serializes form data as either a string or a FormData object, depending on whether the form is multipart.
- Reduces development complexity by allowing developers to manage the entire interaction workflow on the server.
To use WebForms Core technology, it is enough to add the WebFormsJS library in the head section of HTML and get the WebForms class associated with the server programming language from the WebForms class repository.
Action Controls are WebFormsJS received codes that are received in INI format. WebFormsJS automatically detects whether the server response has Action Controls or not. If the server's response is based on the structure of an INI file that starts with [web-forms], it will process the Action Controls, otherwise it will replace the server's response in the form of Ajax on the page.
Example of received Action Controls:
[web-forms]
as<body>=background-color:green
saCheckBoxInput=onchange|MyNewFunc()
deMyTagId=1
ta<i>2=right
aoSelectInput=OptionValue|Option Text|1
al(InputName)=My Input Title- Line 1: as<body>=background-color:green Here, the first two characters are as, which means adding a style, and then it is specified that it will be applied to the body tag, and after the equal character (=), the style attribute is specified.
- Line 2: saCheckBoxInput=onchange|MyNewFunc() Here, the first two characters are sa, which means adding an attribute, and then it is specified that it will be applied to a tag with the id CheckBoxInput, and after the equal character (=), the name and value of the attribute is specified, which is specified by the character (|) are separated.
- Line 3: deMyTagId=1 Here, the first two characters are de, which means to delete the tag, and then it is determined that it will be applied to a tag with the id MyTagId, and after the equal character (=) there is a value of 1, which means to apply deletion.
- Line 4: ta<i>2=right Here, the first two characters are ta, which means text align, and then it is determined that it will be applied to a third tag named li, and after the equal character (=) there is a value of right which means right to left.
- Line 5: aoSelectInput=OptionValue|Option Text|1 Here, the first two characters are ao, which means adding the option tag, and then it is specified that it will be applied to a tag with the id name SelectInput, and after the equal character (=), the option value is placed, and after the character (|) option text is placed and at the end after the (|) character is the number 1, which means that the option is active (checked).
- Line 6: al(InputName)=My Input Title Here, the first two characters are al, which means adding a title, and then it is specified that it will be applied to a tag named InputName, and after the equal character (=), the title text is specified.
Action Controls are received in the form of an INI file format. In the first line of the response there is the word [web-forms] and each of the following lines is an action control.
The first two characters determine the action code. For example, things like adding styles and removing tags can be obtained from action codes. Usually the first two letters stand for actions and indicate that an action must be performed.
After the first two letters, there are 6 status types that specify the tag. Then the equal character is placed and after that the values are placed.
Note: Action controls are executed sequentially; if an action control decides to change an id attribute from a tag, subsequent action controls cannot perform actions with the previous id attribute.
Note: You can also use negative numbers in all indexes. This makes access to tags or values to be read from the end.
Example: de<li>-1=1
In the example above, the last li tag is removed.
Pre Runners are added before Action Control values. Each Pre Runner usually consists of one character, followed by the values of the Pre Runner, and then ends with the closing parenthesis ()) character.
- :: Delay - Value: Second
- (: Period - Value: Second
- ,: Repeat - Value: Second
Example:
(4)+w<b>1=10px
The above example means that every 4 seconds, the width of the second b tag is added by 10 pixels.
Pre Runners are placed in the queue and can be called one after the other.
Example:
:10)(4)+w<b>1=10px
The above example is the same as the previous example, except that it is executed after 10 seconds.
The following items are related to multiple answers:
- #: Start Index - Value: {Name}
- &: Go To - Value: Number (Line) or #Index|Repeat
After the first two characters, there are 6 status types that define the tag:
- Based on id: Based on the name of the id, it recognizes the tag.
- By name: Identifies the tag based on the name attribute. It is placed in open and closed parentheses ((Name)), and if a number is placed after it, it specifies the index.
- Based on the tag name: Based on the tag name, it recognizes the tag. It is placed inside the smaller and larger signs (<tag name>)), and if a number is placed after it, it specifies the index.
- Based on class name: Identifies the tag based on the class name. It is placed in open and closed brackets ({class name}), and if a number is placed after it, it specifies the index.
- Based on query: Identifies the tag based on the query. The query string is placed after the (*) character , and then the character (=) is placed after it. If there are equal characters (=) in the query value, they should be replaced by $[eq]; string.
- Based on query all: It applies to multiple tags and identifies tags based on "query". The query string is placed after the ([) character , and then the character (=) is placed after it. If there are equal characters (=) in the query value, they should be replaced by $[eq]; string.
- Based on head: Identifies the head tag. Denotes the head with the caret character (^).
- Based on Upper: Selects the last tag detected. The dash character (-) indicates the previous tag. It is used to reduce bandwidth consumption and is also available sequentially.
Note: By default, the name, class name, and tag name are set to 0.
Example: Action control with the value de<li>=1 is not different from the value de<li>0=1. Calculates negative numbers from the end. For example, -1 is the last tag.
You can also specify the desired tag nested (query all is not supported in this case).
Example: at>{my-class}1|<u>|<li>2=My text string
In the example above, the My text string is placed inside the third li tag which is inside the first ul tag, and the ul tag itself is a tag inside the tag whose class is equal to the value of my-class.
You can also specify parent tags based on a tag.
Example: /<p>4
In the above example, the parent of the fifth p tag is selected. You can select higher parents by adding multiple slash characters /.
WebFormsJS allows you to create web-forms tags on pages. The web-forms tags must have one of the src and ac attributes or both of them.
The ac attribute has the Action Controls value. Action Controls in this tag are separated by $[sln]; string.
Example:
<web-forms ac="nt<body>=div|MyDivTag$[sln];shMyDivTag=500px$[sln];swMyDivTag=500px$[sln];2)bci24=violet"></web-forms>
Note: The value of the ac attribute must not contain the double-quote character ("), and the string $[dq]; must be used instead.
The src attribute takes the value of a URL path. WebFormsJS calls the URL contained in the src attribute and puts the URL response inside the same web-forms tag. You can also set the width and height attributes in the web-forms tag.
Example:
<web-forms src="/page/header.aspx"></web-forms>
WebFormsJS has a different approach to responding to the first page request in the browser and AJAX requests when the page is already loaded and the user makes a request.
In the first case, if an action is added for the controls, a tag named web-forms is added at the bottom of the page, and the actions are placed in the ac attribute of the web-forms tag.
Example:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
<input name="TextBox" id="TextBox" type="text" />
...
</body>
</html><web-forms ac="bc<body>=green"></web-forms>In the second case, after the user's request, if the current View is changed, the server must place the Set Text code for the main tag (usually body) at the beginning of the action code.
Example:
[web-forms]
st<body>=...$[ln]; <input name="TextBox" id="TextBox" type="text" />$[ln];...
bc<body>=greenNote: When a request is made with WebFormJS, a header with the name Post-Back and the value true is also sent to the server. Therefore, it is easy to determine the response approach on the server.
Multiple-Responses is a useful feature in WebFormsJS that allows us to send multiple related responses in a single server response. The multi-response feature is a functionality similar to a JavaScript file that contains multiple offline functions (things that are not requested from the server).
In multiple-responses, action controls are separated by a # character. To execute the response, we need to add the # character and the to the end of the path.
Example:
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
Path and result
Requesting /my-view.aspx or /my-view.aspx#0
The following action controls are performed:
bcTextBox1=green vi*h2:nth-of-type(2)=0
Requesting /my-view.aspx#1
The following action controls are performed:
ta{my-textbox}1=right
Eg{my-list}=onmouseenter|#
fs<li>1=24px
Requesting /my-view.aspx#2
The following action controls are performed:
ac(gender)2=my-css-class sv(email)=myemail@gmail.com
Requesting /my-view.aspx#MyIndex or /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
Note: Multiple-Responses are mostly used for offline cases and it is recommended to enable HTML headers for long-term client-side caching for multiple responses.
WebForms Core technology also supports the WebSocket protocol.
Sending data in WebSocket mode is also possible with form submission. In order to send data under the WebSocket protocol, you must either enable the use of WebForms class methods on the server. Of course, you can also send under the WebSocket protocol by adding the usewebsocket attribute to the form tag.
Example:
<form action="/mypage" method="post" usewebsocket>
Text
<br>
<textarea name="Textarea1"></textarea><br><br>
<input type="submit" name="Button1" value="Send">
</form>PostBack and GetBack are two methods in WebFormsJS.
PostBack requests the URL string in the condition that it also transfers the input data to the server. The PostBack method should only be used inside a form tag. The PostBack method is automatically activated on submit type inputs.
GetBack only requests the URL string regardless of the input data. The URL string can also contain the query string. The GetBack method can be used without the form tag on the page.
There are three overloads for the GetBack method:
- GetBack(event): Requests the current URL path executed in the browser.
- GetBack(event, this): Should be used only in situations where the form tag must be present on the page. If executed inside a form, the action path requests the form, otherwise it requests the path of the first form on the page.
- GetBack(event, "YourURL"): Requests the URL path entered as an argument.
The following methods have a similar functionality to GetBack but send the request method according to their nature:
- PatchBack
- DeleteBack
- HeadBack
- OptionsBack
- TraceBack
- ConnectBack
Calling WebFormJS in HTML pages causes submit buttons to automatically get the onclick attribute with PostBack(event) value.
<input name="btn_Button" type="submit" value="Click to send data" onclick="PostBack(event)"/>
If you call the PostBack method as below, the contents of the page will remain and the values will be added to the beginning of the inner content of the body tag.
PostBack(event, true)
You can specify where to add content instead of true.
Example1:
PostBack(event, "<div>2") The above method places the data received from the server inside the third div tag.
Example2:
PostBack(event, "MyTagId") The above method puts the data received from the server inside a tag or MyTagId id.
Note: Examples 1 and 2 for the GetBack method also have the same function.
PutBack method has a similar function to PostBack but the method sends the request as per the PUT method.
TagBack method renders the action control of a web-forms tag.
Example:
TagBack (event, "(my-class)-1") The above method renders the action control of the last web-forms tag whose class name is my-class.
Example web-forms tag
<web-forms class="my-class" ac="bc<body>=red"></web-forms>
WebSocketBack method creates a WebSocket connection along the path of the passed argument.
Example:
WebSocketBack(event, "/YourURL")
The above method creates a WebSocket connection to the path "/YourURL".
PreventDefault method prevents default browser behavior associated with specific tag-driven events
Example:
PreventDefault(event)
<a href="https://example.com" id="myLink" onclick="PreventDefault(event)">Go to Example</a>
Normally, clicking the link would take you to example.com. PreventDefault method stops that action and does something else—like showing an alert.
StopPropagation prevents the event from occurring on its parent tags.
Example:
StopPropagation(event)
<div onclick="alert('DIV clicked!')">
<button onclick="StopPropagation(event)">Click Me</button>
</div>In the above example, the alert is not displayed when the button is clicked.