All posts tagged 'revent-js-caching-in-aspnet'

This is like a very common issue, specially for those who are working on public site which is live and they have to release the builds every week or month and if the new build contain JS files then your change will not reflect on the client browser until someone there presses ctrl + F5.So, after googling this issue. I came to know it is possible to prevent the browser from accessing the cache copy by writing the script tag as below

   1: <script type="text/javascript" src="../Includes/main.js?random=556"></script>

It is good, when I have a single or some number of pages to change. Unfortunately, That is not the case I have hundreds of pages and that will be hassle to make those changes again and again for every build. So, I try to make this thing happen using Response Filter.

Create Response Filter:

So, to write the Response Filter we need to create a class and which is extended from Stream (System.IO.Stream) and I named it BuildTokenFilter.

   1: Imports Microsoft.VisualBasic   2: Imports System.IO   3: Imports System.Text.RegularExpressions   4: Imports System.Configuration   5:    6:    7: Public Class BuildTokenFilter   8:     Inherits Stream   9:     Private _responseStream As Stream  10:     Public Sub New(ByVal responseStream As Stream)  11:         _responseStream = responseStream  12:     End Sub  13:     Public Overrides ReadOnly Property CanRead() As Boolean  14:         Get  15:             Return _responseStream.CanRead  16:         End Get  17:     End Property  18:     Public Overrides ReadOnly Property CanSeek() As Boolean  19:         Get  20:             Return _responseStream.CanSeek  21:         End Get  22:     End Property  23:   24:     Public Overrides ReadOnly Property CanWrite() As Boolean  25:         Get  26:             Return _responseStream.CanWrite  27:         End Get  28:     End Property  29:   30:     Public Overrides Sub Flush()  31:         _responseStream.Flush()  32:     End Sub  33:   34:     Public Overrides ReadOnly Property Length() As Long  35:         Get  36:             Return _responseStream.Length  37:         End Get  38:     End Property  39:   40:     Public Overrides Property Position() As Long  41:         Get  42:             Return _responseStream.Position  43:         End Get  44:         Set(ByVal value As Long)  45:             _responseStream.Position = value  46:         End Set  47:     End Property  48:   49:     Public Overrides Function Read(ByVal buffer() As Byte, ByVal offset As Integer, ByVal count As Integer) As Integer  50:         Return _responseStream.Read(buffer, offset, count)  51:     End Function  52:     Public Overrides Function Seek(ByVal offset As Long, ByVal origin As System.IO.SeekOrigin) As Long  53:         _responseStream.Seek(offset, origin)  54:     End Function  55:   56:     Public Overrides Sub SetLength(ByVal value As Long)  57:         _responseStream.SetLength(value)  58:     End Sub  59:     Public Overrides Sub Write(ByVal buffer() As Byte, ByVal offset As Integer, ByVal count As Integer)  60:         Dim strRegex As String = "src=(?<Link>.*js)"  61:         Dim BuildTokenString As String = "?token=" & IIf(ConfigurationManager.AppSettings("BuildToken") = Nothing, "1.0", ConfigurationManager.AppSettings("BuildToken"))  62:         Dim objRegex As New Regex(strRegex)  63:         Dim html As String = System.Text.Encoding.UTF8.GetString(buffer)  64:         Dim extCharCount As Integer = 0  65:   66:         Dim objCol As MatchCollection = objRegex.Matches(html)  67:         For Each m As Match In objCol  68:             extCharCount += BuildTokenString.Length  69:             Dim newJSValue As String = m.Value & BuildTokenString  70:             html = html.Replace(m.Value, newJSValue)  71:         Next  72:         buffer = System.Text.Encoding.UTF8.GetBytes(html)  73:         _responseStream.Write(buffer, offset, count + extCharCount)  74:     End Sub  75: End Class

"Write" is the function which is doing the whole stuff. It is really simple to understand. Let me go linewise.

60. Create a string variable and assign and regular expression which will search all the js files tags in html61. Create a string which will append to the JS file. Checking the App key in web.config So that the token can be extended in future.62. Create a Regex Object63. Get the html from Buffer64. Create an integer variable which will keep track of the characters that are added to the html variable. 66. Save the matches in a collection67. Get each mach object from Match Collection68. Add the character count which will added to the html variable69. Create a variable and assign value of match and concatenated with build token70. Replace the old value with the new with build token in html variable72. Encode the html variable back to the buffer73. Write the buffer to the stream by adding count with build token character count.

Now lets create a HttpModule which will responsible of attaching this response filter with every request.

Create HttpModule:

Now to write HttpModule, I will create a class which will Implements IHttpModule (interface) and I name it "BuildToken"/

   1: Imports Microsoft.VisualBasic   2: Imports System.Web   3: Public Class BuildToken   4:     Implements IHttpModule   5:     Public Sub Dispose() Implements System.Web.IHttpModule.Dispose   6:    7:     End Sub   8:     Public Sub Init(ByVal context As System.Web.HttpApplication) Implements System.Web.IHttpModule.Init   9:         AddHandler context.BeginRequest, AddressOf Application_BeginRequest  10:     End Sub  11:     Private Sub Application_BeginRequest(ByVal source As Object, ByVal e As EventArgs)  12:         Dim context As HttpApplication = CType(source, HttpApplication)  13:         If context.Request.RawUrl.Contains(".aspx") = True Then  14:             context.Response.Filter = New BuildTokenFilter(context.Response.Filter)  15:         End If  16:     End Sub  17: End Class

In this case the magical function is Application_BeginRequest which can easily be understand but the question might arises why I have put the If condition on line number 13. Well, I don't want my module to attach response filter against all the files. Keep in mind, HttpModule is always called no matter what content type are you requesting. when somebody write http://www.sitename.net/images/border2.jpg it will still process through HttpModule and that is what I don't want.

Configuration Setting:

We are almost done, just a web.config entry is left which we keep for the modification of token string.

   1: <appSettings>   2:     <add key="BuildToken" value="7.0"/>   3: </appSettings>

Test the filter:

Now to check the the response filter create a page that is called default.aspx and paste the following markup

   1: <html xmlns="http://www.w3.org/1999/xhtml" >   2: <head runat="server">   3:     <title>Untitled Page</title>   4:     <script type="text/javascript" src="../Script/samain.js"></script>   1:    2:     <script type="text/javascript" src="../ControlsScripts/preloadshare.js">   1: </script>   2:     <script type="text/javascript" src="../Script/mainview.js"></script>   5: </head>   6: <body>   7:     <form id="form1" runat="server">   8:     <div>   9:     <p>  10:     Right click and view source you will find JS files with query string</p>  11:     </div>  12:     </form>  13: </body>  14: </html>

Now Run the application and view source the page you will notice some thing like give below.

Each time, when you made some changes in JS file just change Build Token entry in the web.config file and your visitors will get the updated copy of JS. You can also download the project files.