Web_forms

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

★ 11 Open GitHub ↗

WebForms Core front-end. WebFormsJS is a JavaScript library that manages HTML page tags (insert, edit, delete) based on the data it receives from the server.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![ ](https://github.com/user-attachments/assets/e44373ab-751f-4cea-83a0-93161aaae9d2)
# WebFormsJS

**WebFormsJS** is the front-end component of **WebForms Core technology**, responsible for communicating with the back-end through the [WebForms class](https://github.com/elanatframework/Web_forms_classes).

As a JavaScript library, **WebFormsJS** provides the client-side infrastructure for interacting with web controls in the [CodeBehind framework](https://github.com/elanatframework/Code_behind). 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.

### Advantages

* **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.

## How to use

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](https://github.com/elanatframework/Web_forms_classes) repository.

## Action Controls

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:
```ini
[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.

## Explanation of the Action Controls

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 Runner

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.

### Index

The following items are related to multiple answers:

- #: **Start Index** - Value: `{Name}`
- &: **Go To** - Value: `Number (Line) or #Index|Repeat`

## Define the tag

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 `/`.

## Web-Forms tag

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>`

## Responding

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:

```html
<!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:

```ini
[web-forms]
st<body>=...$[ln];	<input name="TextBox" id="TextBox" type="text" />$[ln];...
bc<body>=green
```

> Note: 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

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.

## Uisng WebSocket

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:
```html
<form action="/mypage" method="post" usewebsocket>
	Text
	<br>
	<textarea name="Textarea1"></textarea><br><br>
	<input type="submit" name="Button1" value="Send">
</form>
```

## Interactive methods

`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)`

```html
<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.

Web_forms

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Web_forms

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README