Friday, December 29, 2017

HTTP to HTTPS auto redirect

To enforce all client connections to use HTTPS, you need to redirect the HTTP connection to HTTPS. This can be done easily in IIS.

1) Install URL Rewrite for IIS which can be downloaded from the following URL:

     https://www.iis.net/downloads/microsoft/url-rewrite


2) Add the following settings that to the web.config file (withing WebServer section):

<rewrite>
    <rules>
        <rule name="HTTP to HTTPS" patternSyntax="Wildcard" stopProcessing="true">
            <match url="*" />
            <conditions logicalGrouping="MatchAny">
                    <add input="{HTTPS}" pattern="off" />
            </conditions>
            <action type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" appendQueryString="false" redirectType="Permanent" />
        </rule>
    </rules>
</rewrite> 

To learn more about the rewrite component,

    https://docs.microsoft.com/en-us/iis/extensions/url-rewrite-module/url-rewrite-module-configuration-reference

Monday, December 11, 2017

Forcing CSS or JS file to reload after website update

"The CSS or JS (JavaScript) file did not download by the browser after the website has been updated" - I guess most of the website developers faced this problem before and this problem can be resolved easily in ASP.Net.

The cause of the problem: usually, we include a CSS file into the website using the following code and the file name is "static". With the static file name, the browser will use the cache version of it during the next visit to the website and this is the cause of the problem. Sometimes, pressing F5 might not reload because the URL is the same and then the cache version will be reused.

    <link href="/css/myStyle.css" rel="stylesheet" />

To resolve this issue, you need to need to declare a new page class that inherits from System.Web.UI.Page OR declare an extension method (you need to figure out how to do this). Then, all your web page will have to inherit from this new page class.

Basically, the solution is to append the file modification date and time to the end of the CSS or JS file as shown below. Once you have done that, the browser will be force to load from the web server automatically without pressing F5.

   <link href="/css/ui.css?20171205164334" rel="stylesheet"/>
   <script src="/js/myScript.js?20171211150501"></script>


The codes that do the magic:

        public string AttachCss(string css)
        {
            if (string.IsNullOrEmpty(css))
            {
                return string.Empty;
            }

            string[] s = css.Replace(";", ",").Split(',');
            string s2 = string.Empty;
            string f, f0;
            FileInfo fi;

            foreach (var item in s)
            {
                // default path is "/css"
                f0 = "~/css/" + item;
                f = this.Server.MapPath(f0);

                if (File.Exists(f))
                {
                    fi = new FileInfo(f);
                    f = this.ResolveUrl(f0) + "?" + fi.LastWriteTime.ToString("yyyyMMddHHmmss");

                    s2 += string.Format("<link href=\"{0}\" rel=\"stylesheet\"/>", f);
                }
            }

            return s2;
        }

        public string AttachJs(string js)
        {
            if (string.IsNullOrEmpty(js))
            {
                return string.Empty;
            }

            string[] s = js.Replace(";", ",").Split(',');
            string s2 = string.Empty;
            string f, f0;
            FileInfo fi;

            foreach (var item in s)
            {
                // default path is "/js"
                f0 = "~/js/" + item;
                f = this.Server.MapPath(f0);

                if (File.Exists(f))
                {
                    fi = new FileInfo(f);
                    f = this.ResolveUrl(f0) + "?" + fi.LastWriteTime.ToString("yyyyMMddHHmmss");
                    s2 += string.Format("<script src=\"{0}\"></script>", f);
                }
            }

            return s2;
        }
      
To use the code, you need to call AttachCss() and AttachJs() within the ASPX file. You may include multiple files into the call.

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

    <%= this.AttachCss("myStyle.css;myStyle2.css") %>
    <%= this.AttachJs("myScript.css;myScript2.css") %>   
   
   (your HTML goes here...)
</asp:Content>