'Sys' is undefined - ASP.NET AJAX

This is not my own work but have replicated it so I can easily find it. Original article here:
http://geekswithblogs.net/ranganh/archive/2007/07/15/113963.aspx

You might receive the error 'Sys' is undefined when running ASP.NET AJAX Web pages or trying to AJAX enable your exisitng Web Applicaitons.

This error occurs specifically when you try upgrading your existing ASP.NET 2.0 Applications to AJAX by using the ASP.NET AJAX controls like UpdatePanel, etc., The common cause for this error is that you havent updated the Web.Config file of the application to enable the runtime understand ASP.NET AJAX. Let me explain a little more.

When you install ASP.NET AJAX your Visual Studio 2005 gets the toolbox updated with ASP.NET AJAX Server side controls like ScriptManager, ScriptManagerProxy, UpdatePanel, UpdateProgress etc., You already have your existing ASP.NET 2.0 application pages and you can add ScriptManager, UpdatePanel and other controls from Toolbox to your pages. When you run the page, you would get 'Sys' is undefined javascript error. The reason being that, your web.config of the existing ASP.NET 2.0 application misses certain settings that require to be added to make it understand the ASP.NET AJAX Server side controls like UpdatePanel, UpdateProgress etc.,

To resolve the issue, I am providing herebelow the steps:-

Open the Web.Config file and start adding the following settings to the same:- (Forewarning: Modifying Web.Config incorrectly makes your site inaccessible and I would suggest you take a back up of your existing web.config file before making the following changes. This article is intended for people with prior experience in dealing with web.config file, settings etc., and if you arent very convenient working with the Web.Config file, make your administrator or other experienced developers make these changes)

1. Below the <configuration> tag, add the following settings:-

<configSections>

<sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">


<sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">

<section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>

<sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">

<section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="Everywhere"/>

<section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>

<section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>


</sectionGroup>

</sectionGroup>

</sectionGroup>

</configSections>

What we have done in this step is registering the System.Web.Extensions namespace, the assembly and its various handlers that are useful in handling AJAX for your ASP.NET 2.0 Application.

2. Then, below the <system.web> add the following settings:-

<pages>

<controls>

<add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

</controls>

</pages>

In this step, we registered the tagprefix of ASP for the ASP.NET AJAX Server controls like UpdatePanel so that we can use the same <asp: prefix while using the same in your pages. Ex.- <asp:UpdatePanel>

3. Then find the <compilation debug="false" /> and you need to replace this line with the following settings:-

<compilation debug="true">

<assemblies>

<add assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

</assemblies>

</compilation>

This step enables compilation for your website and adds the reference assembly for System.Web.Extensions.

4. Then below the compilation settings (above step), add the following:-

<httpHandlers>

<remove verb="*" path="*.asmx"/>


<add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

<add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

<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"/>

</httpHandlers>

<httpModules>

<add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

</httpModules>

What we have done here is to register the Http Handler and specify that Web Services might be handled using Javascript (asynchronous callback) as well as add the ScriptModule Http Module.

5. Then, after the </system.web> end tag, add the following system.web.extensions settings:-

<system.web.extensions>

<scripting>

<webServices>

<!-- Uncomment this line to customize maxJsonLength and add a custom converter -->

<!--

<jsonSerialization maxJsonLength="500">

<converters>

<add name="ConvertMe" type="Acme.SubAcme.ConvertMeTypeConverter"/>

</converters>


</jsonSerialization>

-->

<!-- Uncomment this line to enable the authentication service. Include requireSSL="true" if appropriate. -->

<!--

<authenticationService enabled="true" requireSSL = "true|false"/>

-->

<!-- Uncomment these lines to enable the profile service. To allow profile properties to be retrieved

and modified in ASP.NET AJAX applications, you need to add each property name to the readAccessProperties and

writeAccessProperties attributes. -->


<!--

<profileService enabled="true"

readAccessProperties="propertyname1,propertyname2"

writeAccessProperties="propertyname1,propertyname2" />

-->

</webServices>

<!--

<scriptResourceHandler enableCompression="true" enableCaching="true" />

-->


</scripting>

</system.web.extensions>

In this step, we have additional steps where we can play with JSON Serialization settings and enabling some of the Application Services like AuthenticationService, ProfileService etc.,

6. Thereafter, add the following system.webServer settings:-

<system.webServer>

<validation validateIntegratedModeConfiguration="false"/>

<modules>

<add name="ScriptModule" preCondition="integratedMode" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

</modules>


<handlers>

<remove name="WebServiceHandlerFactory-Integrated"/>

<add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

<add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

<add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

</handlers>

</system.webServer>

The above steps registers the ScriptHandlerFactory for Webservices and the AXD that needs to handle the requests.

Once you have added the above steps to your web.config file, you would be able to add ScriptManager, UpdatePanel and other ASP.NET AJAX Controls and would be able to run the page. This should solve the 'Sys' is undefined error message.

These settings are not required if you are creating a "File - New - AJAX Enabled Website" using Visual Studio 2005 since all the above settings are added automatically to your web.config file.

Similarly, with Visual Studio "Orcas" any ASP.NET Website created will automatically have these settings as a part of the web.config file enabling you to directly use the ASP.NET AJAX Server side controls as well as the client scripts.

This error may also occur, if you are running beta versions of ASP.NET AJAX such as RC1, and earlier CTP versions. I would strongly suggest you to upgrade to the released version of ASP.NET AJAX which can be downloaded from http://ajax.asp.net and update / modify your web.config files accordingly.

Finally, this error occurs due to the fact that 'Sys' is the root namespace for Microsoft AJAX Library and the web.config settings specify the Handlers / Modules and the System.Web.Extensions DLL references so that the runtime can understand and render accordingly.

If you are still facing the error after checking the above, write back in comments so that I can help you with the same.

Cheers!!!