Visual InterDev

  • Article

      

Would you like to maintain a single page that accommodates all aspects of data entry instead of several pages, each with similar sets of labels, text boxes, and buttons? Would you like to concentrate on the functionality and leave the details of scripting and multiple object models to Microsoft® Visual InterDev™?

Using the new FormManager design-time control to generate run-time script, you can create a versatile page that uses modes for displaying, editing, and adding records to your database.

Instead of scripting your own HTML forms, the modes you specify for the FormManager handle property settings for controls and events on the page. Using modes, you can simplify your Web application design by creating multipurpose pages.

The FormManager control makes creating a data entry page quick and simple, and later on, maintenance is easy. Just open the file and change the FormManager's properties. For more information about this control, see FormManager Design-Time Control and Creating Event-Driven Forms.

A Data-bound form on a Web page

To accomplish the data entry tasks, this page has two modes:

  • Display mode provides a read-only view of a record. This is also the mode used when the page is opened.

  • Edit mode allows the user to enter and save changes to the record, add records, and delete records.

To simplify the example, this page displays a few fields for each record. In a real application, you can place as many fields as you need to accomplish your goal. The data-binding concepts are the same regardless of the number of fields. To see the FormManager in action, see the Data Entry Form Sample.

Before creating a data entry page, be sure you have the following items ready.

For more information about creating Active Server Pages, see . You can also create HTML pages using these controls. For more information, see Changing Target Platforms in Creating Forms With Design-Time Controls.

Once you are ready to begin, you can add data entry controls and modes to your ASP page with the following steps:

  • Creating the Data Entry Form

  • Simplifying Scripting with Form Modes

  • Completing the Data Entry Page

Creating the Data Entry Form

You can create a form on a Web page using data-bound controls. You may have used HTML <FORM> and <INPUT> tags in the past, but data entry forms are most easily implemented and maintained using Recordset and data-bound controls because you get the same scripting object model in both ASP and Microsoft® Internet Explorer 4.0 DHTML.

To add the Recordset control to your page

  • From the toolbox, drag the Recordset control to your page. For details, see Displaying Records.

****Note   ****The Scripting Object Model must be enabled to use the design-time controls.

For more information about the scripting object model and the Recordset control, see Scripting with Design-Time Controls and Script Objects and Recordset Design-Time Control.

Specifying an Updateable Recordset Control

After you drag the Recordset control to the page, choose the source of data and set the lock type to anything other than read-only.

In the example, the Recordset control uses the DEntry table of the Gallery database provided with the Visual InterDev samples. The type of lock used is "Optimistic" so that the form can update records.

Also, make sure the recordset is based on a database object that is updateable. For example, views without a primary key or a unique index are not updateable, regardless of the cursor type you select. For more information about updating records and specifying recordsets, see Modifying Data.

Settings for an updateable Recordset control

Adding Controls for Record Display and Mode Transitions

Once you have a Recordset control on your page, you can create the form for displaying the fields you want to show the user and for making changes to the records.

Using the design-time controls from the toolbox, you can quickly specify which recordset fields to appear on the page. The field is a property of the control and makes the data display easy to add and, as long as the fields in the recordset do not change, simple to maintain. For more information about using data-bound controls to display records, see Displaying Records.

Forms made with data-bound controls are easy to create and maintain.

To finish the visual design of the page, add and format text to provide a title for the form. Also, create the row of buttons by adding a table to the page and dragging Button controls into the cells of the table.

For the record display, drag Label, Textbox, and RecordsetNavbar controls to the page. In the example, the Textbox controls and the Checkbox control are bound to the recordset using the property pages to specify the field that the control displays. For a list of all of the initial property settings for the controls on this page, see Completing the Data Entry Page below.

Simplifying Scripting with Form Modes

Instead of creating and maintaining several pages with variations of the same control set, the FormManager consolidates it all in a single page that can handle multiple tasks and is easy to maintain.

Using the FormManager control, you can specify modes for your form without scripting the controls and changes. The modes handle changes to the controls and updates to the records.

In addition, you no longer need to scroll through page after page to find the method or event you want to change. The FormManager Properties Dialog Box summarizes all of the property changes and event handling for the page in two tabs.

Of course, if you have user-defined functions, you can reference them in the FormManager control as well. For example, you might have a validation function that you want to use in the form. You can use the FormManager to call the function and validate data whenever the recordset is updated.

Specifying modes covers three main concepts:

  • Identifying each mode and specifying the property settings and methods for the controls while the mode is active. In the data entry form, the modes specify when the Save, Add, and Cancel buttons are hidden.

    In Edit mode, the Save and Cancel button are shown, but the Add button is hidden.

    In Insert mode, the Add button is shown and the Save button is hidden.

  • Specifying the transition events that move between the modes or trigger specific actions. For example, clicking the Edit button transitions the form from Display mode into Edit mode.

  • Adding the actions that occur after the transition event is triggered but before the transition is complete. For example, clicking the Save button not only switches from Edit mode to Display mode, but also updates the recordset with changes the user made in the form.

To add Display and Edit modes to the data entry form

  1. Open or create an ASP page that has controls for displaying records and buttons for switching modes.

    Tip   Before adding modes, make sure you have all of the controls you need on the form. For example, you may need to add buttons, such as an Edit button for moving to the Edit mode and a Save button for triggering transition events in that mode.

    If you decide to add more controls you can do that later, but adding controls before adding the modes makes them readily available to the FormManager control. This also applies to functions and methods you want to script in the page.

  2. From the toolbox, add a FormManager control. Right-click the FormManager in the editor to display its property pages.

  3. Identify the modes you want and the control settings for each.

    A plan for two modes and their control settings

  4. On the Form Mode tab, add a new mode for each mode you have identified.

  5. For each mode, specify the property settings and method calls for the display controls and the form mode buttons on the Form Mode tab.

    Note   For each property you want to set for a control, add a line in the Property/Value pairs grid. For example, if you want the button, btnNew, to be both visible and disabled for the mode, in one line set the disabled property to true and in another line, specify the show() method.

    If you want to call a function you created, you can leave the Object column blank and enter the functions name in the Member column and any parameters in the Value column. Be sure to include parenthesis around the parameters.

    Tip   To ensure proper form behavior, set the properties and methods for each control in each mode. The Web environment is stateless so you can't count on any property maintaining the default value after a transition. If you want a control shown in a mode, specify the show() method for that control. If you want a control hidden, specify Hide() method.

    For a complete list of the mode settings for this form, see Completing the Data Entry Page below.

    Specify the property settings and method calls for the mode.

    Note   Be sure that the disabled property is properly set. If you want to enable the control, its disabled property needs to be "false." These values are case sensitive. It is easy to inadvertently set it to the opposite.

    Also, to make a control visible or hidden, use the show() and hide() methods. The server will translate them into the appropriate tags and attributes when it sends the HTML to the Web browser.

  6. On the Action tab, specify transition events for each mode button on the form. For a complete list of the action settings for this form, see Completing the Data Entry Page below.

    For example, when the Edit button is clicked, the form switches from Display mode to Edit mode. Without additional scripting, the mode determines the changes to the controls’ properties as specified in the Form Mode tab.

    The Edit button triggers the switch to the next mode.

    While in Display mode, the Edit button specifies only that a new mode is active. Additional actions are not required.

    Some transition events require actions in order to complete the entire task intended by the mode.

  7. As needed, identify and specify actions to be completed between the event and the next mode.

    For example, in Edit mode when the Cancel button is clicked, the changes should be discarded before switching to Display mode. In contrast, when the Save button is clicked, the recordset should be updated before switching to Display mode.

    A plan for the transitions and actions between modes

    On the Action tab, these actions are specified as shown in the following figure.

    The actions occur after the event happens and just before the mode switches.

  8. Choose Close.

Note   If you add more controls and/or user-defined functions to the page, be sure to incorporate them into the modes using the FormManager control.

Completing the Data Entry Page

Now that you understand the basic use of the FormManager control, you can finish specifying the modes and actions for the data entry page. You can use the tables below for additional settings you might need to complete the data entry page.

  • Initial Property Settings for the Controls on the Form

  • Completing the Mode Settings for Controls

  • Mode Transitions and Actions

Initial Property Settings for the Controls on the Form

You can set the initial properties for the controls on the form using the General tab of the property pages for the control.

Example of property setting for a button

The following table shows the property settings for the controls on the form before you add the modes.

Controls for the record Initial settings
Recordset Connection to the Gallery database used with the Visual InterDev samples.
Database object = DEntry table
Lock type = Optimistic or Batch optimistic
IDlbl Visible
IDtxt Disabled (read-only), visible
FNamelbl Visible
FNametxt Disabled (read-only), visible
LNamelbl Visible
LNametxt Disabled (read-only), visible
PCchk Visible
RecordsetNavbar Visible, set to recordsetdtc1
Controls for form modes Initial settings
Display Button Name = Displaybtn
Caption = Display
Visible = true
Disabled = true
Edit Button Name = Editbtn
Caption = Edit
Visible = true
Disabled = false
Save Button Name = Savebtn
Caption = Save Record
Visible = false
Disabled = false
New Button Name = Newbtn
Caption = New
Visible = true
Disabled = false
Delete Button Name = Deletebtn
Caption = Delete
Visible = true
Disabled = false
Cancel Button Name = Cancelbtn
Caption = Cancel
Visible = false
Disabled = false

Completing the Mode Settings for Controls

You can complete the mode settings for the data entry form by adding the Property/Value pairs into the Form Mode tab.

Use the Form Mode tab of the FormManager control to specify a mode.

These tables shows the entire set of Property/Value pairs needed to complete the sample data entry page.

Record display controls Display state Edit state
IDlbl show( ) show( )
IDtxt show( )
disabled = true		 show( )
disabled = false
FNamelbl show( ) show( )
FNametxt show( )
disabled = true		 show( )
disabled = false
LNamelbl show( ) show( )
LNametxt show( )
disabled = true		 show( )
disabled = false
PCchk show( )
disabled = true		 show( )
disabled = false
RecordsetNavbar show( ) hide( )
Mode event buttons Display mode Edit mode
Display Button show( )
disabled = true		 show( )
disabled = false
Edit Button show( )
disabled = false		 show( )
disabled = true
Mode action buttons Display mode Edit mode
Save Button hide( )
disabled = true		 show( )
disabled = false
Insert Button hide( )
disabled = true		 show( )
disabled = false
Add Button hide( )
disabled = true		 show( )
disabled = false
Cancel Button hide( )
disabled = true		 show( )
disabled = false
Delete Button hide( )
disabled = true		 show( )
disabled = false

Mode Transitions and Actions

You can complete the transition and action settings for the data entry form by identifying the events you want to use to switch between modes and the actions that occur before the switch is completed.

Use the Action tab of the FormManager control to specify transitions and actions.

This table shows the settings for both panels in the Action tab of the FormManager control. Remember, the mode itself specifies properties and methods on the display controls. The following settings specify events that trigger the mode and the actions that must be completed before entering the next mode.

Current mode Object and event Next mode Button actions
Display Editbtn Edit None
Edit Displaybtn Display None
Edit Savebtn Display Recordset.updateRecord( )
Edit Cancelbtn Display Recordset.cancelUpdate( )
Recordset.moveNext( )
Edit Newbtn Display Recordset.addRecord( )
Recordset.moveLast( )
Edit Deletebtn Display Recordset.meleteRecord( )
Recordset.moveFirst( )