DreamwaverMX and ASP.NET(2)

2. Use ASP.NET component DataGrid to display data

Related content introduction:

ASP.NET comes with many web components to speed up the process of editing web pages. Let us use the example of global, a tutorial that comes with Dreamwaver MX, to demonstrate how to use this component to display data in the database.

1. Database link and display data with DataGrid

There is the database global.mdb of this instance in the assets in the web page directory. Our purpose is to output the data of different regions based on the value of Region_id in the location table in this database. (You can use Access to open this database)

We can rename the location3.htm file to location3.aspx (the suffix of ASP.NET's web window file is aspx) and then edit it.



[Figure 2-1 Pages that need to be changed]

Let's delete the simple static part in the middle and use ASP.NET's DataGrid to implement its functionality.



[Figure 2-2 Delete the static part of the page]
The next step is to link to the database. Click the Application panel on the right, select Database, and click the + sign.

Select OLE DB connection.



[Figure 2-3 Application panel]

Then enter the OLE DB Connection dialog box. Here you can handwrite the link database code, or automatically generate the code. Name the Connection Name location, click Build, and the code will be automatically generated through the wizard.



[Figure 2-4 OLE DB Connection dialog box]

After entering the Data Link Properties page, select Provider to set the database engine.

What’s amazing below is that it supports 21 database connection methods including SQL server, Oracle, etc.



[Figure 2-5 Database engine provided page]

This is one of the great things about .NET, supporting multiple databases. It uses ADO.NET. After a while, the connection string we generate using this wizard is written in accordance with ADO.NET.

Since the database we are going to link to is an Access2000 database, we select Microsoft Jet 4.0 OLE DB Provider and click Next.

Click the button next to 1.Select or enter a database name to select the database you want to link to.

Cancel User name and Password in 2.Enter information to log on to the database



[Figure 2-6 Setting link]

Set read permissions in Advanced. Select Read, ReadWrite,Write and click OK.



[Figure 2-7 Setting permissions]

Add a Connection name and click Test to test the database link. If the database link is successful, click OK. congratulations,

You have linked the database to your site. The next step should be to display it using DataGrid

Also in the Application panel, select Server Behaviors.

Complete the settings first, click deploy, and the program will automatically deploy the site and copy the DreamweaverCtrls.dll, web.config and _mmServerScripts folders to the site directory, which are necessary files to use Dreamweaver MX to create ASP.net web pages.



[Figure 2-8 Deployment site]
At the same time, you must first create a bin folder in the root directory of the website and copy the DreamweaverCtrls.dll file to this folder.

Click the + sign to create a new DataSet first.



[Figure 2-9 Add Dataset]

Connection is to select the data source, Table is to select the table, Column is to select the item, and Filter is used to filter the data. Since this page displays data from Europe, Entered Value=3 is set. On Failure, Go To is used to handle the page that jumps to when there is an error in reading data.



[Figure 2-10 Creating a data set]

After successfully creating the DataSet, you can create the DataGrid. Click the + sign and select DataGrid



[Figure 2-11 Add DataGrid]

Select the required record set in Dataset, set whether to use paging display and the number of records per page displayed in paging, set the navigation bar method in Navigation, and add or delete displayed items in Columns.



[Figure 2-12 Setting DataGrid]

Click Edit to set the header title. After entering the title, click OK to confirm.



[Figure 2-13 Setting title]

Click OK to add the DataGrid.



[Figure 2-14 Preview page]

In the preview page you can see an area where a DataGrid has been added. Press F12 to preview the page.

Below is the page after running.



[Figure 2-15 Page after running]
2.Change the properties of DataGrid

Related content introduction:

When you see this component, do you think the color doesn't look too pretty? Then let's change it. The DataGrid component has many properties through which you can change the style of the DataGrid.

Analyze code