This extended example shows how to create a Web page that contains a GridView control and a database control. This example illustrates:

• Adding an ASP.NET component to a form.
• Using the Smart Tasks window.
• Configuring and connecting to a data source.
• Using SQL to read data from a database.
• Running the application in a browser.

1. Create a new ASP.NET project by clicking FileNewASP.NET Web Application.
2. In the New ASP.NET Web Application dialog, name your project:
   • In the Location field, accept the default path or enter another project path.
   • Choose either Cassini or IIS as your server in the Server drop down menu. Click OK.
3. (Optional) In the New ASP.NET Web Application dialog box, click View Server Options The dialog expands to show additional server options. Set the various read and write attributes of the project as needed or accept the defaults.
   Tip: In most cases, the default settings suffice.
4. Make sure that the Design tab is selected in the Code Editor. In the Tool Palette under Data Web 2.0, double-click the GridView component to add the component to your application.
5. Display the GridView component Smart Tasks window either by clicking the arrow on the upper right corner of the GridView or by clicking Smart Tasks on the GridView context menu.
6. To connect the GridView to a data source, click <New data source> in the Choose Data Source drop down list. This displays the Choose a Data Source Type dialog, part of the Data Source Configuration Wizard.
7. In the Choose a Data Source Type dialog, select Database. Enter an ID for the data source and click OK to display the Choose Your Data Connection dialog.
8. On the Choose Your Data Connection dialog, click New Connection.
9. The Choose Data Source dialog lists several data sources, determined by your configuration. The list might include:
   • AdoDbx: AdoDbx Client
   • Microsoft SQL Server: Microsoft SQL Server
   • Blackfish SQL: Blackfish SQL Server Select the Data source and the Data provider for that data source from the lists. Then click Continue.
10. On the Add Connection dialog, enter the appropriate connection information.
    • Click Advanced to enter more detailed connection information for your data source, if necessary.
    • Click the Test Connection button to test the connection. Click OK to close the dialog.
11. On the Choose Your Data Connection dialog, click Next to continue with data source configuration.
12. On the Save the Connection String to the Application Configuration File dialog, enter a name and check Yes, save this connection as. This makes the data source's ConnectionString property reference the name you entered rather than the actual connection string. The web.config file in this project contains the connection string based on the information you have entered. Click Next.
13. On the Configure the Select Statement dialog, set the radio button to either specify a custom SQL Select statement or generate a SQL Select statement for the database you are connected to. If generating SQL, select the table in the Name drop down list, check the desired Columns, and optionally click the WHERE, ORDER BY or Advanced buttons to qualify the SQL statement. The SELECT statement field shows the generated SQL statement. If directly specifying the SQL, click Next to display the Define Custom Statements or Stored Procedures dialog and complete the fields. Optionally, click Query Builder to display a dialog that allows you to graphically create a SELECT statement. You can create SQL statements for SELECT, UPDATE, INSERT and DELETE statements by clicking the corresponding tabs. Click Next in either dialog to continue with data source configuration.
    Note: If you directly specify SQL, you cannot use the feature to automatically generate INSERT, UPDATE or DELETE statements.
    Note: Query Builder
    can only build SELECT statements.
14. (Optional) On the Test Query dialog, click Test Query to test the SQL query. If the query succeeds, the appropriate data is displayed in the dialog. Click Finish to complete configuring the data source.
15. (Optional) If you select the SQLDataSource component on the designer tab, note that the ConnectionString property contains the connection string information. Connection string data is also stored in the web.config file in the connectionStrings element.
16. (Optional) Click the WebForm.aspx tab on the Code Editor to view the markup, which shows the HTML and ASP.NET component information. You can see that the GridView Columns property contains fields bound to the table column names of your database.
17. To view the page in a Web browser, right-click the Code Editor and select View In Browser on the context menu. The project builds, displaying a build status window, which is closed upon completing the build. The browser displays a table for the database you're working with.