Things move on

The website I’m giving this makeover to is a live site that contains a directory of engineering companies. The original site can be viewed at www.engineeringonline.co.uk, while the new version is at www.engineeringonline.co.uk Its design was fairly standard stuff: three drop-downs populated from database tables, from which the user can choose a company type and, as they select an option from one drop-down box, the others get populated appropriately from the database. This requires a new query and a round trip to the server, and that in turn means blanking and redrawing the browser window. Such a site was just crying out for a makeover using something like Flash, AJAX or, in this case, ASP.NET 2.

Things move on

Like many other developers, I saw little point in recoding all our ASP 3 websites in ASP.NET 1, as all it delivered was a lot of grief for little reward in many cases. However, with version 2 and the new development tools ASP.NET now offers, there are very good reasons to reconsider that refusal. The feature I’ll be looking at here is called postback, which enables a web page to requery a database and use the returned record set to redraw areas of the page without causing that annoying flicker as the browser re-renders the whole page (much the same way that AJAX works). To code this, I’m going to be using the new Microsoft development tool Visual Web Developer 2005 Express Edition.

In the past, a valid reason for not using Microsoft database and development tools was their sheer cost, but this has all changed with SQL server 2005 Express and Visual Web Developer 2005 Express Edition, both of which are free. I shall be using them where possible in place of their Enterprise cousins, to show what can be done with these basic tools. I’m going to describe a simplified version of the website I revamped, which is easier to explain and will give the same effect. You should end up with a web page with a drop-down list fed from a database, so that when a user clicks on this a detail area opens up on the page showing more info from the database – and these details get redrawn without any blanking.

First, open a new web application project in Visual Web Developer 2005 Express Edition, which will create all the support files needed, as well as a blank default.aspx page. Onto this page, drag a DropDownList from the toolbox and, as you do this, it will ask you to create a new data source – point this to your database, then, following through with the wizard, build a query that will return the data to display in the drop-down list. Make sure you check the Enable AutoPostBack box on the list control, as by doing this you’ll be enabling the AJAX-style functionality that stops the web page from blanking every time the data changes. It really is as easy as that.

Now you need some way of displaying the details from the record the user has selected via the drop-down list, so the next stage is to drag and drop a DetailsView control onto the page in which to display these details. This control will receive its data from a different data control that will contain only a single record, having been filtered using the selection the user made in the drop-down list. Hence, you need to select New Datasource from the Tasks panel for this control and create a query that will return just those database fields you want to show in your Details view. Once you’ve done this, you’ll need to add a WHERE clause to your new query that takes its parameters from the current selection in the drop-down list.

Disclaimer: Some pages on this site may include an affiliate link. This does not effect our editorial in any way.

Todays Highlights
How to See Google Search History
how to download photos from google photos