Handle Deactivated JavaScript in ASP.NET MVC Web Application

Preface

Depending on what your ASP.NET MVC Web application is supposed to do, it might be necessary that the client’s browser has JavaScript support enabled.

If this is not the case, maybe you want to make sure the user will be informed and cannot use the application.

And because there is no JavaScript available, this has to be done in a non-script way.

Use The noscript-Tag & Redirect

To handle all this without any script is quite simple. HTML offers the noscript tag.

Inside the noscript area, one can add whatever HTML code is required.

Since I want the user to be redirected to another page, I will use meta http-equiv="refresh" content="0;…" to redirect the user to the page explaining that JavaScript is required to use my application.

Add It To The Layout Page

To make sure the user will be redirected independent which page should be opened, I add the noscsript area to the _Layout.cshtml page.

And because I do use a meta tag, the code is placed into the head area to avoid warnings that meta elements cannot be nested inside the body element.

In case you use different layout pages in your application, you should put the redirection code into a partial view and add this to all of your layout pages. If there is the need to change the redirection, there will be only one place that needs to be changed.

NoJScript Controller And View

I do have a ASP.NET MVC application, so want to redirect to an appropriate controller when JavaScript is disabled, not to a HTML page.

Accordingly, I add the NoJScript controller with an Index view to my project and redirect the user to /NoJScript. The view is used to inform the user that JavaScript support is required and can contain all non-script elements that are needed.

It is important that this view does not use the layout page itself. Otherwise there will be an endless redirection loop, because when the view is opened, the browser detects there is no JavaScript enabled, and again redirects to this view, and so forth.

Access Restrictions

In case you restrict access to your application by setting the AuthorizeAttribute either to your controller or by adding

filters.Add(new System.Web.Mvc.AuthorizeAttribute());

to the App_Start/FilterConfig.cs, remember to set the AllowAnonymousAttribute to the Index method of the NoJScript controller. Otherwise, the browser is hooked in an endless loop, switching between the login page and the JavaScript required page.

Putting It Together

Here are all changes listed.

In the _Layout.cshtml page, this section is added to the head element:

<head>
…
<noscript>
  <meta http-equiv="refresh" content="0;url=/NoJScript" />
</noscript>
…
<head>

The NoJScript controller is really simple:

public class NoJScriptController : Controller
{
  //
  // GET: /NoJScript/
  [AllowAnonymous]
  public ActionResult Index()
  {
    return View();
  }
}

And the view should contain a little bit more information than this sample:

@{
  ViewBag.Title = "JavaScript required";
  Layout = null; // <= Important!
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>@ViewBag.Title - My MVC App</title>

  @Styles.Render("~/Content/css")
  @Scripts.Render("~/bundles/modernizr")

</head>
<body>
 To use this application JavaScript is required.
</body>