Troubleshooting AJAX Pages in ASP.NET MVC

Drubbing through some work this morning I came across an error while trying to implement some AJAX on an ASP.NET MVC web page.

Microsoft JScript runtime error: 'Sys' is undefined

I had added my script references with absolute paths to the Site.Master page, so I thought I had my basis covered.  To confuse things further, I would get the error message hit ‘Ignore’ and then the expected result would be rendered on a new page.

Defining ‘Sys’

Unfortunately I was barking up the wrong tree when I was trying to Bing an answer up.  The error message, while absolutely true, didn’t actually reveal the root of the problem.

Searching for this error message ends up with pages of early AJAX builds, people talking about pre-release software and links to ScottGu’s blog on how to remove preview versions of Microsoft’s AJAX libraries.

I’m working in Visual Studio 2010 Beta 2, and have other pages running AJAX just fine, so I was pretty sure I had no compatibility issues with earlier versions of AJAX libraries.

What I Missed

I like shortcuts and speed-ups as much as possible.  It turns out that I dragged the JavaScript files into my header, giving me this:

Note that the above code actually isn’t a problem.  But I have a nasty habit of switching everything to absolute paths, so I did this (notice the ~):

…which of course would be fine if there was something that was actually processing the path.  Unfortunately I got this far (and a lot further) without running the page or making AJAX calls, so I put this little tweak out of mind.

The problem, of course, is that the path can’t be resolved for the browser to locate and download the JavaScript file.

Using Absolute Paths for JavaScript src Attributes

The fix is actually quite simple.  If you want to use absolute paths, just take advantage of the fact that the master page is run through the compiler and the path can be resolved quite easily:

Other Things That Indicate Path Problems

There is another symptom of not being able to resolve the src file.  If you’re not debugging you won’t get the error messages, but your browser will render the output of the AJAX call as a new page.  You might want to check your script paths if that is the case.

One other give-away is by checking the Solution Explorer while debugging.  The debugger inserts a Script Documents folder at the top of the solution and shows all the loaded documents.

If the JavaScript files you anticipate to be there aren’t, this would be a good answer to why you are getting the “'Sys' is undefined” error.