Section 1.5. Insert Client Script into a Page

1.5. Insert Client Script into a Page

There are times when you need to insert client-side JavaScript into your page to implement client-side functionalities. Take the example of an eBanking web application. If the user has not been active for a certain period of time after logging in, the application will prompt the user with a pop-up window asking if the user would like to continue. Employing a pop-up window is more likely to draw the user's attention than simply displaying the message on the web page, and this is best implemented with client-side script.

---

Note: You can now insert client script into your web page as naturally as writing your server-side code.

---

In ASP.NET 2.0, you can insert client-side script by using the ClientScript property of the Page class.

1.5.1. How do I do that?

To see how you can insert a client script into an ASP.NET 2.0 web application, you will create an application that displays the current time in a JavaScript window when the application is loaded.

1. In Visual Studio 2005, create a new web site project and name it C:\ASPNET20\chap01-ClientScript.

2. Double-click the default Web Form to switch to the code-behind.

3. In the Form_Load event, insert a client script onto the page using the RegisterClientScriptBlock( ) method. The following example inserts a JavaScript code that displays the current time on the server. The time will be displayed in a window, as shown in Figure 1-17.

   Protected Sub Page_Load(ByVal sender As Object, _                         ByVal e As System.EventArgs) _                         Handles Me.Load     '---inserting client-side script     Dim script As String = _         "alert('Time on the server is " & Now & "');"     Page.ClientScript.RegisterClientScriptBlock( _         Me.GetType, "MyKey", script, True) End Sub

   
   

   ---

   Tip: The RegisterClientScriptBlock( ) method is also available in ASP.NET 1.x and appears under the Page class. However, its namespace has changed in ASP.NET 2.0 and appears under the ClientScriptManager class. You can get an instance of the ClientScriptManager class via Page.ClientScript.

   ---

   Figure 1-17. Executing a client script

   
   
   

   The parameters of the RegisterClientScriptBlock( ) method are:

   
   

   Type

   The type of the calling page

   
   

   Key

   The key to identify the script

   
   

   Script

   Content of the script to be sent to the client side

   
   

   AddScript

   Indicates whether the script should be enclosed within a <script> block. The script generated on the client-side would look like this:

   <script type="text/javascript"> <!-- alert('Time on the server is 7/18/2004 12:07:23 PM');//  --> </script>

   
   

   If the AddScript parameter is set to False, the script will not be executed on the client side; instead, it simply will be shown on the web page.

   ---

   Tip: Note that in ASP.NET 1.1 the key could be an empty string (but not null). In ASP.NET 2.0, an empty string supplied for the key will generate a runtime error.

   ---

1.5.2. What about...

...including a script file?

Instead of inserting strings of client-side script into your application, you might have a much more sophisticated client-side application that is saved in a separate file. In this case, it is more effective for you to include the file directly rather than insert the scripts line by line.

Suppose you have a script file saved as hello.js and its content contains JavaScript code (without the <script> tag):

alert("Hello world, from JavaScript");

You can include this script in your page through the RegisterScriptInclude( ) method:

'--including script files Dim scriptURL As String = "./hello.js" Page.ClientScript.RegisterClientScriptInclude( _     Me.GetType, "MyKey", scriptURL)

The generated output looks like this:

<script src="/books/2/618/1/html/2/./hello.js" type="text/javascript"></script>

1.5.3. Where can I learn more?

MSDN has a comprehensive article on injecting client-side script from an ASP.NET server control: http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnaspp/html/aspnet-injectclientsidesc.asp.