Visual Basic Concepts

Step Five: Connect the HTML Form Elements

When you add an HTML template to your project, the webclass designer parses it and displays a list of HTML tag attributes in the right-hand panel. The attributes listed are items that trigger an action in the browser. These attributes have the potential to act as events, but they are not actual events yet. You must choose which attributes you want to program, then perform a process known as "connecting" the events. Connecting an attribute makes it programmatically available.

If you select the Menu webitem and look at your webclass designer's right panel, you can see that the Target column currently says "None" for each of the tags listed there. This means that no connection has been specified for those tag attributes. When you connect a tag attribute, the Target column shows the event name or webitem to which the attribute has been connected.

In this step, you will perform two actions:

  • You will connect the ShowAllCustomers button to the custom webitem you added in Step Four. When the button is clicked, it will pass processing to that webitem's Respond event.

  • You will connect the ShowAllCalls button to a custom event. That event will be fired when the button is clicked.

For More Information   For more information on the types of events in a webclass or the process of connecting events, see "Webclass Events" in the "Developing IIS Applications with Webclasses" section of the Components Tools Guide, in the MSDN Library.

To connect ShowAllCustomers to a custom webitem

  1. Right-click on ShowAllCustomers in the Tag column of the webclass designer's right panel.

  2. On the context menu that appears, click Connect to WebItem.

  3. In the Connect to WebItem dialog box, click ShowIDs, then click OK. Note that the Target column for this element now reads "ShowIDs."

To connect ShowAllCalls to a custom event

  1. Right-click on ShowAllCalls in the Tag column.

  2. On the context menu, click Connect to Custom Event. Note that a custom event appears in the designer's left panel, under the icon for the Menu template.