JavaScript Editor
JavaScript Debugger|
| ||
The kind of events we've been dealing with until now are handled on the server, not in the browser. However, it can be a tedious process to wait for events to be handled on the server, so you also can add scripting to your Web pages that can support client-side events. Usually, we'll stick with server-side code in our Web applications, but it's good to know that you also can let the browser handle some events on the client side.
Because you'll be handling events in the browser and not with Visual Basic on the server, you must use a scripting language that the browser can understand. And note that we'll also be using HTML client controls here (that is, just standard HTML controls), not Web server controls or HTML server controls. As mentioned, we'll almost always stick with server controls in this book (this is a book about Visual Basic, not JavaScript), but it's also good to know how to do a little client-side scripting.
To see an example, I'll create a new project here, named ClientEvents on the CD-ROM. In this case, I'll just add an HTML button and an HTML text field (Visual Basic text controls are called text boxes, but the HTML equivalents are called text fields) to a Web form, then use client-side JavaScript to display text in the text field when the button is clicked.
Start by clicking the HTML tab in the toolbox, and adding an HTML button and an HTML text field to WebForm1 of our project. These controls are not given names by default, so enter "Button1" and "Text1" in the (id) property in the Properties window for the button and text field respectively. After you've given these controls an ID, you can refer to them in JavaScript.
Note that these are indeed HTML controls, not Web server controls; I could make sure their events are handled on the server by right-clicking them and selecting the Run As Server Control item, but in this case, we want them to remain as client controls. To add JavaScript code for the button's Click event, which is called onclick in HTML, you can use the drop-down list boxes in the main Web form's code designer, just as you add event handlers for Windows controls or Web Server controls. Here, however, you select the main Web form and click the HTML button so the code will be added to the Web form's HTML, not the Web form's Visual Basic code. When you can see the Web form's HTML, select the button, Button1, in the left drop-down list above the code designer, and the onclick event in the right drop-down list, as shown in Figure 14.16.
This adds a JavaScript event handler to the HTML for our Web form like this:
<%@ 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>Handling Client Events</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 Button1_onclick() {
}
//-->
</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 Button1_onclick()">
<INPUT
id=Text1 style="Z-INDEX: 102; LEFT: 208px; WIDTH: 155px;
POSITION: absolute; TOP: 86px; HEIGHT: 22px" type=text>
</form>
</body>
</HTML>
Now when the button is clicked, the code in the JavaScript Button1_onclick event handler is run. I can place a line of JavaScript to display the text "Handling client events!" into text1, in this way:
function Button1_onclick() {
document.Form1.Text1.value = "Handling client events!"
}
And that's all it takes—except here, we're writing code in JavaScript, not Visual Basic, because we want this code to execute in the client (that is, the browser). You can see this code at work in Figure 14.17. When you click the button, the text "Handling client events!" appears in text1, as you see in that figure—and all without a round trip to the server. Our code will usually use a round trip to the server, and use Visual Basic instead of JavaScript, but it's worth knowing that you also can handle client events in this way.
And that's it—now it's time to start getting into the additional details of all this in the Immediate Solutions section.
|
| ||
Free JavaScript Editor
JavaScript Editor
