GitHub 上的新儲存庫 WebFormsJS 就在這裡！-js教程-PHP中文網

New Repository on GitHub, WebFormsJS is Here!

WebFormsJS 是 JavaScript 函式庫，它提供了與 CodeBehind 框架中的 Web 控制項互動的基礎架構；這使得開發人員可以輕鬆地在伺服器端管理 HTML 標籤。

高效 Web 開發的新架構

Web 開發一直是一個複雜且耗時的過程，具有多層複雜性和大量需要管理的技術。 WebFormsJS 是一個新的 JavaScript 程式庫，它透過提供與伺服器端 Web 控制項（HTML 標籤）互動的強大基礎架構來簡化此流程，使開發人員能夠專注於伺服器回應，而無需擔心前端。

使用WebFormsJS很大程度上消除了前端開發的需要。你將不再需要使用 React、Angular 和 Vue 等前端框架，甚至不需要在前端使用 JavaScript。請注意，同時使用 WebFormsJS 和前端框架或 JavaScript 也會為您的專案帶來許多優勢。

請參考以下範例：

這是一個 HTML 頁面，它請求伺服器的頁面將其內容新增至 ID 為 MyTag 的 div 標籤內。

使用 JavaScript 的簡單 AJAX

<!DOCTYPE html>
<html>
<head>
    <script>
    function loadDoc()
    {
        const xhttp = new XMLHttpRequest();
        xhttp.onload = function()
        {
            document.getElementById("MyTag").innerHTML = this.responseText;
            document.body.style.backgroundColor = "#409354";
            document.getElementsByTagName("h2")[0].setAttribute("align","right");
        }
        xhttp.open("GET", "/AjaxPage.aspx");
        xhttp.send();
    }
    </script>
</head>
<body>
<div id="MyTag"></div>
<div>
    <h2>Request from server</h2>
    <button type="button" onclick="loadDoc()">Set Content</button>
</div>

</body>
</html>

登入後複製

根據上面的程式碼，我們有一個 HTML 頁面，其中有一個 JavaScript 方法來接收 AJAX 形式的頁面回應。

執行 JavaScript 方法會導致三件事發生：
1- 從伺服器尋找頁面內容並將其新增至 HTML 頁面的一部分
2-更改背景顏色
3- 將其中一個標籤從右向左設定

注意：選項2和3是在客戶端完成的，如果我們想從伺服器更改它們，我們需要向伺服器請求兩次或我們必須在一個複雜的過程中透過一個請求檢索所有三個選項.

為了支援WebFormsJS，我們重寫了上面的HTML頁面，如下。

使用 WebFormsJS

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="/script/web-forms.js"></script>
</head>
<body>

<form method="GET" action="/AjaxPage.aspx">
    <div id="MyTag"></div>
    <div>
        <h2>Request from server</h2>
        <input name="MyButton" type="submit" value="Set Content" />
    </div>
</form>

</body>
</html>

登入後複製

我們從下面的連結複製了 web-forms.js 檔案並將其保存在 script/web-forms.js 路徑中。

https://github.com/elanatframework/Web_forms/blob/elanat_framework/web-forms.js

當我們向伺服器要求頁面時，伺服器會發送以下回應。

伺服器回應

[web-forms]
stMyTag=Server response text
bc<body>=#409354
ta<h2>=right

登入後複製

Elanat 團隊將這種結構稱為「動作控制」。操作控制項是以 INI 格式接收的 WebFormsJS 接收程式碼。 WebFormsJS 自動偵測伺服器回應是否具有操作控制項。如果伺服器的回應是基於以[web-forms]開頭的INI檔案的結構，它將處理Action Controls，否則它將在頁面上以AJAX的形式替換伺服器的回應。

第1行：stMyTag=伺服器回應文本這裡前兩個字元是st，表示設定文本，然後指定應用於id為MyTag的標籤，後面是等號字元(=) 這是收到的簡訊。
第2行：bc=#409354 這裡，前兩個字元是bc，表示背景顏色，然後指定要應用於body標籤，後面是等號字元(= ) 有顏色值。
第3行：ta
=right 這裡，前兩個字元是ta，表示文字對齊，然後確定將應用到名為li的標籤上，後面是等號（=）有一個值right ，表示從右到左。

伺服器端的 WebFormsJS

如果您使用靈活的後端框架，您可以輕鬆建立產生Action Controls的流程；否則，您可以要求業主或開發人員重寫後端框架的核心或建立一個新的模組來支援WebFormsJS。

在 CodeBehind 框架中使用 WebFormsJS 的範例

我們建立一個新的View，其中有一個選擇類型的輸入；我們想要在select中新增的選項值，因此我們在View中放置了兩個文字方塊輸入用於新選項的名稱和值，並且我們還在該View中創建了一個用於是否選擇新選項的複選框輸入.

查看（Form.aspx）

@page
@controller FormController
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Send Form Data</title>
    <script type="text/javascript" src="/script/web-forms.js"></script>
</head>
<body>
    <form method="post" action="/Form.aspx">

        <label for="txt_SelectName">Select name</label>
        <input name="txt_SelectName" id="txt_SelectName" type="text" />
        <br>
        <label for="txt_SelectValue">Select value</label>
        <input name="txt_SelectValue" id="txt_SelectValue" type="text" />
        <br>
        <label for="cbx_SelectIsSelected">Select Is Selected</label>
        <input name="cbx_SelectIsSelected" id="cbx_SelectIsSelected" type="checkbox" />
        <br>
        <label for="ddlst_Select">Select</label>
        <select name="ddlst_Select" id="ddlst_Select">
            <option value="1">One 1</option>
            <option value="2">Two 2</option>
            <option value="3">Three 3</option>
            <option value="4">Four 4</option>
            <option value="5">Five 5</option>
        </select>
        <br>
        <input name="btn_Button" type="submit" value="Click to send data" />

    </form>
</body>
</html>

登入後複製

我們首先啟動IgnoreViewAndModel屬性；透過這樣做，我們可以防止返回「檢視」頁面。然後我們建立一個WebForms類別的實例，並根據透過Form方法發送的值在下拉清單中新增一個新值。最後，我們必須將已建立的 WebForms 類別實例放置在 Control 方法中。

控制器（FormController）

public partial class FormController : CodeBehindController
{
    public void PageLoad(HttpContext context)
    {
        if (!string.IsNullOrEmpty(context.Request.Form["btn_Button"]))
            btn_Button_Click(context);
    }

    private void btn_Button_Click(HttpContext context)
    {
        IgnoreViewAndModel = true;

        Random rand = new Random();
        string RandomColor = "#" + rand.Next(16).ToString("X") + rand.Next(16).ToString("X") + rand.Next(16).ToString("X") + rand.Next(16).ToString("X") + rand.Next(16).ToString("X") + rand.Next(16).ToString("X");

        WebForms Form = new WebForms();

        string SelectValue = context.Request.Form["txt_SelectValue"];
        string SelectName = context.Request.Form["txt_SelectName"];
        bool SelectIsChecked = context.Request.Form["cbx_SelectIsSelected"] == "on";

        Form.AddOptionTag(InputPlace.Id("ddlst_Select"), SelectName, SelectValue, SelectIsChecked);
        Form.SetBackgroundColor(InputPlace.Tag("body"), RandomColor);

        Control(Form);
    }
}

登入後複製

Each time the button is clicked, new values are added to the drop-down list and the background changes to a random color.

This is a simple example of CodeBehind framework interaction with WebFormsJS.

These features will be available in version 2.9 of the CodeBehind framework. In the coming days, version 2.9 of the CodeBehind framework will be released.

Advantages of WebFormsJS over using JavaScript and AJAX:

Simplified code: WebFormsJS provides a simpler and more concise way of interacting with web controls on the server-side, reducing the complexity of code and making it easier to maintain.
Automatic form serialization: WebFormsJS automatically serializes form data, eliminating the need to manually serialize and deserialize data using techniques like JSON or XML.
Progress bar: WebFormsJS includes a progress bar that displays the amount of data sent on the screen, providing a more engaging user experience.
Server-Side processing: WebFormsJS allows for server-side processing of form data, enabling more complex logic and validation to be performed on the server-side.
Support for multiple controls: WebFormsJS supports multiple controls, including checkboxes, radio buttons, select boxes, and text inputs, making it easy to interact with multiple controls on the server-side.
Customizable: WebFormsJS provides customizable options, such as the ability to set the progress bar display, error messages, and other settings.
Robust infrastructure: WebFormsJS provides a robust infrastructure for interacting with web controls on the server-side, making it suitable for large-scale applications.

In contrast, using JavaScript and AJAX:

Requires manual serialization and deserialization of form data
Does not provide a progress bar or error handling
Does not support multiple controls or server-side processing
Is more verbose and complex to use

Comparison with Frontend Frameworks

Frontend frameworks like React, Angular, and Vue have gained popularity in recent years for their ability to create dynamic and interactive user interfaces. However, compared to WebFormsJS, they have some key differences:

Complexity: Frontend frameworks can be complex to set up and require a deep understanding of JavaScript and the framework itself. In contrast, WebFormsJS simplifies web development by allowing developers to focus on server-side interactions and control the HTML elements.

Performance: While frontend frameworks offer high performance and efficiency, WebFormsJS also boasts high performance and low bandwidth consumption. It efficiently manages server responses and controls HTML tags, reducing the complexity of web development.

Customization: Frontend frameworks offer extensive customization options and flexibility to create unique user interfaces. WebFormsJS also provides customization options, such as postback, progress bar, and script extraction, but focuses more on server-side interaction.

Action Controls: WebFormsJS introduces the concept of Action Controls, which are received in INI format to define specific actions for HTML tags. This provides a clear and structured way to handle server responses and modify controls on the page.

Conclusion

WebFormsJS is a powerful JavaScript library that simplifies web development by providing a robust infrastructure for interacting with web controls on the server-side. Its advanced system, low bandwidth consumption, and customization options make it an attractive choice for developers looking to build efficient and scalable web applications.