Using WebForms Core Technology to Cache HTML Tags

Websites and web apps typically have static sections that are continuously downloaded from the server. Typically, attempting to cache these tags is challenging. The purpose of this article is to explain how to use WebForms Core technology to cache static tags. WebForms Core makes extensive use of cache. In order to obtain the static tags of a webpage from the server only once, we wish to cache them entirely in the user's browser in this tutorial. Static tag caching drastically cuts down on bandwidth.

Layout page setting

Layout pages are a special type of page that can be used as a template for other pages. They are used to define a common layout that can be shared across multiple pages.

The following codes are related to a layout page that includes a header and footer and right and left menus. Also, on this page, the style tag has been added in the head section.

Global layout (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>

In the above situation, every time a request arrives at the server, the server sends the entire page to the client. Header and footer tags and right and left menus, along with styles, take up a lot of bandwidth and also put some pressure on processing and memory on the server.

The screenshot below is an HTML page that uses the layout.aspx.

If you look closely at the image above, you will notice that only the contents of the white section change for each page, and the other sections are static.

Note. In WebForms Core technology, an HTML page needs to be fully loaded only for the first request in the browser. After the initial load, requests are automatically placed by Ajax in the body tag (which can be changed). Therefore, if you do not want to change fixed elements such as header and footer tags and menus after new requests, you should change the default tag option in the web-forms.js file as follows.

WebFormsJS library (web-forms.js)

function cb_GetResponseLocation() {
    // Return the first main element instead of the body
    return document.getElementsByTagName("main")[0];
}

According to the above codes, server responses (not Action Controls) are placed in the main tag. If you do not do this setting, the page that is made through WebFormsJS requests the contents of the body tag, such as the header, footer, and fixed menus, will be deleted.

Note. When you add the WebFormsJS library to the HTML page, the automatic form submission is done in Ajax mode; if the server response is Action Controls, the Action Controls codes are rendered by WebFormsJS. Otherwise, the server response is placed in the body tag.

From here on, the work starts, and we want to change this situation. First, we changed the above layout page.

Global layout after change (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')">

    <main>
        @PageReturnValue
    </main>

</body>
</html>

The changes we applied to the layout page are as follows.

Header and footer, right and left menus, and style tag have been removed
In the body tag, the onload attribute is added with the value GetBack('/set_static_tags')

We create a new View page named style.aspx and insert the removed style tag. We create a page called set_static_tags.aspx, and by using the WebForms class, we set the header and footer pages and the right and left menus along with the style page in the example created in the WebForms class.

View (set_static_tags.aspx)

@page
@{
    WebForms form = new WebForms();

    form.AddText("<body>", LoadPage("/style.aspx"));
    form.AddTextToUp("<body>", LoadPage("/left_menu.aspx"));
    form.AddTextToUp("<body>", LoadPage("/header.aspx"));
    form.AddText("<body>", LoadPage("/right_menu.aspx"));
    form.AddText("<body>", LoadPage("/footer.aspx"));

    form.SetCache(34164000); // One Year
}
@form.Response(context)

According to the View code above, after a new instance of the WebForms class is created, the following Action Controls are created in order to be applied to the client:

The style page is added inside the body tag (the order does not matter)
The left menu page is added above the internal content of the body tag
The header page is added above the internal content of the body tag
The left menu page is added at the bottom of the internal content of the body tag
The footer page is added below the internal content of the body tag
Action Controls commands are cached for one year (34164000 seconds) (the order does not matter)
Finally, calling @form.Response(context) causes the Action Controls to be written on the page

The order of calling the header and footer and the right and left menus is important and should be done in the order of the above codes.

The GetBack method is one of the important methods of WebForms Core technology, which is present in the WebFormsJS library. The methods that are added to the onload attribute of the body tag are executed after the HTML page is called, so calling the GetBack('/set_static_tags') method causes the set_static_tags.aspx page to be called.

Note. In the settings of the options file in the CodeBehind framework, you must enable the ability to rewrite views to the directory ("rewrite_aspx_file_to_directory=true"). Otherwise, you must set the GetBack method as follows.

GetBack('/set_static_tags.aspx');

The SetCache method is stored in the user's browser for a long time. You can use the SetSessionCache method when the user logs into your system. The SetSessionCache method keeps the data as long as the browser and after exiting the browser, the data is automatically lost.

Now, if you run the project and see the HTML source of the executed page, the header, footer, right and left menus, and style tag are not sent from the server. Also, the set_static_tags.aspx page is executed only once, and even after refreshing the page in the browser, this page is no longer requested.

Conclusion

In this article, we learned how to cache static tags in HTML using WebForms Core technology. Caching static HTML tags is a modern technique on the web, and using that leads to a decrease in bandwidth.

ASP.NET Core 9.0 Hosting Recommendation

One of the most important things when choosing a good ASP.NET Core 9.0 hosting is the feature and reliability. HostForLIFE is the leading provider of Windows hosting and affordable ASP.NET Core, their servers are optimized for PHP web applications. The performance and the uptime of the hosting service are excellent and the features of the web hosting plan are even greater than what many hosting providers ask you to pay for.

At HostForLIFE.eu, customers can also experience fast ASP.NET Core hosting. The company invested a lot of money to ensure the best and fastest performance of the datacenters, servers, network and other facilities. Its datacenters are equipped with the top equipments like cooling system, fire detection, high speed Internet connection, and so on. That is why HostForLIFEASP.NET guarantees 99.9% uptime for ASP.NET Core. And the engineers do regular maintenance and monitoring works to assure its Orchard hosting are security and always up.