Repositori Baharu di GitHub, WebFormsJS ada di sini!-tutorial js-php.cn

New Repository on GitHub, WebFormsJS is Here!

WebFormsJS ialah perpustakaan JavaScript yang menyediakan infrastruktur untuk berinteraksi dengan kawalan web dalam rangka kerja CodeBehind; ini membolehkan pembangun mengurus teg HTML dengan mudah di bahagian pelayan.

Seni Bina Baharu untuk Pembangunan Web yang Cekap

Pembangunan web sentiasa menjadi proses yang kompleks dan memakan masa, dengan pelbagai lapisan kerumitan dan pelbagai teknologi untuk diuruskan. WebFormsJS ialah perpustakaan JavaScript baharu yang memudahkan proses ini dengan menyediakan infrastruktur yang teguh untuk berinteraksi dengan kawalan web (teg HTML) di bahagian pelayan, membenarkan pembangun menumpukan pada respons pelayan tanpa perlu risau tentang bahagian hadapan.

Menggunakan WebFormsJS menghapuskan keperluan untuk pembangunan bahagian hadapan sebahagian besarnya. Anda tidak perlu lagi menggunakan rangka kerja bahagian hadapan seperti React, Angular dan Vue, malah anda tidak perlu bekerja dengan JavaScript pada bahagian hadapan. Sila ambil perhatian bahawa penggunaan WebFormsJS secara serentak dengan rangka kerja bahagian hadapan atau JavaScript juga memberikan banyak kelebihan kepada projek anda.

Sila lihat contoh berikut:

Ini ialah halaman HTML yang meminta halaman daripada pelayan untuk menambah kandungannya di dalam teg div dengan id MyTag.

AJAX yang ringkas dengan JavaScript

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

Salin selepas log masuk

Mengikut kod di atas, kami mempunyai halaman HTML di mana terdapat kaedah JavaScript untuk menerima respons halaman dalam bentuk AJAX.

Melaksanakan kaedah JavaScript menyebabkan tiga perkara berlaku:
1- Mencari kandungan halaman dari pelayan dan menambahkannya pada sebahagian halaman HTML
2- Menukar warna latar belakang
3- Tetapkan kanan ke kiri untuk salah satu tag

Nota: pilihan 2 dan 3 dilakukan pada bahagian klien, dan jika kita ingin menukarnya daripada pelayan, kita perlu meminta pelayan dua kali lagi atau kita perlu mendapatkan ketiga-tiga pilihan dengan satu permintaan dalam proses yang rumit .

Untuk menyokong WebFormsJS, kami menulis semula halaman HTML di atas seperti di bawah.

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

Salin selepas log masuk

Kami menyalin fail web-forms.js daripada pautan di bawah dan menyimpannya dalam laluan skrip/web-forms.js.

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

Apabila kami meminta halaman daripada pelayan, pelayan menghantar respons berikut.

Respons pelayan

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

Salin selepas log masuk

Kami di pasukan Elanat memanggil struktur ini Kawalan Tindakan. Kawalan Tindakan ialah kod yang diterima WebFormsJS yang diterima dalam format INI. WebFormsJS secara automatik mengesan sama ada respons pelayan mempunyai Kawalan Tindakan atau tidak. Jika respons pelayan adalah berdasarkan struktur fail INI yang bermula dengan [web-forms], ia akan memproses Kawalan Tindakan, jika tidak, ia akan menggantikan respons pelayan dalam bentuk AJAX pada halaman.

Baris 1: stMyTag=Teks respons pelayan Di sini, dua aksara pertama ialah st, yang bermaksud untuk menetapkan teks, dan kemudian ia dinyatakan bahawa ia harus digunakan pada teg dengan id MyTag, dan selepas aksara yang sama (=) terdapat teks yang diterima.
Baris 2: bc=#409354 Di sini, dua aksara pertama ialah bc, yang bermaksud warna latar belakang, dan kemudian ditentukan bahawa ia harus digunakan pada teg badan, dan selepas aksara yang sama (= ) ada nilai warna.
Baris 3: ta
=kanan Di sini, dua aksara pertama ialah ta, yang bermaksud penjajaran teks, dan kemudian ditentukan bahawa ia akan digunakan pada teg bernama li, dan selepas aksara yang sama (=) terdapat nilai kanan yang bermaksud kanan ke kiri.

WebFormsJS di bahagian pelayan

Jika anda menggunakan rangka kerja bahagian belakang yang fleksibel, anda boleh membuat proses untuk menjana Kawalan Tindakan dengan mudah; jika tidak, anda boleh meminta pemilik atau pembangun untuk menulis semula teras rangka kerja bahagian belakang atau mencipta modul baharu untuk menyokong WebFormsJS.

Contoh penggunaan WebFormsJS dalam rangka kerja CodeBehind

Kami mencipta Paparan baharu di mana terdapat input jenis pilihan; kami ingin menambah nilai pilihan baharu dalam pilih, jadi kami meletakkan dua input kotak teks untuk nama dan nilai pilihan baharu dalam Paparan, dan kami juga membuat input kotak semak sama ada pilihan baharu itu dipilih atau tidak dalam Paparan ini .

Lihat (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>

Salin selepas log masuk

Kami mula-mula mengaktifkan atribut IgnoreViewAndModel; dengan melakukan ini, kami menghalang halaman Lihat daripada kembali. Kemudian kami membuat contoh kelas WebForms dan menambah nilai baharu dalam senarai juntai bawah mengikut nilai yang dihantar melalui kaedah Borang. Akhir sekali, kita mesti meletakkan contoh kelas WebForms yang dibuat di dalam kaedah Kawalan.

Pengawal (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);
    }
}

Salin selepas log masuk

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.