使用 WebForms 核心技术缓存 HTML 标签
在网站和 Web 应用程序中，通常会有一些静态部分，这些部分会频繁地从服务器请求。缓存这些标签通常是个挑战。在本文中，我们将介绍如何使用 WebForms Core 技术缓存静态标签的理念。通过将静态标签完全缓存到用户的浏览器中，我们能够在仅从服务器请求一次的情况下显著减少带宽。
一. 布局页面设置
布局页面是一种特殊类型的页面，可以作为其他页面的模板。它们用于定义可以在多个页面之间共享的公共布局。
以下代码是一个包含头部和底部以及左右菜单的布局页面示例。
全局布局 (layout.aspx)
@page
@islayout
<!DOCTYPE html>
<html>
<head>
<title>CodeBehind Framework - @ViewData.GetValue("title")</title>
<script type="text/javascript" src="/script/web-forms.js"></script>
<meta charset="utf-8" />
<style>
/*
...
*/
</style>
</head>
<body>
@LoadPage("/header.aspx") // 加载头部页面
@LoadPage("/left_menu.aspx") // 加载左侧菜单
<main>
@PageReturnValue // 页面内容将在此处显示
</main>
@LoadPage("/right_menu.aspx") // 加载右侧菜单
@LoadPage("/footer.aspx") // 加载底部页面
</body>
</html>
在上述代码中，每当请求到达服务器时，服务器会将整个页面发送给客户端。头部、底部、左右菜单及样式占用了大量带宽，并增加了服务器的处理和内存压力。
注意事项
在 WebForms Core 技术中，一个 HTML 页面只需在浏览器中的第一次请求中完全加载。初始加载后，后续请求会通过 Ajax 自动放置在 body 标签中。如果不希望在新的请求后更改固定元素（如头部和底部标签及菜单），需要在 web-forms.js 文件中更改默认设置如下：
WebFormsJS 库 (web-forms.js)
function cb_GetResponseLocation() {
// 返回第一个 main 元素而不是 body
return document.getElementsByTagName("main")[0];
}
根据上述代码，服务器响应（非 Action 控件）会放置在 main 标签中。如果不进行此设置，通过 WebFormsJS 请求的页面内容（如头部、底部和固定菜单）将会被删除。
注意事项
当将 WebFormsJS 库添加到 HTML 页面时，自动表单提交将以 Ajax 模式进行；如果服务器响应是 Action 控件，WebFormsJS 将渲染这些 Action 控件的代码。否则，服务器响应会放置在 body 标签中。
二. 修改布局页面
接下来，我们希望改变这种情况。首先，我们修改上述布局页面。
修改后的全局布局 (layout.aspx)
@page
@islayout
<!DOCTYPE html>
<html>
<head>
<title>CodeBehind Framework - @ViewData.GetValue("title")</title>
<script type="text/javascript" src="/script/web-forms.js"></script>
<meta charset="utf-8" />
</head>
<body onload="GetBack('/set_static_tags')"> // 页面加载时调用 GetBack 方法
<main>
@PageReturnValue // 页面内容将在此处显示
</main>
</body>
</html>
修改说明
在布局页面中进行了以下更改：
-
移除了头部、底部、左右菜单和样式标签。 -
在 body 标签中添加了 onload 属性，值为 GetBack('/set_static_tags')。 -
创建一个名为 style.aspx 的新视图页面，并插入移除的样式标签。 -
创建一个名为 set_static_tags.aspx 的页面，使用 WebForms 类设置头部、底部、左右菜单及样式页面。
视图 (set_static_tags.aspx)
@page
@{
WebForms form = new WebForms(); // 创建 WebForms 实例
form.AddText("<body>", LoadPage("/style.aspx")); // 将样式页面添加到 body 标签中
form.AddTextToUp("<body>", LoadPage("/left_menu.aspx")); // 将左侧菜单添加到 body 标签上方
form.AddTextToUp("<body>", LoadPage("/header.aspx")); // 将头部添加到 body 标签上方
form.AddText("<body>", LoadPage("/right_menu.aspx")); // 将右侧菜单添加到 body 标签中
form.AddText("<body>", LoadPage("/footer.aspx")); // 将底部添加到 body 标签中
form.SetCache(34164000); // 设置缓存时间为一年（34164000 秒）
}
@form.Response(context) // 输出 Action 控件的响应
根据上述视图代码，在创建 WebForms 类的新实例后，以下 Action 控件会按顺序应用到客户端：
-
样式页面被添加到 body 标签内（顺序不重要）。 -
左侧菜单页面被添加到 body 标签的顶部。 -
头部页面被添加到 body 标签的顶部。 -
右侧菜单页面被添加到 body 标签的底部。 -
底部页面被添加到 body 标签的底部。 -
Action 控件的命令被缓存一年（34164000 秒）。
最后，调用 @form.Response(context) 会将 Action 控件写入页面。头部、底部、左右菜单的调用顺序是重要的，需按照上述代码的顺序执行。
GetBack 方法
GetBack 方法是 WebForms Core 技术中一个重要的方法，存在于 WebFormsJS 库中。添加到 body 标签的 onload 属性的方法在 HTML 页面调用后执行，因此调用 GetBack('/set_static_tags') 方法会请求 set_static_tags.aspx 页面。
注意事项
在 CodeBehind 框架的选项文件设置中，必须启用将视图重写到目录的能力（rewrite_aspx_file_to_directory=true）。否则，必须将 GetBack 方法设置为：
GetBack('/set_static_tags.aspx');
三. 缓存静态标签的好处
SetCache 方法会在用户的浏览器中长时间存储数据。若用户登录系统，则可以使用 SetSessionCache 方法。SetSessionCache 方法会在浏览器开启时保留数据，并在退出浏览器后自动丢失。
现在，如果你运行项目并查看执行页面的 HTML 源代码，你会发现头部、底部、左右菜单和样式标签不会从服务器发送。此外，set_static_tags.aspx 页面只会执行一次，即使在浏览器中刷新页面，此页面也不会被请求。
四. 结论
在本文中，我们学习了如何使用 WebForms Core 技术缓存 HTML 中的静态标签。缓存静态 HTML 标签是一种现代网页技术，能够有效降低带宽使用。