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-为其中一个标签设置从右到左

为了支持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 textbc=#409354ta<h2>=right</h2>

elanat 团队将这种结构称为“动作控制”。操作控件是以 ini 格式接收的 webformsjs 接收代码。 webformsjs 自动检测服务器响应是否具有操作控件。如果服务器的响应是基于以[web-forms]开头的ini文件的结构，它将处理action controls，否则它将在页面上以ajax的形式替换服务器的响应。

服务器端的 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 的优点：

相比之下，使用 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