While Web development platforms provide flexibility and
power, you often want or need to rely on existing technologies to accomplish a
necessary task. A good example is ASP.NET. It provides a robust development
platform, but mature technologies like JavaScript cannot be overlooked. In this
article, I’ll explain how you can tie JavaScript code to ASP.NET controls.

The normal approach

Normally, when a Web application requires a pop-up or
confirmation window or other client-side functionality, you can create the
necessary JavaScript functions and call those when necessary. For example, the Web page in
Listing A includes a
confirmation window that allows the user to continue or cancel form submission.

The JavaScript confirmSubmit
function is called when the submit button is selected. The JavaScript confirm
prompt allows the user to continue with form submission (selecting ok) or
cancel (selecting cancel).

The code works as planned, but it is not as simple to code when working with a development
platform like ASP.NET.

Weekly development tips in your inbox

Keep your developer skills sharp by signing up for TechRepublic’s free Web Development Zone newsletter, delivered each Tuesday.

Automatically sign up today!

The ASP.NET alternative

ASP.NET does support usage of HTML elements like the input
button and text fields, but it also provides its own set of elements or
controls that work within its development model and offer extra functionality.

Attaching JavaScript to ASP.NET controls is not as simple as
the straight HTML/JavaScript approach. The ASP.NET programming paradigm
provides methods in its base Page class for attaching script blocks to elements
contained within the page. The following methods are available for attaching or
integrating JavaScript within the page and contained elements:

  • RegisterClientScriptBlock: Allows you to include script
    blocks in the page. The client-side script is emitted just after the
    opening tag of the Page object’s <form runat=
    server> element. The script block is emitted as the object that renders
    the output is defined, so you must include both tags of the <script>
  • RegisterOnSubmitStatement: Allows you to assign a script
    block/function to the Page object’s OnSubmit
  • RegisterStartupScript: Allows you to include script
    blocks in the page. Similar to the RegisterClientScriptBlock
    method, this method emits the script just before the closing tag of the
    Page object’s <form runat= server>
    element. The script block is emitted as the object that renders the page
    is defined, so you must include both tags of the <script> element.

Each method accepts two parameters: key and script. The key
is the name assigned to the script block. The key value should be unique. By using
a unique key value, multiple server control instances can request the script
block without it being emitted to the output stream twice. The second
parameter, script, contains the actual script that is sent to the client. This
may be the full JavaScript code or a function name.

The methods are utilized in the actual ASP.NET page
code—albeit VB.NET, C#, J#, or whatever language is used. Listing B presents our example code in ASP.NET via C#.

The JavaScript function is constructed via a string
variable. Its value is passed to the RegisterClientScriptBlock
method as the second parameter. The actual function name is assigned to the
ASP.NET button control via the Add method of the Attributes property of the
object. The JavaScript event is passed as the first parameter with the function
name as the second parameter.

Also, you’ll notice the use of the IsStartupScriptRegistered
method. This allows you to determine if the script has already been registered
before continuing. There are two methods along these lines:

  • IsStartupScriptRegistered: determines if a client startup
    script has been registered with the Page object. Its single parameter is
    the script name.
  • IsClientScriptBlockRegistered: determines if a client script
    block has been registered with the Page object. Its single parameter is
    the script name.

Another way to tackle the problem is with the RegisterOnSubmitStatement method of the Page class.
Listing C duplicates the previous
listing with the lone exception of tying the confirmSubmit
function to the page submit event as opposed to the button’s click event.

This simple example clearly demonstrates how to include JavaScript script blocks as well as attach JavaScript to controls within an ASP.NET page. If you are using ASP.NET controls, this is the way to go to
tie script to them, but you can also use the register methods to centralize a
project’s JavaScript. You may create a class file that contains the script and
utilize it in the pages that need it. This leaves one place to manage the
script and makes it easy to utilize in one or more pages within an application.

Combine the old and the new

Regardless of the development platform, it is highly
unlikely that you will abandon client-side scripting with JavaScript. It is the
standard for developing client-side functionality. While ASP.NET controls
provide plenty of functionality, there will be times when you need to marry
JavaScript with these controls. Thankfully, ASP.NET’s
Page class includes various methods for tying script blocks and functions to
the page and its controls.

Miss a column?

Check out the Web Development Zone archive, and catch up on the most recent editions of Tony Patton’s column.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.