New Document
ASP.NET - Client Side

ASP.Net client side coding has two aspects:

  • Client side scripts: that would run on the browser and in turn would speed up the execution of page. For example, client side data validation which can catch invalid data and warn the user accordingly without making a round trip to the server.

  • Client side source code: that the ASP.NET pages generate. For example, the HTML source code of an ASP.NET page contains a number of hidden fields and automatically injected blocks of JavaScript code, which keeps information like view state or does other jobs to make the page work.

Client Side Scripts:

All ASP.Net server controls allow calling client side code written using JavaScript or VBScript. Some ASP.Net server controls use client side scripting to provide responses to the users without posting back to the server, for example, the validation controls, which we will discuss in due time.

The System.Web.UI.Page class contains two methods for emitting client-side script code into the HTML rendered by the ASP.NET Web page:


RegisterStartupScript(key, script)

RegisterClientScriptBlock(key, script)


Both of these methods take two strings as input. The second parameter, script, is the client-side script—including the opening and closing < script> tags—to insert into the page. The first parameter, key, serves as a unique identifier for the inserted client-side script.

The only difference between these two methods is where each one emits the script block. RegisterClientScriptBlock() emits the script block at the beginning of the Web Form (right after the < form runat="server"> tag), while RegisterStartupScript() emits the script block at the end of the Web Form (right before the < /form> tag).

To better understand why there are two different methods for emitting client-side script, realize that client-side script can be partitioned into two classes: code that is designed to run immediately when the page is loaded, and code that is designed to run when some client-side event occurs. A common example of code that is designed to run when the page is loaded is client-side code designed to set the focus to a textbox. For example, when you visit Google, a small bit of client-side code is executed when the page is loaded to automatically set the focus to the search textbox.

An example of code that is designed to run in response to a client-side event can be seen below. Specifically, in this example, a popup dialog box displays when a button is clicked:


< html>
  < body>
    < form>
      < script language="JavaScript">
      
      < /script>

      < input type="button" value="Click Me!" onclick="displayPopup()" />
    < /form>
  < /body>
< /html>

Here, the onclick="displayPopup()" in the < input> tag indicates that when the button is clicked the JavaScript function displayPopup() should run.

The RegisterStartupScript() method is useful for adding script blocks that are designed to run when the page is loaded. The script blocks added via this method appear at the end of the Web Form because the HTML element the script modifies must be defined prior to the script running. That is, if you want to use client-side script to set the focus to a textbox, you must make certain that the textbox's HTML markup appears before the script that sets the textbox's focus. For example, the following HTML will display a textbox and set the focus to the textbox:

< input type="text" id="myTextBox" />

< script language="JavaScript">
< !--
   document.getElementById("myTextBox").focus();
// -->
< /script>

Whereas the following HTML will not set the focus to the textbox, because the textbox is defined after the script block:

< script language="JavaScript">
< !--
   document.getElementById("myTextBox").focus();
// -->
< /script>

< input type="text" id="myTextBox" />

Therefore, the RegisterStartupScript() method places the < script> block at the end of the Web Form to ensure that all HTML elements in the Web Form have been declared by the time the client-side script is executed.

The RegisterClientScriptBlock() method should be used for script code that executes in response to a client-side event. The script blocks emitted by this method are emitted at the start of the Web Form since it is not imperative that the script blocks be placed after all of the HTML elements.

Apart from these scripts the Button control has a property OnClientClick, which allows executing client-side script, when the button is clicked.

The traditional and server HTML controls has the following events that can execute a script when they are raised:

EventDescription
onblur When the control loses focus
onfocusWhen the control receives focus
onclickWhen the control is clicked
onchangeWhen the value of the control changes
onkeydownWhen the user presses a key
onkeypressWhen the user presses an alphanumeric key
onkeyupWhen the user releases a key
onmouseoverWhen the user moves the mouse pointer over the control
onserverclickIt raises the ServerClick event of the control, when the control is clicked
Client Side Source Code

We have already discussed that, ASP.NET pages are generally written in two files:

  • The content file or the markup file ( .aspx)

  • The code-behind file

The content file contains the HTML or ASP.Net controls tags and literals to form the structure of the page and the code behind file contains the class definition. At run time, the content file is parsed and transformed into a page class.

This class along with the class definition in the code file and some other system generated code make the executable code (assembly) that processes all posted data and generates the response and sends it back to the client.

Consider the simple page:

<%@ Page Language="C#" AutoEventWireup="true" 
                       CodeBehind="Default.aspx.cs" 
                       Inherits="clientside._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>  
      <asp:Button ID="Button1" runat="server" 
        OnClick="Button1_Click" Text="Click" />
    </div>
    <hr />
    <h3><asp:Label ID="Msg" runat="server" Text=""></asp:Label>
    </h3>
    </form>
</body>
</html>

When this page is run on the browser, the View Source option shows the HTML page sent to the browser by the ASP.Net runtime:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
	Untitled Page
</title></head>
<body>
<form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" 
value="/wEPDwUKMTU5MTA2ODYwOWRk31NudGDgvhhA7joJum9Qn5RxU2M=" />
</div>
 
<div>
<input type="hidden" name="__EVENTVALIDATION" 
id="__EVENTVALIDATION" 
value="/wEWAwKpjZj0DALs0bLrBgKM54rGBhHsyM61rraxE+KnBTCS8cd1QDJ/"/>
</div>

<div>
<input name="TextBox1" type="text" id="TextBox1" />  
<input type="submit" name="Button1" value="Click" id="Button1" />
</div>

<hr />
<h3><span id="Msg"></span></h3>
</form>
</body>
</html>

Looking closely at the code would reveal that first two <div> tags contain the hidden fields which store the view state and validation information.

While, technically, all of a Microsoft ASP.NET server control's functionality can be performed on the server-side, often the usability of a server control can be greatly enhanced by adding client-side script. For example, the ASP.NET validation Web controls perform all validation checks on the server-side. However, for uplevel browsers, the validation Web controls also emit client-side script so that validation can be performed on the client-side as well. This means that users of those browsers get a more responsive, dynamic experience.


When developing ASP.NET server controls you should ask yourself how you could enhance the usability through the use of client-side script. Once you have identified these areas, all that remains is to augment the server control so that it emits the proper client-side script.


There are two types of client-side script ASP.NET server controls can emit:


Client-side script blocks

Client-side HTML attributes


Client-side script blocks are typically written in JavaScript, and usually contain functions that are executed when certain client-side events transpire. Client-side HTML attributes provide a way to tie a client-side event with a piece of client-side script. For example, the following HTML page contains a client-side script block that contains a function called doClick(). The page also contains a button-created by the < input> HTML element-that has its onclick attribute wired up to the doClick() function. That is, whenever a user clicks the button, the client-side code in the doClick() function will execute. In this example, a popup dialog box will display (Figure 1).



Previous                                                                                                                                                       Next

Back to Top