Tuesday, December 2, 2008

'Sys' is undefined -Ajax


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

-->

<!-- 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.

No comments: