Handle Turn on/off 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>
