How to Automatically change the version of css and js files in Asp.Net | C#.Net

By
Advertisement


Introduction:
In my previous article I have explained about how to get all files in a directory using C#.Net and Asp.Net. In this article I am going to explain about how to automatically update the version of css and js when file gets changed.

Explanation:
When you update JavaScript or CSS files that are already cached in users' browsers, most likely many users won’t get that for some time because of the caching at the browser. You need some way to force browser to download the latest files. There’s no way to do that effectively across all browsers unless you change the file name or you change the URL of the files by introducing some unique query string. Most web developers use the query string approach and use a version suffix to send the new file to the browser. For example:
<script type="text/javascript" src="js/jquery-1.4.1.min.js?v=1" ></script>
<script type="text/javascript" src="js/myscript.js?v=1" ></script>
<link rel="stylesheet" type="text/css" href="css/style.css?v=1"/>
In order to do this, developers have to go to all the pages and then increase the version number. If you forget to do this on some page, that page may break because browser uses old cached script. To avoid this we should change the css and js version automatically whenever changes occur.
To achieve this  include Update.cs in App_Code and Include the below code in Global.asax file.
protected void Application_BeginRequest(object sender, EventArgs e)
{
    if (Request.IsLocal)
        System.Threading.Thread.Sleep(50);
    var request = Request;
    var url = request.Url;
    var applicationPath = request.ApplicationPath;
    string fullurl = url.ToString();
    string baseUrl = url.Scheme + "://" + url.Authority + applicationPath.TrimEnd('/') + '/';
    string currentRelativePath = request.AppRelativeCurrentExecutionFilePath;
    if (request.HttpMethod == "GET")
    {
        if (currentRelativePath.EndsWith(".aspx"))
        {
            var folderPath = currentRelativePath.Substring(2, currentRelativePath.LastIndexOf('/') - 1);
            Response.Filter = new Dotnetpickles.Update(
                    Response,
                    relativePath =>
                    {
                        if (Context.Cache[relativePath] == null)
                        {
                            try
                            {
                                var physicalPath = Server.MapPath(relativePath);
                                var version = "?v=" +
                                    new System.IO.FileInfo(physicalPath).LastWriteTime
                                    .ToString("yyyyMMddhhmmss");
                                Context.Cache.Add(relativePath, version, null,
                                    DateTime.Now.AddMinutes(1), TimeSpan.Zero,
                                    CacheItemPriority.Normal, null);
                                return version;
                            }
                            catch
                            {
                                return "";
                            }

                        }
                        else
                        {
                            return Context.Cache[relativePath] as string;
                        }
                    },
                    "",
                    "",
                    "",
                    baseUrl,
                    applicationPath,
                    folderPath);
        }
        else
        {

        }
    }
}

The code will get the last modified date of the css and js file and add it as a version of the file. So every time you update the file automatically version will get updated. If you view the source of the page you can better understand it. Below is the screenshot of the output.


Do you like this article? Help us to improve. Please post your comments below.

Download Source Code:



1 comment:

  1. It is good solution but not working properly. I have used the same code as given above but some where it gets break the code and append version info in the type attribute of link and also add version info to the type attribute of hidden element that should not happen.

    Please help me to resolve this issue.

    Thanks

    ReplyDelete

Online Casino