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.
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> element.
- RegisterOnSubmitStatement: Allows you to assign a script block/function to the Page object's OnSubmit event.
- 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.
