This documentation is archived and is not being maintained.

Creating Scripts and Editing Event Handlers in HTML Designer

As you edit an HTML document in Visual Studio .NET, you can select elements and create functions that cause them to respond to user events. For example, you can select a button and add a function to an embedded <SCRIPT> that will run whenever that button is clicked. The HTML Designer automatically creates a <SCRIPT> block in your document if one does not yet exist, adds a blank event-handler function to your <SCRIPT>, and links the selected HTML element to this function. You can then edit this event-handler function as needed, adding arguments to perform such tasks as displaying Web pages, collecting data from forms, and constructing queries.

Setting the targetSchema DOCUMENT property

The targetSchema property of an HTML or XML document selects the Web browser for which the document will be designed. To run properly, client-side scripts generally require a Web browser that supports HTML 4.0 or later.

You can set the targetSchema property either from the Properties window or from the DOCUMENT Property Pages dialog box. For more information, see Setting the targetSchema Property of an HTML Document.

Setting the targetSchema property identifies the schema to be used by the integrated development environment (IDE) when completing and validating the markup of a document. To ensure that event handlers work properly, follow a Document Object Model (DOM) consistent with the targetSchema setting when referencing a document's elements and their attributes.

Setting the defaultClientScript DOCUMENT property

The defaultClientScript property of an HTML or XML document sets the default scripting language used for new client-side <SCRIPT> elements. You can set the defaultClientScript property either from the Properties window or from the DOCUMENT Property Pages dialog box. For more information, see Setting the defaultClientScript Property of an HTML Document.

Objects on your Web page respond to an event (for example, onClick) by calling event handler functions. You can pass values to such functions and use functions to return values and launch other events.

To create an onClick() event handler for a button

  1. Open your Web page for editing in Design view.
  2. Add a button element to your HTML page. For example, drag a button from the HTML Tab, Toolbox, and drop it onto your page.
  3. Right-click on the button and select "View Client Script" from its shortcut menu.

    An onclick instruction is added to the markup for the button, for example:

    onclick="return Button1_onclick()"

    If no <SCRIPT> block exists, one is created. The document switches to HTML view, with the selection point placed in the new script.

To create a blank event handler function

  1. Open your Web page for editing.
  2. In HTML view, locate the markup for an element in the <BODY> of your page. Here, for example, is the HTML markup for a newly-added button:
    <INPUT id="Button1" onclick="return Button1_onclick();" type="button" value="Button">
    
  3. At the top of the HTML editing window, select the name of the element from the left Client Objects & Events drop-down list. Select an event from the list on the right.

    A new, blank handler function is added to the <SCRIPT> block in the <HEAD> of your document. If no <SCRIPT> block exists, one is created:

    <SCRIPT id="clientEventHandlersJS" language="javascript">
    <!--
    function Button1_onclick() {
    }
    -->
    

    </SCRIPT>

    The id of this <SCRIPT> block identifies it as the default location for new client-side event handlers created in HTML Designer.

When you have added a blank event handler function to a <SCRIPT> block, you can then configure how the function will respond when the selected element receives this event.

To configure an event handler function

  1. Place the insertion point between the braces ( { } ) of the function, and add arguments. To display lists of options for function arguments, press CTRL+SPACEBAR as you write them.
  2. Save your HTML document.
  3. With your document still open in the HTML editor, select Open With on the View menu.

    The Open With dialog box opens.

  4. Choose a Web browser to display your page and test your function.
    Note   Use a fully functional Web browser to test scripts. The View in Browser command on the File menu opens the HTML Designer preview browser. The internal Web browser has been simplified to display quickly. It does not support scripts and should not be used to test event-handler functions.

Example

Here is a simple event-handler function that displays a message when a button named "Button1" is clicked.

<SCRIPT id="clientEventHandlersJS" language="javascript"> 
<!-- 
function Button1_onclick() { 
   alert("Hello, world"); 
} 
--> 
</SCRIPT> 

For Further Information

For guidance on creating scripts and writing functions, see

Event Handling in HTML Elements Sample
Handling HTML Element Events
Implementing_DHTML_Behaviors_in_Script_Using_HTML_Components
Writing Event Handlers [Visual Basic]
Handling User Control Events
Creating Event Handlers in Web Forms Pages
Server Event Handling in Web Forms
Creating an Event Handler at Run Time in Web Forms Pages

For help in understanding how and when scripts work, see

Understanding the Event Model
ASP.NET Server Control Event Model
Client Script in Web Forms Pages
Using ADO with Scripting Languages
Marking Business Objects as Safe for Scripting
Microsoft Windows Script Technologies

For reference information on elements, properties, events, and functions, see

HTML Tab, Toolbox
DHTML References
DHTML Events
SCRIPT Element | script Object
targetSchema Property
defaultClientScript Property
JScript Language Reference
VBScript Language Reference

See Also

Options that Affect Existing HTML, CSS, or XML Markup | Document Outline Window | Navigating in the Document Outline Window | Browsing Code and Components | Outlining and Hiding Code

Show: