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中文網其他相關文章！
