Saving and Retrieving Data with AJAX - Create a Sample Web Page
(Page 3 of 4 )
To begin, create a new ASP.NET AJAX-enabled web site named AWProductData.
The IDE automatically places the all-important ScriptManager control onto your page. Open your toolbox and click the Data tab. You’ll find two types of objects: display controls, which are designed to present data, and DataSource controls, which are designed to help you manage interacting with data sources, as shown in Figure 4-2.
Figure 4-2. The Data tab in the Toolbox contains the controls that you’ll need to display data, and
to interact with data sources.
Using a DataSource Control By default, the Data controls are arranged so the display controls are on top, and the DataSource controls are below (You can drag them into any order you like or arrange them alphabetically by right-clicking on any control and selecting Sort Items Alphabetically.) There is a DataSource control for use with Microsoft SQL Server or SQL Server Express, one for Microsoft Access, one for any type of Object, one for use with SiteMaps (for binding to menu controls—more on this in Chapter 6), and one for XML documents as a data source.
Since the AdventureWorks database is a SQL Server database, you’ll use the SqlDataSource control whether you are using SQL Server or SQL Server Express. This control will allow you to access the AdventureWorks database, but first you need to direct the control where to find it.
Switch to Design view and drag the SqlDataSource control from the Toolbox directly onto the design surface. A Smart Tag will open, as seen in Figure 4-3.
Figure 4-3. A Smart Tag opens when you drag the SqlDataSource control onto your page allowing
you to configure the data source.
When you click on Configure Data Source, you invoke a wizard that will walk you through the steps of configuring your data source—hooking up the control to the underlying data table(s).
The first step is to create (or choose) a data connection as seen in Figure 4-4.
Figure 4-4. To configure your DataSource control, you need to provide it with a data connection. You can choose a preexisting connection from the list (if you have previously created any for this web site), or create a new data connection by clicking the New Connection button.
Previous data connections in this web site will be listed in the drop-down menu. To make a new connection, click the New Connection… button to get the Add Connection dialog shown in Figure 4-5.
Figure 4-5. The Add Connection dialog is where you specify a new connection for your data source.
Select the server, the logon credentials, and finally the database you want to use.
Following the steps in Figure 4-5, prepare your connection to the database:
- Select your server from the Server Name drop-down menu. If it is not there, type the name of the server. Typically, if you are using SQLExpress, the name will be “.\SqlExpress” (dot-slash then SqlExpress) and if you are using SQL Server it will be the name of your computer, or it will be (local)—including the parentheses.
- Leave the radio button set to “Use Windows Authentication.”
If Windows Authentication does not work, you may need to use SQL Server authentication. If so, your database administrator will tell you what credentials to enter. They may or may not be the same as your Windows login credentials.
- Select the option, “Select or enter a database name:”.
- Choose the AdventureWorks database in the database name drop-down.
- Click the Test Connection button to verify that it all works.
This dialog box constructs a connection string, which provides the information necessary to connect to a database on a server.
Click OK to complete the string and return to the Configure Data Source Wizard. Click the plus mark next to “Connection string” to see the connection string you’ve just created, as shown in Figure 4-6. The segment Integrated Security=True was created when you chose Windows Authentication rather than SQL Server Authentication.
In Figure 4-6, the Wizard displays an expanded data connection in the drop-down menu, consisting of the name of the server (in this case the local machine, virtdell380, concatenated with sqlexpress, followed by the name of the database and database owner). You don’t need to enter this information yourself.
Figure 4-6. Click the plus sign to view the connection string you just created. This is what gives
your control access to the database.
When you click Next, the Wizard will ask if you’d like to save this Connection string in the “application configuration file.” In an ASP.NET program, the application configuration file is web.config, and saving the connection string there is an excellent idea, so be sure to check the checkbox and give the string a name you can easily remember. The Wizard will make a suggestion for the name of the connection string, as shown in Figure 4-7.
Figure 4-7. It’s a good idea to save the connection string in the application’s web.config file, so you
can use it again with other controls.
This will cause the following lines to be written to web.config:
<connectionsStrings>
<add name="AdventureWorksConnectionString"
connectionString="Data Source=.\SqlExpress;
Initial Catalog=AdventureWorks;Integrated Security=True"
providerName="System.Data.SqlClient"/>
</connectionStrings>
The Wizard next prompts you to configure the SELECT statement. The SELECT statement is the SQL code the control uses to retrieve the exact subset of data you are looking for from the database. Fortunately, if you are not fluent in SQL (most often pronounced “see-quill”), the Wizard will help you build the statement.
Starting with the radio buttons at the top of the dialog box, select “Specify columns from a table or view.” (You would select the other button if you had a custom SQL statement prepared, as you’ll see shortly.)
Selecting the button, displays the table drop-down menu. Here, you are presented with the various table options that represent the different sets of data in the database. For this exercise, choose the Product table. The various columns from the Product table will be displayed, as shown in Figure 4-8. Simply check the columns you want retrieved, and they’ll be added to the SELECT statement. The choices you make will be displayed in the text box at the bottom of the dialog. For this exercise, select the ProductID, Name, ProductNumber, MakeFlag, SafetyStockLevel, and ReorderPoint columns. You could narrow the set of data with the WHERE button, or specify the order in which to retrieve the data with the ORDER BY button. For the moment, you can ignore them both.
Figure 4-8. To configure the SELECT statement, specify the table and columns within it you want
to retrieve, and the Wizard builds the proper SQL statement for you…more or less.
Next: Pay No Attention to That Man Behind the Curtain >>
More ASP.NET Articles
More By O'Reilly Media
|
 This article is excerpted from chapter four of Learning ASP.NET 2.0 with AJAX: A Practical Hands-on Guide, written by Jesse Liberty, Dan Hurwitz and Brian MacDonald (O'Reilly, 2007; ISBN: 0596513976). Check it out today at your favorite bookstore. Buy this book now.
|
|
/ 3 
