Caching HTML Tags Using WebForms Core Technology

Introduction

There are usually static sections in websites and web applications that are constantly requested from the server. Normally, trying to cache these tags is difficult. In this article, we want to teach the idea of caching static tags using WebForms Core technology. Cache has many uses in WebForms Core. In this tutorial, we want to cache the static tags of a web page completely in the user's browser to get these tags from the server only once. Caching static tags significantly reduces 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.

HTML page

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.

Reference

CodeBehind Framework in GitHub