.NET and JavaScript

Among other things, the Microsoft .NET initiative is an effort to make server-side programming easier. For example,Visual Basic .NET provides you with a programming environment that enables you to stay connected to the server as you develop your code. You can see the Visual Basic .NET development environment in Figure 24.1, where I'm developing a .NET web application. There are two main kinds of .NET applicationsWindows applications and web applicationsand JavaScript programming can help with the web applications of the kind we'll see here.

Figure 24.1. The Visual Basic .NET environment.

In Figure 24.1, I've created a new Visual Basic .NET project on a web serveralthough I'm working locally on my own machineand I'm adding controls to a .NET web form. In this case, I'm adding a button and a text field. Note the small icons at the upper left in each control, which indicate that they are server-side controlstheir code is on the server, and every time you click the button, all the data in the web form will be sent back to the server and processed there.

You add controls such as text fields and buttons to a web form in Visual Basic .NET using the "toolbox" at left, where I'm selecting controls from the Web Forms tab; these controls are handled on the serverthat is, their code resides on the server, not in the browser. If you double-click the button, the Visual Basic code that stays on the server to support the web page, Webform1.aspx.vb, appears (see Figure 24.2).

Figure 24.2. The server-side code for a .NET web page.

Double-clicking the button as we have makes Visual Basic .NET create a click event handler for that button in the server-side code for this web form, as you see in Figure 24.2:

 Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)      Handles Button1.Click  End Sub 

We can make the text field, which is named TextBox1 by default, display the message Hello from .NET! by adding this code, as you see in Figure 24.2:

 Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)      Handles Button1.Click  TextBox1.Text = "Hello from .NET!"  End Sub 

That's all we need to make this web application complete. Here's the server-side Visual Basic code for this web page:

(Listing 24-01.aspx.vb on the web site)

 Public Class WebForm1      Inherits System.Web.UI.Page      Protected WithEvents Button1 As System.Web.UI.WebControls.Button      Protected WithEvents TextBox1 As System.Web.UI.WebControls.TextBox  #Region " Web Form Designer Generated Code "      'This call is required by the Web Form Designer.      <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()      End Sub      Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs)          Handles MyBase.Init          'CODEGEN: This method call is required by the Web Form Designer          'Do not modify it using the code editor.          InitializeComponent()      End Sub  #End Region      Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)          Handles MyBase.Load          'Put user code to initialize the page here      End Sub      Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)         Handles Button1.Click         TextBox1.Text = "Hello from .NET!"      End Sub  End Class 

You can see the results in Figure 24.3, where I've run the application on the server, and you can see the newly created web page in the Internet Explorer. When you click the button, the message Hello from .NET! appears in the text field, as you see in Figure 24.3.

Figure 24.3. Running a .NET application.

Note that all this code works fine; to place some text into a text field, however, we've had to send all the data back to the server. The code we've placed on the server executes, creates a new web page, and sends that page back to the browser. And that can be a problem in .NET applications, because it all takes time. If the user is expecting more immediate results, a server round trip can be very annoying.

That's where JavaScript can help. Many .NET programmers don't realize that you can use JavaScript in .NET applications; but you canand it can help speed things up, because JavaScript code is executed in the browser. That's not to say you want to write an entire .NET application using JavaScriptthere's no reason to have any server-side .NET code in that casebut JavaScript can help perform many tasks that don't need a server round trip. And the data JavaScript places into controls will be sent back to the server when the user uses server-side control.

Let's take a look at an example. In this example, we'll create the same results you see in Figure 24.3; this time, however, we'll do it with JavaScript.

You can see this new application being developed in Figure 24.4. I've added a button and text field to the new web form in this new application; but this time, I'm using controls in the toolbox's HTML (not Web Forms) tab. The controls you add with this tab are straight HTML controls and are not intended to be handled on the server. As you see in the figure, there is no small icon at the upper left in these controls; they're not meant to be handled back on the server.

Figure 24.4. Adding HTML controls to a .NET application.

So how do you work with these controls? You can give the HTML controls names using the Properties window you see at the lower right in Figure 24.4; in this case, I'll name the text field Text1 and the button Button1 .

Now we can connect a JavaScript function named clicker to the button by editing the HTML for the web form itself. To do that, just click the HTML tab you see in Figure 24.5. This opens the HTML code for the web form, Webform1.aspx, as you see in Figure 24.5.

Figure 24.5. Adding JavaScript to a .NET application.

This code file, Webform1.aspx, is an Active Server Pages (ASP) page. (You need an ASP server to run web forms.) You can embed HTML directly into this file, and it'll appear in the HTML page the browser displays. Here's the way our button looks now in Webform1.aspx:

 <INPUT ID="Button1" STYLE="Z-INDEX: 101; LEFT: 125px; POSITION: absolute; TOP: 85px"  TYPE="button" VALUE="Click me"> 

We can connect it to a JavaScript function named clicker like this:

 <INPUT ID="Button1" STYLE="Z-INDEX: 101; LEFT: 125px; POSITION: absolute; TOP: 85px"  TYPE="button" VALUE="Click me" LANGUAGE="JavaScript" ONCLICK="return clicker()"> 

Here's what the clicker function looks like. You can just add this function to Webform1.aspx directly by typing in the code for this function like this:

 function clicker()  {      document.Form1.Text1.value = "Hello from .NET!"  } 

That's all it takes. Here's the code for the new application, complete with the JavaScript we've added:

(Listing 24-02.aspx on the web site)

 <%@ Page Language="vb" AutoEventWireup="false"      Codebehind="WebForm1.aspx.vb" Inherits="ClientEvents.WebForm1"%>  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  <HTML>      <HEAD>          <title>Hello from .NET!</title>          <meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">          <meta name="CODE_LANGUAGE" content="Visual Basic 7.0">          <meta name=vs_defaultClientScript content="JavaScript">          <meta name=vs_targetSchema          content="http://schemas.microsoft.com/intellisense/ie5">          <script id=clientEventHandlersJS language=javascript>              <!--  function clicker()   {   document.Form1.Text1.value = "Hello from .NET!"   }  //-->          </script>      </HEAD>      <body MS_POSITIONING="GridLayout">          <form id="Form1" method="post" runat="server">  <INPUT id="Button1"   style="Z-INDEX: 101; LEFT: 125px; POSITION: absolute; TOP: 85px"   TYPE="button" VALUE="Click me" LANGUAGE="JavaScript"   ONCLICK="return clicker()">  <INPUT id="Text1"                  style="Z-INDEX: 102; LEFT: 208px; WIDTH: 155px;                  POSITION: absolute; TOP: 86px; HEIGHT: 22px" type=text>          </form>      </body>  </HTML> 

Now we can run this new JavaScript-enabled application, as you see in Figure 24.6. When you click the button in this application, the message Hello from .NET! appears in the text fieldno round trip to the server needed. This time, everything is handled in the browser, using JavaScript.

Figure 24.6. Using JavaScript in a .NET application.

The data you put into controls using JavaScript goes back to the server when you use server-side controls. Therefore, knowing you can use JavaScript gives the .NET programmer options. You can use server-side controls for much of a .NET web application; when time is of the essence, however, JavaScript is there for you.

Next I'll take a look at anotherand freeoption for server-side option: using Perl.