A nasty happening popped up in DEV the other day where suddenly the pages were not rendering properly. They looked like raw HTML without the actual tags visible. Nothing was rendering correctly.
The debugger halted at an Exception thrown on the dynamic markup page here:
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
The exception was being thrown because typeof(Sys) == “undefined”.
When In Doubt…
I Googled my brains out and ended up at this Microsoft ASP.NET forum thread which is full of lost souls wandering the dark shores of despair while watching a lucky few spontaneously slip into the parallel dimension of serendipitious suceess without anyone knowing why.
By working backwards from our last known good deployment, employing the 80/20 rule and examining the entrails of a slaughtered ferret the culprit turned out to be gzip compression of Script Resources in the Application Request. Please see this article in DDK OnLine for more details including why we were using gzip on the Request in the first place
As DDK explains, we stopped gzipping Script and Web Resources and our app returned rendered pages worthy of Da Vinci once more.
A BIG clue for us in the aforementioned thread was in the post by mking who turned off his or her WebResourceCompression httpModule and thus resumed sanity.
Why Does The Site Look Horrible ?
Script and Web Resources can contain CSS Style-Sheets. That’s why their failure to load makes the page look like raw HTML. In our case CSS Style-Sheets for Telerik controls were not loading.
Chris Riccio, Demystifying ‘Sys is undefined’, explains just exactly why Sys is undefined.
Incorrect Visual Studio Project Template
You will get a similar error ‘Sys is undefined’ if you attempt to use AJAX controls where no HttpHandler exists for the Ajax Partial Postbacks. This can come about if you cut and paste markup code from an Ajax-enabled web site to a non-Ajax enabled web page.
For example, let’s say you want to use Microsoft’s ASP.NET AJAX UpdatePanel, so you cut and paste the markup for asp:ScriptManager and asp:UpdatePanel controls from a web page in one Visual Studio project you’ve got to another. On the second it doesn’t work and you get a JScript error ‘Sys is undefined’. What has probably happened is that the first Visual Studio project was created from the ‘ASP.NET Ajax Enabled Web Site’ project template and the other was not.
If you examine the web.config file for the first site you will find that it defines HttpHandlers for Ajax whereas the second does not viz:
add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"
add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
These configuration entries are for ASP.NET Ajax 1.0. They tell your web site where to find the Handler and definitions for the XMLHttpRequest generated by the Ajax Controls. If they don’t exist then the Sys namespace cannot be found and hence is undefined.
See ‘Demystifying Sys is Undefined’, above.
How Does AJAX Work Anyway ?
This article, Ajax Tutorial, from W3Schools gives a very simple and clear explanation of how AJAX works and even shows you how to hand-code an AJAX Handler. Recommended.