The ASP.NET Framework gives you enormous power and flexibility. You can create server-side code to handle any type of requirement, but nothing beats client-side JavaScript for many tasks. Adding JavaScript to an ASP.NET Web form is like adding it to any other type of Web page—but binding code to ASP.NET form elements is not as simple.

Why JavaScript?
The merits of client-side JavaScript have been exhausted in other articles. The main advantage is performance. The same functionality is easily developed using C# or VB.NET, but it requires a roundtrip to the server and thus entails a performance hit. The JavaScript counterpart is downloaded with the page, and execution is confined to the browser with no server call. Common scenarios for this approach include field validation, confirmation dialog boxes, and opening other windows.

Let’s review how you include JavaScript in a regular Web page. Then, we’ll take a look at the extra steps needed to get JavaScript to play nice with ASP.NET Web forms.

Traditional Web forms
A regular Web page includes various standard areas, such as the head and the body. Normally, JavaScript functions are placed in the head portion of the form so that they are loaded before the body, making them immediately available. The functions are then called from HTML elements within the page body. As an example, let’s look at the following JavaScript function:
 
function confirmSubmit() {
var doc = document.forms[0];
var msg = “Are you sure you want to submit this data?”;
if (confirm(msg)) {
doc.submit();
} else {
// do nothing
} }
 

This function is simple: It asks the user to verify whether he or she wants to submit the document. The document is submitted if the user clicks Yes in the confirmation box; otherwise, nothing happens. The function is easily connected to an HTML submit button:
 
<input type=”button” value=”submit” name=”butSubmit” onClick=”confirmSubmit();”>
 

Once the user clicks the button, the message in Figure A appears.

Figure A
Example JavaScript confirmation

The JavaScript is simple, but it can easily be enhanced to deal with any type of logic necessary. This increases performance by eliminating the need to make a call to the server. However, adding this type of functionality to an ASP.NET Web form is not as straightforward as adding it to a regular Web form.

First, the function is added to the head portion of the form (see Figure B). Once it is available, it must be called from an ASP.NET control. You can see the button declaration in Figure B.

Figure B
Sample ASP.NET Web form

The key step is binding the ASP.NET button to the JavaScript function. This is accomplished by way of the Attributes property of the ASP.NET button UserControl object. The Attributes property contains an Add method allowing events to be added to the button. The following VB.NET code does the trick:
 
butSubmit.Attributes.Add(“onClick”, “return confirmSubmit();”)
 

Figure C shows the VB.NET code in the Visual Studio .NET environment.

Figure C
Adding the function to the button

Personally, I find this syntax confusing, since I am accustomed to standard Web form syntax. But simply typing the standard onClick event into the ASP.NET Web form (HTML source) causes errors. I had to dig through documentation to discover the required syntax.

Of course, the code can be extended. ASP.NET includes validation controls, but the JavaScript can easily be added and referenced using the code in this article. Let’s take a look at validating two name fields before allowing submission.

We’ll extend the sample form from the first example to include the two text fields shown in Figure D. These fields are validated using the following JavaScript:
 
function valSubmit() {
var doc = document.forms[0];
var msg = “”;
var msg = “”;
if (doc.txtFirstName.value == “”) {
msg += “- First Name” + “\n”;
}
if (doc.txtLastName.value == “”) {
msg += “- Last Name” + “\n”;
}
if (msg == “”) {
doc.submit();
} else {
var valMsg1 = “The following required fields are missing.”;
var valMsg2 = “Please complete and resubmit.”
alert(valMsg1 + “\n\n” + valMsg2 + “\n\n” + msg);
return;
} }
 

This function is basic. It checks for characters in the name fields. If the fields are not empty, the document is submitted. Otherwise, a message is presented that asks the user to complete the fields and resubmit. The function is tied to the button using the same syntax:
 
butSubmit.Attributes.Add(“onClick”, “return valSubmit();”)

Figure D
Added text fields

Only the beginning
Using the Attributes property of the button UserControl object to bind a JavaScript event is just one of the property’s many applications. You can also use Attributes to alter the various colors tied to the control and to apply cascading style sheet elements, among other things. Examine the online help or other .NET documentation for more details.

Don’t reinvent the wheel
The Internet is full of sample JavaScript code that can tackle almost any task, so there is no reason to redo what has already been done. ASP.NET offers many powerful features, but the old stalwart JavaScript is great for handling common tasks and offloading processing to the client rather than the server.