Thursday, June 01, 2006


Mastering and paging JavaScript: Solutions

After uncovering problems with JavaScript in master and content pages, some software developers found solutions using ASP code blocks, a technology that ASP.NET 2.0 carried from the original 1996 ASP (Active Server Pages) but now documents only sparsely in the VS article "Embedded Code Blocks in ASP.NET Web Pages." A more thorough discussion can be found in the January, 2002, article "How to Upgrade ASP Pages to ASP.NET Pages that Use JScript .NET" supplied by MSDN. These articles describe a "display block" with the < % = ... % > format. The content of such a block is compiled and executed by the page server at runtime; the entire block is replaced by the result when a page is rendered. If it references a page element's ID value, then the rendered page will contain a runtime control's ID value that may have been extended and qualified.

ASP display blocks obtain correct control ID values for JavaScript with statements such as:

var oControl1 = document.getElementById('< % = ofControl1.ClientID % >');

where ofControl1 is the ID value given by a programmer to a control on the page. The server-side run-time evaluation of ofControl1.ClientID returns an extended and qualified name replacing the ASP code block, and the JavaScript variable oControl1 can then be used for access to properties of that control.

A limitation to this approach was soon discovered. Once a master page header has taken code blocks, it refuses to accept dynamic scripts. However, dynamic scripts will be accepted for content pages. Another limitation is that the run-time processing provided for scripts imbedded in .aspx page files is not provided for dynamic scripts. Dynamic scripts must be created using the FindControl method in server-side code to generate correct ID values for controls.

The run-time processing to obtain correct control ID values will be provided for scripts included from files. The .aspx page file that is to contain the JavaScript needs a < script > element such as:

    < script type="text/javascript" >
    < !--#include file='~\JavaScript\ControlValidator.js'-- >
    < /script >

The included file, called JavaScript\ControlValidator.js here, contains a JavaScript program such as:

function ValidateControl(source, arguments)
    var oRadioControl1 = document.getElementById('< % = ofRadioControl1.ClientID % >');
    var oRadioControl2 = document.getElementById('< % = ofRadioControl2.ClientID % >');
    arguments.IsValid = (oRadioControl1.checked | | oRadioControl2.checked);

A minor problem with this approach to using JavaScript is its incompatibility with Microsoft's clumsy Design mode editor. If you imbed Javascript as shown and you try to switch to Design mode, Visual Studio 2005 will bark at you with a diagnostic such as "Error Creating Control...Object reference not set to an instance of an object." On those rare occasions when you need to use Design mode, the cure is to cut the Javascript out of the markup and paste it into a plaintext editor such Notepad, then when done paste it back into the markup file.

[Note: because of display limitations, characters "< " and " |" and " >" here are shown with a space after or before them.]

Comments: Post a Comment

Subscribe to Post Comments [Atom]

Links to this post:

Create a Link

<< Home

This page is powered by Blogger. Isn't yours?

Subscribe to Posts [Atom]