Step 11: Creating the Order Edit Form

In this step you will create a new Order Edit form that allows you to edit orders selected on the Customer Orders page. When you are finished, the Order Edit form will look like this:

1. If the Web Forms application is still running, go back to Visual Studio and click the Stop button.

2. In the Solution Explorer and right-click the Order System Web CSharp project (the second project in the solution), and select Add | New Item... from the shortcut menu.

3. In the left pane of the Add New Item dialog select Visual C#, then in the center pane select the MM .NET Web Forms Content Page template. In the Name text box enter OrderEdit.aspx, then click Add:

   

4. In the Select a Master Page dialog select Site.master and then click OK.

5. At the bottom left of the code window, click the Design tab to view the new form in design mode.

6. In the combo box at the top of the Properties panel, select DOCUMENT, then set the form's Title property to Order Edit.

7. With the DOCUMENT still selected, in the Theme property, select MMTheme from the combo box.

8. Click in the white area of the Content control, then select Table | Insert Table from the Visual Studio menu. In the Insert Table dialog set the following properties:
   • Rows: 6
     
   • Columns: 4
     
   • Cellpadding: 3

   

   Click OK to close the dialog and create the table.

9. Hover your mouse pointer over the first table column so the cursor turns into a down arrow, then click to select all rows in the first column:

   

10. In the Properties panel, click the ellipses button next to the Style property. In the Modify Style dialog under Category, select Block, and set text-align to right (leave the dialog open for the next step):

    

11. Next, under Category, select Position and set width to 15%:

    

12. Click OK to save changes.

13. In the same way, set the text-align and width properties on the other three columns to the following values:

    column #	text-align	width
    2	(no setting)	40%
    3	right	10%
    4	(no setting)	35%

14. Drag and drop mmLabel controls into the table and set their Text properties as shown here:

    

15. Drag and drop mmTextBox and mmDropDownList controls on the form as shown here:

    

16. Select the Name, Address, Shipper, and Employee textbox and drop down list controls in the design surface, then go to the Properties panel and set the Width to 100%. Afterwards, the controls should look like this:

    

17. Change the names of the labels and text boxes to something more descriptive (such as lblAddress, txtAddress, cboShipper, and so on).

18. Drag and drop an mmButton into the cell directly below the Freight text box. In the Properties panel set its (ID) to btnCancel and its text to Cancel.

19. Drag and drop an mmButton to the right of the Cancel button. In the Properties panel set its (ID) to btnSave and its Text to Save:

    

20. In this step you will add a new table to the form below the Order Header table. To do this, click the <tablenav-justified> button at the bottom of the design surface, then press the right arrow button. Next, press Enter to add a new, empty line. Your cursor should be below the Order Header table like this:

    

21. From the Visual Studio menu select Table | Insert Table. In the Insert Table dialog, set the following properties:
    • Rows: 1
      
    • Columns: 1
      
    • Cellpadding: 10

    

    Click OK to close the dialog.

22. Drag and drop an mmGridView into the new Table. Press the Esc key to close the smart tag popup. Your form should look something like this:

    

    Go to the Properties panel and change the (ID) to grdOrderDetail.

23. To get the DataGridView to align to the left side of the browser at run time, click in the empty space to the right of the DataGridView to select the <TD> element (the table cell). Go to the Properties panel and set the style to float: left.

See also:
Step 12: Registering Business Objects on the Order Edit Form