2024 年，Elanat 通过引入 WebForms Core 赋予 Web 开发新的含义。 WebForms Core 技术允许您从服务器管理 HTML 标签。该技术简化了 Web 开发的复杂过程。在WebForms Core技术中，服务器负载较低，类似于前端框架中的JSON响应。服务器响应只是发送到客户端的 INI 格式的小命令，这会导致 HTML 页面的更新。该技术使用户能够在等待服务器响应的同时与应用程序的其他部分进行交互。
在本文中，我们将证明为什么尽管有 WebForms 核心技术，前端还是变得过时了。
我们正在研究的场景是在管理页面上显示联系人列表。在这种情况下，管理员可以通过单击删除按钮从数据库中删除联系人。在这种情况下，页面的状态将被保留，并且删除联系人后，联系人标签也会从 HTML 页面中删除。
在此示例中，我们使用了 CodeBehind 框架。
请注意，WebForms Core 技术可以用于所有编程语言和所有后端框架。
在此示例中，HTML 提供前端结构，JavaScript 处理客户端逻辑，C# 控制器处理服务器端操作。
此 HTML 结果设置了一个包含三个 div 元素的网页，每个元素包含一条消息和一个按钮。单击该按钮时，它会使用特定 ID 调用 DeleteContact JavaScript 函数。
HTML 结果
<!DOCTYPE html>
<html>
<head>
<title>Using JavaScript</title>
<script src="/script/contact.js"></script>
</head>
<body>
<div>
<p>In the head section, a link to an external JavaScript file named contact.js has been added; the content of the contact.js file is as follows.</p>
<p>This JavaScript file defines the DeleteContact function, which sends an HTTP request to delete a contact and deletes the contact tag.</p>
<p><strong>JavaScript file (contact.js)</strong><br>
</p>
<pre class="brush:php;toolbar:false">function DeleteContact(Id)
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function ()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200 && xmlhttp.responseText == "true")
document.getElementById("Row" + Id).outerHTML = null;
}
xmlhttp.open("GET", "/admin/contact/?do_delete=true&contact_id=" + Id, true);
xmlhttp.send();
}
在控制器中，main方法首先检查查询字符串是否包含名为do_delete的参数；如果存在，则调用 btn_Delete_Click 方法。
btn_Delete_Click 方法中，用户被删除，然后返回一个 true 字符串给客户端。
控制器
using CodeBehind;
public class ContactController : CodeBehindController
{
public void PageLoad(HttpContext context)
{
if (context.Request.Query["do_delete"].Has())
btn_Delete_Click(context);
}
private void btn_Delete_Click(HttpContext context)
{
int Id = context.Request.Query["contact_id"].ToNumber();
new Database().DeleteContact(Id);
Write("true");
}
}
在此示例中，HTML 提供前端结构，WebFormsJS 自动处理客户端逻辑，C# 控制器处理服务器端操作。
此 HTML 输出设置了一个包含三个 div 元素的网页，每个元素在表单标记内包含一条消息和一个提交按钮。单击按钮时，页面状态保持静态，并且 WebFormsJS 自动向服务器发送 XMLHttpRequest。
HTML 结果
<!DOCTYPE html>
<html>
<head>
<title>Using JavaScript</title>
<script src="/script/contact.js"></script>
</head>
<body>
<div>
<p>In the head section, a link to an external JavaScript file named contact.js has been added; the content of the contact.js file is as follows.</p>
<p>This JavaScript file defines the DeleteContact function, which sends an HTTP request to delete a contact and deletes the contact tag.</p>
<p><strong>JavaScript file (contact.js)</strong><br>
</p>
<pre class="brush:php;toolbar:false">function DeleteContact(Id)
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function ()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200 && xmlhttp.responseText == "true")
document.getElementById("Row" + Id).outerHTML = null;
}
xmlhttp.open("GET", "/admin/contact/?do_delete=true&contact_id=" + Id, true);
xmlhttp.send();
}
注意：请注意，Control 方法与 CodeBehind 框架相关。如果您使用的框架还没有 WebForms Core 技术模块，您可以将 Form.Response() 方法设置为服务器响应。
客户要求什么？
WebForms Core 技术忠实于 HTML 结构，因此请求以下 URL。
/admin/contact/?btn_Delete=1
服务器正在响应什么？
using CodeBehind;
public class ContactController : CodeBehindController
{
public void PageLoad(HttpContext context)
{
if (context.Request.Query["do_delete"].Has())
btn_Delete_Click(context);
}
private void btn_Delete_Click(HttpContext context)
{
int Id = context.Request.Query["contact_id"].ToNumber();
new Database().DeleteContact(Id);
Write("true");
}
}
使用 WebForms Core 技术删除标签非常容易。您只需要创建 WebForms 类的实例，然后调用 Delete 方法，最后使用 Control 方法发送命令。
注意：使用WebForms Core，您可以将各种命令应用到HTML页面，例如创建标签、添加属性、更改背景颜色等
示例
在此示例中，向用户显示一条指示联系人已成功删除的消息 3 秒。
在下面的代码中，除了删除contact标签之外，还在form标签的末尾添加了一个h3标签，并且在下面的行中，将该标签的背景颜色更改为绿色，并且消息文本指示h3 标签内添加了联系人已成功删除的信息。 Delete方法也会删除h3标签，而AssignDelay方法会导致删除h3标签有3秒的延迟。
<!DOCTYPE html>
<html>
<head>
<title>Using WebForms Core Technology</title>
<script src="/script/web-forms.min.js"></script>
</head>
<body>
<form action="/admin/contact">
<div>
<p>In the head section, a link to the WebFormsJS library has been added.</p>
<blockquote>
<p><strong>Note:</strong> In WebForms Core technology, the WebFormsJS library on the front-end automatically communicates with the WebForms class on the back-end.</p>
</blockquote>
<p>In the controller, the main method first checks whether the query string contains a parameter called btn_Delete or not; if present, the btn_Delete_Click method is called.<br>
In the btn_Delete_Click method, the user is deleted and then an instance of the WebForms class is created and the Delete method is called, and finally, by calling the Control method, the commands of the created instance of the WebForms class are placed in the server response and sent to the client.</p>
<p><strong>Controller</strong><br>
</p>
<pre class="brush:php;toolbar:false">using CodeBehind;
public class ContactController : CodeBehindController
{
public void PageLoad(HttpContext context)
{
if (context.Request.Query["btn_Delete"].Has())
btn_Delete_Click(context);
}
private void btn_Delete_Click(HttpContext context)
{
int Id = context.Request.Query["btn_Delete"].ToNumber();
new Database().DeleteContact(Id);
WebForms Form = new WebForms();
Form.Delete("Row" + Id);
Control(Form);
}
}
上例中从服务器发送到客户端的代码也是根据以下命令
[web-forms] deRow1=1
在WebForms Core技术中，生成INI代码所需的处理量相当于前端框架开发过程中序列化生成JSON格式所需的处理量；因此，服务器的压力处于最佳水平。
这个例子清楚地表明了WebForms Core技术带来了JavaScript的所有好处，并且WebForms Core和JavaScript之间没有性能差异。 WebForms Core 技术的优势直接惠及寻求简单性而不牺牲性能的开发人员。开发人员不再需要编写大量的 JavaScript 代码，进一步减少了对专业前端技能的需求。这是现代网络开发的标志！
虽然近年来Web开发已经从后端转向前端，但WebForms Core的意外引入对前端Web开发来说是一个重大挑战。 WebForms Core解决了后端问题，鼓励Web开发人员专注于后端。这代表了开发人员处理 Web 应用程序方式的重大转变。
简单性：WebForms Core 方法使用标准 HTML 提交表单，实现起来简单、容易且快速，无需额外的 JavaScript 知识。
服务器端管理：管理逻辑完全在服务器端，对于熟悉服务器端编程的开发者来说是一个强大而专业的工具。
维护页面状态：使用 WebForms Core 可以提供流畅的用户体验，因为无需刷新整个页面即可管理标签。
即时反馈：标签在服务器响应后立即更改，为用户提供即时反馈，并允许用户在处理请求时继续与页面交互。
无需标记：该技术不需要在页面上进行标记；而使用 JavaScript 需要将事件直接应用于标签（或间接使用 AddEventListener 方法）。
减少带宽使用：由于服务器可以以 INI 等轻量级格式发送简单命令，因此减少了对大型 JavaScript 包的需求。
高级交互性：WebForms 核心技术提供了强大的工具，用于创建复杂的用户界面、管理状态并确保响应式、交互式和引人入胜的用户体验。
Elanat 的 WebForms 核心技术代表了一种革命性的方法，可以显着改变 Web 开发的格局。通过将控制从前端转移到服务器端并简化数据管理，它挑战了现有客户端框架的主导地位。随着这项技术的发展，它可能会导致对传统前端开发实践的重新评估，从而可能使它们在某些情况下变得不那么相关。
以上是前端正在变得过时的详细内容。更多信息请关注PHP中文网其他相关文章！
