how to show special page for IE6 users requesting them to upgrade in ASP.NET MVC

Question

Just like the every other web developer, I'm frustrated to hack my site code to work with IE 6. So decided to give up support for IE 6 and ask them politely to upgrade to IE 7+ or Firefox.

Can you suggest me how to detect IE6 users and display a special page showing the upgrade details in ASP.NET MVC?

Is handling this at server side scripting a good idea? or do you recommend to use any client side script like jQuery to handle this?

Answer 1

Easiest thing IMO is to create an action filter attribute. Then you can just tag your controllers with it (or add to global filters in MVC3).

Here's the attribute:

/// <summary>
/// If the user has IE6, this will present them with a page that tells them they have a crappy old browser.  It gives them options to upgrade but they can also 
/// choose to proceed anyway.  This check is done only when they first visit the site.  A cookie also prevents unnecessary future checks, so this won't slow the app down.
/// </summary>
public class WarnAboutIE6Attribute : ActionFilterAttribute
{
    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        var request = filterContext.HttpContext.Request;
        //this will be true when it's their first visit to the site (will happen again if they clear cookies)
        if (request.UrlReferrer == null && request.Cookies["browserChecked"] == null)
        {
            //give old IE users a warning the first time
            if (request.Browser.Browser.Trim().ToUpperInvariant().EqualsExact("IE") && request.Browser.MajorVersion <= 6)
            {
                filterContext.Controller.ViewData["RequestedUrl"] = request.Url.ToString();

                filterContext.Result = new ViewResult { ViewName = "InternetExplorerOldWarning" };
            }

            filterContext.HttpContext.Response.AppendCookie(new HttpCookie("browserChecked", "true"));
        }

    }
}

This attribute checks for IE6, and if it's present, it renders the "InternetExplorerOldWarning" view, which you have to create. It only presents this warning once by using a cookie. You could of course tweak that however you want. In my view, I gave them links to update or download other browsers. I also gave them the opportunity to continue with IE6. Check it out:

            <h3>
        Your Internet Explorer is Outdated</h3>
  <div class="warning">Your version of Internet Explorer is a bit too old and unfortunately won't work well with this site.</div>
  <p>Have no fear.  You have options and in just a few minutes you can be rocking out in our app:</p>
  <ul>
  <li>If you have FireFox, Safari, or Google Chrome already on your computer use one of them for Takeoff instead.</li>
  <li>Upgrade to the <a href="http://www.microsoft.com/windows/internet-explorer/worldwide-sites.aspx">latest Internet Explorer.</a>  You can download and install right away.  Even Microsoft recommends you do this.</li>
  <li>Download an Internet Explorer alternative.  We recommend <a href="http://www.mozilla.com/en-US/firefox/firefox.html">FireFox</a>, <a href="http://www.apple.com/safari/download/">Safari</a>, or <a href="http://www.google.com/chrome">Google Chrome</a>.  Choose one or all because each is great!</li>
  </ul>

  <p>This warning page will only show once.  If you really want to use Takeoff with your current Internet Explorer, we won't stop you.  But beware, it will probably look like garbage!</p>
  <p>Whatever dude, I want to <a href="@ViewData["RequestedUrl"] ">my old, insecure, scary, dangerous version</a> of Internet Explorer.</p>

</div>