Join our community
- Expression web tabbed menus
- Expression Web Forum
- Expression web resources
- Build Expression Web Template 1
- Build Expression Web template 2
- Build Expression Web Template 3
- Style horizontal Navigation with CSS
- Style vertical menu with CSS
- Style the main content area
- Style the footer
- Centre a page
- Build Expression Web DWT Tutorial
- Graphic Template example
- Free Expression Web Templates
- Add RSS to Expression Web
- Expression web forms
- RSS feeds
- 10 Tips
- Page includes
- Insert flash in expression web
- Expression web dropdown menu
- Use XML with Expression Web
- Point and click easy drop-down menu's
- Table Based Layouts
- ASP.NET Ad Rotator
- Display Data
- Search database using a text box
- Transparent Text
- Bold text - Formatting
- Date and time
- Who are you
Dropdown List and Data Display
In this tutorial, I hope to show you 2 things.
- How to populate a drop down list from a database
- How to display data that is relevant to the item clicked in the dropdown list.
For this tutorial, we don't go into code view at all. Everything is done by simply pointing and clicking.
Populate a drop down list from a database in Expression Web
On your newly created aspx page, drag a dropdown list control from the asp.net control toolbox onto your page. The common task pane for the drop down list should display. (If not click on the little arrow at the top right of the dropdown list control) Click on 'Configure data source'
You will be prompted to choose the type of data source you want to use.
Select Access Database.
Next you will be prompted to 'browse' to your data source. Click browse and find the database you want to use. (This database should already be in your web site) When you have selected the database, click next at the bottom of the display window.
This will bring you to the 'Configure Select Statement'
Make sure the 'specify column from a table or view' is selected and use the dropdown box to select the table that you want to get the data from.
Once selected, you will be offered the data items from your database. Select the column of data that you wish to display in the dropdown list.
Click OK. If you want you can test the query. Finally click finish.
Now you can test your results in a browser.
The dropdown list should now be populated with the data you selected from the database. Preview it in your browser to make sure the right information is displayed.
Showing data relevant to the item clicked on a dropdown list.
So now we have populated a dropdown list from a database, we need to actually show the results for the item that has been click by the user.
From the ASP.NET controls toolbox, drag a dataview control onto the page, place it under the dropdown list. Once again, you will see the common tasks pane. Click on configure data source and select 'Add new data source'
We don't want to use our existing data source as this is populating the dropdown list. So select new data source. Once again select access as the data source and again select the database you selected before. (We are creating a new data source and not a new database.) Once again, you will see the 'Configure Select Statement'
Unlike the dropdown list, where we just wanted a single set of records to display, this time we want all the information that is relevant to the link clicked in the drop down. So click on the asterix (This selects all records) Then click on the 'Where button'
This will bring up the 'Where Clause' wizard.
So we want to tell expression web, to select all the records WHERE the category is equal to the category selected in the dropdown list (Control)
Click on the column dropdown list and select the same field as the one you used in the dropdown list on your page. In my case this was category. Make sure that the operator is set to = then click on the source dropdown list.
A dropdown list is an ASP.NET Control so from the source dropdown select 'Control' A new dropdown will appear in the Parameter Properties. Click the dropdown and select DropDownList1. (You will see 2 controls. The data view control - this is where all the data relevant to the dropdown list is displayed and the part we are working on now. You will also see DropDownList1, this is the control that holds our category listing and as we want to show information that is relevant to this control, we need to select it) Then click on 'Add' to add the where clause to the select statement. Click OK. Click next, click finish and then test your work in a browser.
You should now see a populated dropdown list and a display view showing the data that corresponds to the value of the dropdown.
So you have probably tested you page and feel frustrated that it doesn't work? Fear not we have not finished yet.
The dropdown list is, if you like, a menu. When you select an item from that menu, you want it to show in the details view. If the list were a true menu, the clicked link would take you to the relevant page/information based on the hyperlink. So we need our dropdown list to take us to our information and it is quite simple to achieve.
Click on the dropdown list control in your page and then look to the far left of Expression web for the 'Tag Properties' task pane. Find the 'Behavior' section and change 'Auto postback' to true. Test your work in your browser and you will now see that the information displayed is relevant to the link you click in the dropdown list.
You can see an example of this code in action here.
Please note, the link takes you to our sister web site. This is because you cannot run asp and asp.net pages from the same hosting account. There is a conflict which at best will make your pages very slow to load and at worst, they will not load at all.
Please note, we have a narrated flash tutorial available for this example. The tutorial shows you exactly how to do this. Please use our contact form above for further details.
Discuss this in our expression web forum?