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

webformsjs 是一个 javascript 库，它提供了与 codebehind 框架中的 web 控件交互的基础设施；这使得开发人员可以轻松地在服务器端管理 html 标签。

高效 web 开发的新架构

web 开发一直是一个复杂且耗时的过程，具有多层复杂性和大量需要管理的技术。 webformsjs 是一个新的 javascript 库，它通过提供与服务器端 web 控件（html 标签）交互的强大基础架构来简化此过程，使开发人员能够专注于服务器响应，而无需担心前端。

使用webformsjs很大程度上消除了前端开发的需要。你将不再需要使用 react、angular 和 vue 等前端框架，甚至不需要在前端使用 javascript。请注意，同时使用 webformsjs 和前端框架或 javascript 也会给您的项目带来许多优势。

请看下面的例子：

这是一个 html 页面，它请求服务器的页面将其内容添加到 id 为 mytag 的 div 标签中。

简单的 ajax 和 javascript

    <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><div id="mytag"></div>
<div>
    <h2>request from server</h2>
    <button type="button" onclick="loaddoc()">set content</button>
</div>

根据上面的代码，我们有一个 html 页面，其中有一个 javascript 方法来接收 ajax 形式的页面响应。

执行 javascript 方法会导致发生三件事：
1-从服务器查找页面内容并将其添加到 html 页面的一部分
2-更改背景颜色
3-为其中一个标签设置从右到左

注意：选项 2 和 3 是在客户端完成的，如果我们想从服务器更改它们，我们需要向服务器请求两次，或者我们必须在一个复杂的过程中通过一个请求检索所有三个选项。

为了支持webformsjs，我们将上面的html页面重写如下。

使用 webformsjs

    <script type="text/javascript" src="/script/web-forms.js"></script>

我们从下面的链接复制了 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=#409354
ta<h2>=right
</h2>

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类型的输入；我们想要在select中添加新的选项值，因此我们在view中放置了两个文本框输入用于新选项的名称和值，并且我们还在该view中创建了一个用于是否选择新选项的复选框输入.

查看（form.aspx）

@page
@controller formcontroller



    <meta charset="utf-8"><title>send form data</title><script type="text/javascript" src="/script/web-forms.js"></script>

我们首先激活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);
    }
}

每次单击按钮时，都会将新值添加到下拉列表中，并且背景会更改为随机颜色。

这是 codebehind 框架与 webformsjs 交互的简单示例。

这些功能将在 codebehind 框架 2.9 版本中提供。未来几天，codebehind 框架 2.9 版本将发布。

与使用 javascript 和 ajax 相比，webformsjs 的优点：

• 简化代码：webformsjs 提供了一种更简单、更简洁的与服务器端 web 控件交互的方式，降低了代码的复杂度，更易于维护。
• 自动表单序列化：webformsjs 自动序列化表单数据，无需使用 json 或 xml 等技术手动序列化和反序列化数据。
• 进度条：webformsjs 包含一个进度条，可显示屏幕上发送的数据量，提供更具吸引力的用户体验。
• 服务器端处理：webformsjs 允许服务器端处理表单数据，从而能够在服务器端执行更复杂的逻辑和验证。
• 支持多个控件：webformsjs 支持多种控件，包括复选框、单选按钮、选择框和文本输入，可以轻松与服务器端的多个控件进行交互。
• 可定制：webformsjs 提供了可定制的选项，例如可以设置进度条显示、错误消息和其他设置。
• 强大的基础设施：webformsjs 提供了强大的基础设施，用于与服务器端的 web 控件交互，使其适合大型应用程序。

相比之下，使用 javascript 和 ajax：

• 需要手动序列化和反序列化表单数据
• 不提供进度条或错误处理
• 不支持多个控件或服务器端处理
• 使用起来更加冗长和复杂

与前端框架的比较

react、angular 和 vue 等前端框架近年来因其创建动态和交互式用户界面的能力而广受欢迎。然而，与 webformsjs 相比，它们有一些关键的区别：

复杂性：前端框架的设置可能很复杂，并且需要对 javascript 和框架本身有深入的了解。相比之下，webformsjs 允许开发人员专注于服务器端交互并控制 html 元素，从而简化了 web 开发。

性能：前端框架提供高性能和高效率的同时，webformsjs 还具有高性能和低带宽消耗。它有效地管理服务器响应并控制 html 标签，降低 web 开发的复杂性。

定制：前端框架提供了广泛的定制选项和灵活性来创建独特的用户界面。 webformsjs 还提供自定义选项，例如回发、进度条和脚本提取，但更侧重于服务器端交互。

动作控件：webformsjs 引入了动作控件的概念，它以 ini 格式接收，用于定义 html 标签的特定动作。这提供了一种清晰且结构化的方式来处理服务器响应和修改页面上的控件。

结论

webformsjs 是一个功能强大的 javascript 库，它通过提供与服务器端 web 控件交互的强大基础架构来简化 web 开发。其先进的系统、低带宽消耗和定制选项使其成为寻求构建高效且可扩展的 web 应用程序的开发人员的有吸引力的选择。

相关链接

github 上的 webformsjs：
https://github.com/elanatframework/web_forms

github 上的codebehind：
https://github.com/elaatframework/code_behind

nuget 中的代码隐藏：
https://www.nuget.org/packages/codebehind/

代码隐藏页面：
https://elanat.net/page_content/code_behind