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

WBOY

发布时间：2024-07-19 09:07:01

481人浏览过

来源于dev.to

转载

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

<!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<body>=#409354 这里前两个字符是bc，表示背景颜色，然后指定应用于body标签，等号（=）后面是颜色价值.
第3行：ta<h2>=right 这里前两个字符是ta，表示文本对齐，然后确定将应用到名为li的标签上，等号（=）后面有一个值right 意思是从右到左。

服务器端的 webformsjs

如果使用灵活的后端框架，可以轻松创建生成action controls的流程；否则，你可以要求业主或开发人员重写后端框架的核心或创建一个新模块来支持webformsjs。

在codebehind框架中使用webformsjs的示例

Peppertype.ai

高质量AI内容生成软件，它通过使用机器学习来理解用户的需求。

下载

我们创建一个新的view，其中有一个select类型的输入；我们想要在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);
    }
}

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

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

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