GitHub 上の新しいリポジトリ、WebFormsJS が登場しました!-jsチュートリアル-php.cn

New Repository on GitHub, WebFormsJS is Here!

WebFormsJS は、CodeBehind フレームワークで Web コントロールと対話するためのインフラストラクチャを提供する JavaScript ライブラリです。これにより、開発者はサーバー側で HTML タグを簡単に管理できるようになります。

効率的な Web 開発のための新しいアーキテクチャ

Web 開発は常に複雑で時間のかかるプロセスであり、複数の複雑なレイヤーと管理する多数のテクノロジが必要です。 WebFormsJS は、サーバー側で Web コントロール (HTML タグ) と対話するための堅牢なインフラストラクチャを提供することでこのプロセスを簡素化する新しい JavaScript ライブラリです。これにより、開発者はフロントエンドを気にせずにサーバーの応答に集中できるようになります。

WebFormsJS を使用すると、フロントエンド開発の必要性が大幅になくなります。 React、Angular、Vue などのフロントエンドフレームワークを使用する必要はなくなり、フロントエンドで JavaScript を操作する必要もなくなります。 WebFormsJS とフロントエンドフレームワークまたは JavaScript を同時に使用すると、プロジェクトに多くの利点がもたらされることに注意してください。

次の例を参照してください:

これは、ID MyTag を持つ div タグ内にコンテンツを追加するようサーバーにページをリクエストする HTML ページです。

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>

ログイン後にコピー

上記のコードによると、AJAX 形式でページの応答を受け取る JavaScript メソッドが含まれる HTML ページが存在します。

JavaScript メソッドを実行すると、次の 3 つのことが起こります。
1- サーバーからページのコンテンツを検索し、HTML ページの一部に追加します
2- 背景色の変更
3- いずれかのタグを右から左に設定します

注: オプション 2 と 3 はクライアント側で実行され、サーバーから変更したい場合は、サーバーにさらに 2 回リクエストするか、複雑なプロセスで 1 回のリクエストで 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 ファイルの構造に基づいている場合は、アクションコントロールが処理されます。それ以外の場合は、ページ上のサーバーの応答が AJAX 形式で置き換えられます。

行 1: stMyTag=サーバー応答テキストここで、最初の 2 文字は st で、テキストを設定することを意味し、その後、ID が MyTag のタグに適用することが指定されており、等号の後に続きます。 (=) 受信したテキストがあります。
行 2: bc=#409354 ここで、最初の 2 文字は bc (背景色を意味します) であり、それが body タグと等号文字 (= の後に) に適用されるように指定されています。 ) カラー値があります。
3 行目: ta
=right ここで、最初の 2 文字は ta で、テキストの位置合わせを意味し、その後、li という名前のタグに適用されることが決定され、等号 (=) の後に適用されます。右から左を意味する right という値があります。

サーバー側の WebFormsJS

柔軟なバックエンドフレームワークを使用すると、アクションコントロールを生成するプロセスを簡単に作成できます。それ以外の場合は、所有者または開発者にバックエンドフレームワークのコアを書き直すか、WebFormsJS をサポートする新しいモジュールを作成するよう依頼できます。

CodeBehind フレームワークで WebFormsJS を使用する例

選択タイプの入力がある新しいビューを作成します。新しいオプションの値を選択に追加したいので、ビューに新しいオプションの名前と値を入力する 2 つのテキストボックス入力を配置し、このビューで新しいオプションが選択されているかどうかを示すチェックボックス入力も作成します。 .

ビュー (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.