搜索

首页 >web前端 >js教程 >GitHub 上的新存储库 WebFormsJS 就在这里！

GitHub 上的新存储库 WebFormsJS 就在这里！

WBOY
WBOY原创
2024-07-19 14:58:28858浏览

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.

Related links

WebFormsJS on GitHub:
https://github.com/elanatframework/Web_forms

CodeBehind on GitHub:
https://github.com/elanatframework/Code_behind

CodeBehind in NuGet:
https://www.nuget.org/packages/CodeBehind/

CodeBehind page:
https://elanat.net/page_content/code_behind

以上是GitHub 上的新存储库 WebFormsJS 就在这里！的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript json ajax html angular define if for while select checkbox format require xml Error using class finally Attribute JS this display background input li github https
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：Nodejs Event Loop Phases下一篇：Building a Chat Application with Ollama&#s Llama odel Using JavaScript, HTML, and CSS

相关文章

查看更多