This example shows further development of a Web page with a GridView control and database control. It adds a FormView control to insert rows. This example illustrates:
- Adding an ASP.NET component to a form.
- Using the Smart Tasks window.
- Editing markup to change a component's appearance.
- Running the application in a browser.
To add a FormView control
- Open or resume development with the project described in Building an ASP.NET Database Application 2. At the end of that phase, the Design pane showed a GridView control and a SqlDataSource control in the Designer pane of the Code Editor.
- Make sure that the Design tab is selected in the Code Editor. Add a new line to the end of the Web design by pressing the Ctrl-End keys then the Enter key. In the Tool Palette under Web Data, double-click a FormView component, which is added to the form.
- Display the Smart Tasks window for the FormView component by clicking the tab on the upper right of the component. In the drop down menu for Choose Data Source, select the data source that you previously added and configured. On the Design tab, the FormView component shows the data fields.
- Click Auto Format on the Smart Tasks window for the FormView. On the Auto Format dialog, select Slate and click OK.
- In the Design tab, select the FormView component. In the Object Inspector, change the value of the DefaultMode property to Insert. This change allows you to use the FormView control to add rows to the database.
- The FormView control's initial appearance has labels and fields on the same line. The FormView control's appearance is defined by the markup in the InsertItemTemplate entry in the markup file Default.aspx. Display the text in Default.aspx by clicking the Default.aspx tab at the bottom of the Default.aspxpane. To put the labels and fields on separate lines, edit Default.aspx, and add <br/> tags immediately after the column labels. The FormView control now has labels and fields on separate lines.
- View the page in a Web browser by right-clicking the Code Editor and selecting View In Browser from the context menu. The form is now displayed with the FormView control for inserting rows.
This completes the example.