GitHub 上的新存储库 WebFormsJS 就在这里！-js教程-PHP中文网

首页

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jul 19, 2024 pm 02:58 PM

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.

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

Java教程

1666

CakePHP 教程

1426

Laravel 教程

1328

PHP教程

1273

C# 教程

1255

显示更多

Related knowledge

JavaScript引擎：比较实施 Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。

Python vs. JavaScript：学习曲线和易用性 Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

从C/C到JavaScript：所有工作方式 Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript和Web：核心功能和用例 Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。

JavaScript在行动中：现实世界中的示例和项目 Apr 19, 2025 am 12:13 AM

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用，涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

了解JavaScript引擎：实施详细信息 Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。

Python vs. JavaScript：社区，图书馆和资源 Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

Python vs. JavaScript：开发环境和工具 Apr 26, 2025 am 12:09 AM

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda，适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack，适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。

See all articles

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

高效 Web 开发的新架构

=right 这里，前两个字符是ta，表示文本对齐，然后确定将应用到名为li的标签上，后面是等号（=）有一个值 right ，表示从右到左。

服务器端的 WebFormsJS

Advantages of WebFormsJS over using JavaScript and AJAX:

Comparison with Frontend Frameworks

Conclusion

Related links

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题