Microsoft Expression Web - SQL Data Source
Expression Web has many tools for working with static HTML pages, but it also has tools to create more dynamic pages. Data Driven Pages often retrieve data or content from a data source. In this chapter, we will learn how to create an SQL data source for use in Data Driven Pages.
Let's take a look at a simple example where we create a dropdown list and populate the list by fetching the data from the database using SQL DataSource .
Step 1 - Start by creating a new empty website.
Let's call it SQLDataSource . Click on OK.
Step 2 - You will see that the web expression has created a folderfor us. However, since we have chosen to create an empty project, we therefore do not have any files yet.
Web Expression should not be used just for creating static HTML sites; we can create dynamic sites using pages and controls with a lot of ease.
Step 3 - Expression web also allows us to create a lot of dynamic content without necessarily being a developer, so let's add an ASPX file from the File → New Page menu option. Select ASPX in the middle template and click OK.
Step 4 - Here we will create a control in our form that needs to access the data from a database to create adynamic website.
In this particular case, we will create an SQL DataSource which will retrieve the data from the database.
Step 5 - Go to the toolbox and drag the DropDownList and drop it into the tag in Code view or you can also drop it into the form section in Design view. You will see that the code is added by Expression Web.
Here we want to connect some data from our database and store it in our drop down list. So the first thing we need is the database.
Step 6 - Create a new folder in your Project folder by going to the menu option New → Folder.
Step 7 - Call this folder App_Data .
Step 8 - We need to import a database into our project using the File → Import → File menu option… .
Step 9 - This will open the Import dialog, as shown below. Click the Add File ... button which will open the open file dialog.
Step 10 - Access the database (* fileer .mdf) that you want to include in the website and click Open.
Step 11 - Open MyTestDatabase.mdf. It will display the following dialog. Click OK.
Step 12 - You can now see that the database file is added in the App_Data folder. When you have a control like a dropdown list and Web Expression allows you to bind data to it, then you will see a little arrow at the top right of the view design.
Step 13 - This is the current context menu that can allow us to do a veryspecific for that particular control and one of them is to choose a data source. So let's click on Choose Data Source… and it will open the Data Source Configuration Wizard.
Step 14 - Currently we do not have a data source. Select New Data Source option from the menu.
Here, we are going to import an SQL database. Select the database and click OK.
Step 15 - Now we need to specify the connection string. Let's click on the New button connection.
Step 16 - Select the Microsoft SQL Server database file and click OK.
Step 17 - Click the browse button to locate the database file.
Step 18 - Select the database file and click the Open button or double-click the database file.
Step 19 - To test the connection, click the Test Connection button.
The following screen will appear. ClClick on the OK button.
Step 20 - We will now configure the data source. Click Next on the next screen.
Check the box and click Next again.
Step 21 - Here, you will see all the tables in your database. Let's select the Student table.
Step 22 - And you will see all the columns in the list box. Select ID and LastName . At the bottom you can see that itactually creates a query. You can also use the Where or ORDER BY clauses. When the query is complete, click Next.
Step 23 - Click the Test Query button. It will display the query result as shown below.
Step 24 - In the following dialog , the data source is selected by default. The "Select a data field to display in DropDownList" field is the field that will actually be displayed. Select LastName and select the ID in the "Select a data field field for the value of DropDownList "and click Ok.
As you can see in the following screenshot, DataSource is added in Design mode.
Here is the complete code of the ASPX file, which is created by Expression Web.
<% @ Page Language = "C # "%> < content = " text / html; charset = utf-8 "http-equiv = " Content-Type "/> Untitled 1 asp:>
Step 25 - Save the web page by pressing Ctrl + S.
Bring up this page SQLDatasource.aspx and click Save.
Step 26 - Let's preview this page in a browser. You will see a drop-down list containing the name of the students in the Student table. asp:>