Avoid excess server calls with an ASP.NET client-side script

Web server buttons under .NET are handy development tools, but they can result in unnecessary calls to a server if designed improperly. This article demonstrates a simple method for using an ASP.NET client-side script to ease server calls.

A .NET Web server button control allows you to respond to a click event with .NET code. This is invaluable when you need access to server-side resources, such as a database. However, you may sometimes need to execute client-side JavaScript and, depending upon the outcome of the code, you may not want to submit the form (postback event) to the server. This can prevent needless roundtrips to the server.

The solution we'll develop in this article is simple. The user is presented with a page that allows modification or deletion of a particular employee. When the user clicks the delete button, a prompt for delete confirmation appears. If the user selects yes, the button’s server-side click event executes. If the user selects no, the event will not fire.

The JavaScript
You can take several approaches to creating the client JavaScript. Perhaps the easiest way is to embed the JavaScript in the ASPX file. However, you may want to dynamically create the JavaScript at runtime. You can do this by leveraging the ASP.NET Page RegisterClientScriptBlock method, accessible in the code-behind page (via Visual Studio .NET). This method allows you to pass in two parameters: key and script.

The first parameter, key, is a string value that uniquely identifies a script block. Once you add a script block, you will not want to add it again. An additional method, called IsClientScriptBlockRegistered, allows you to determine whether a script block associated with a specified key value has already been added. Use this method to avoid adding the script code more than once.

The second parameter, script, is a string value that contains the client-side JavaScript. It is important that the function you create return a Boolean value. This value will be used by the server control to decide whether it should issue a postback event.

The following code would typically be placed in the ASP.NET page load event. It is a JavaScript block containing a function to prompt the user for confirmation. Note the use of the JavaScript confirm function. This differs from the alert function, in that it contains an OK and Cancel button. Also notice that the entire JavaScript code is built at runtime. This particular code might be useful on a page that allows a user to modify or delete a particular employee. The page load event would already know which employee was being viewed, thus the confirmation box contains the employee's name.
string empID = "Jonathan Lurie";
// Use a StringBuilder to append strings
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append ("<script language=JavaScript> ");
sb.Append ("function ConfirmDeletion() {");
sb.Append ("return confirm('Are you sure you wish to delete employee: " + empID + "');}");
sb.Append ("</script>");
string js = sb.ToString();
if (!IsClientScriptBlockRegistered("ConfirmDeletion"))
RegisterClientScriptBlock("ConfirmDeletion", js);

If you examine the HTML on the resulting page (perform a View Source within Internet Explorer), you will see the following:
<script language=JavaScript> function ConfirmDeletion() {return confirm('Are you sure you wish to delete employee: Jonathan Lurie');}</script>

As mentioned previously, the above could have been hard-coded straight into the ASPX page.

Associating the button with the JavaScript code
Now that the JavaScript is complete, we need to find a way for the button to call the JavaScript when clicked. Remember that Web Server controls are not like HTML controls. Web Server controls are executed on the server, and the resulting output is an HTML control. In normal HTML, the following would suffice:
<INPUT TYPE=BUTTON OnClick="ConfirmDeletion();' VALUE="Delete Employee">

With a Web control, it is slightly different. Since a Web control is converted into HTML, we use the attributes property to create the link between the client-side click and the JavaScript function. Again, this code would likely be placed into the page load event:
this.deleteButton.Attributes.Add("onClick", "return ConfirmDeletion();");

The result
When a user clicks the delete button, a message box will prompt for confirmation. If the user clicks cancel, nothing happens; otherwise, a postback occurs, and the click event is executed on the server.

Editor's Picks