ASP.NET Querystring: Basic Dynamic URL Formations

You might have seen query-based URLs, for example:

http://dotnetdevelopment.net/index.aspx?contentid=1

Or if you are working in a Visual Web Developer Express local host environment, the query-based URL should look like this:

http://localhost:2321/index.aspx?contentid=1

This tutorial will teach you the basics of developing ASP.NET 3.5 websites using a query string in the URL for presenting content.

Create a Visual Web Developer Project and Database

To help you better understand this concept, let's illustrate it with a project. Suppose you build a website using ASP.NET 3.5 that has the following features:

a. A home page using a Default.aspx ASP.NET web page. The home page should present the content summary of the website in table format with links going to detailed content pages.

b. The detailed content URLs (Details.aspx ASP.NET web page) is query-based. This means that it will pull content out of the database depending on the query ID.

First, you need to create a project in Visual Web Developer Express 2008. Once the project has been created, you need a sample MS SQL Server database and other files required for this tutorial. You can download what you need at the link above. 

After extracting the contents (using WinRar, right click and "Extract here"), you should see these following files:

a. militaryaircraft.mdf - This is the sample MS SQL server database to be used in this project. Copy this database to your App_Data in your ASP.NET project folder.

b. aircraftimages folder - This contains the images required for this tutorial. Copy this folder to your ASP.NET project folder, in the same path as your Default.aspx

Below is the screen shot of the correct placement of these files/folders within your ASP.NET project folder:

Create the Home Page (Default.aspx)

You need to edit the Default.aspx as this will act as your home page. To do this, go to the "Source" view in Visual Web Developer for Default.aspx, and then follow the rest of the procedure below.

Step 1. Drag the SqlDataSource web control (View à Toolbox à Data) and place it between <div></div> in form tag.

Step 2. Drag the Gridview web control (View à Toolbox à Data) and place it next to SqlDataSource.

Step 3. Go to the "Design" view and configure SqlDataSource first:

a. Right click on SqlDataSource à "Show Smart Tag" à Configure Data Source

b. Select "militaryaircraft.mdf" as the database to connect.

c. Check "Yes, save this connection as: ConnectionString."

d. You will then see the "Configure the Select Statement." Configure as follows:

• Make sure "Specify columns from a table or view" is selected.
  
• Under "Name": select "aircrafttable."
  
• Under "Columns," select *

Click Next and Finish.

Step 4. In the Design View, configure the Gridview web control as follows:

a. Right click on it à Show Smart Tag  à Choose Data Source à SqlDataSource1

b. Right click on it again à Show Smart Tag à Edit Columns.

c. Under "Selected fields:" remove the fields "aircraftid," "type" and "primary user" by selecting on it and clicking the red x button.

d. Click the name field under "Selected fields," and under BoundField properties à HeaderText, change it to Aircraft Name.

Only the "Aircraft Name" will be left under "Selected fields."

e. Since you need to add a link going to detailed pages of your website, you need a hyperlinked field in the home page gridview table. Scroll down in "Available fields" à selected "HyperlinkField" and click "Add."

f. Select "HyperlinkField" under "Selected fields," and under "HyperlinkField properties," change the value of the HeaderText to Detailed Pages. The name of "HyperlinkedField" will then be changed to "Detailed Pages" under "Selected fields:"

g. Also under "HyperlinkFieldProperties" à "Appearance"  à change the "Text" to Read Details. This is the anchor text of the hyperlink when viewed in the browser.

h. Select "Detailed Pages" under "Selected fields," and under HyperLinkField properties, go to Data and configure as follows:

• Change the value of DataNavigateUrlFields to aircraftid
  
• Change the value of DataNavigateUrlFormatString to /aspnetqueryurl/Details.aspx?id={0}

Your "Edit Column" fields should look like:

Finally click OK. For details about hyperlink columns in Gridview, you can read this tutorial. 

Your completed home page should look like this (File à View in Browser):

Mouse over the hyperlink "Read Details" in the browser, and the URL should look like: http://localhost:4384/aspnetqueryurl/Details.aspx?id=1 for the first record (A-10 Thunderbolt II).

When this link is clicked, the user will be transferred to the Details.aspx web page and the content of A-10 Thunderbolt II will be retrieved from the MS SQL Server database to be shown in the browser (because the id used is 1, corresponding to the aircraftid value of A-10 Thunderbolt II in the database).

Create the Detailed Pages (Details.aspx)

Details.aspx is still not created and does not exist. You need to create that by going to File à New File à under Visual Studio installed templates, select "Web Form" à in the "Name," change "Default2.aspx" to Details.aspx.

Check "Place code in separate file," set the Language to "Visual Basic" and click "Add."

You will use the DetailsView web control for presenting the detailed content. Follow the steps below:

Step 1: Drag SqlDataSource to between div tags in Details.aspx

Step 2: Drag DetailsView next to SqlDataSource.

Step 3: Go to the "Design" View and configure SqlDataSource as follows:

a. Right click on it à Configure Data Source à Select "ConnectionString". Click Next.

b. Under "Configure the Select Statement": In Columns, check "*". You are presenting detailed information so you need to retrieve the entire database columns. Next, click "WHERE." Configure as follows:

Under "Column:" select aircraftid

Under "Operator", select =

Under "Source:" select "QueryString"

Under "QueryString field:" type id

The resulting SQL query statement of the above configuration is:

SELECT * FROM [aircrafttable] WHERE ([aircraftid] = @aircraftid)  

And the WHERE clause depends on the value of: Request.QueryString("id") 

So this SQL statement means: "retrieve the complete table rows in aircrafttable where aircraftid is equal to id in the URL query string."

Finally, click "Add" and OK.

c. Click Next and Finish.

Step 4. Configure DetailsView in the Design view by right clicking on it à Show Smart Tag à Choose Data Source à SqlDataSource1.

Step 5. Right click again on DetailsView à Show Smart Tag à Edit Fields

Step 6. Similar to what you did in the Gridview configuration in Default.aspx, change the HeaderText field as follows under "BoundField properties:"

a. name to Aircraft Name

b. type to Aircraft Type

c. primaryuser to Primary User

You also need to remove "aircraftid" under "Selected fields" (click on it and click the Red x button).

Step 7. To add aircraft images, you need to add an ImageField (under "Available fields" click ImageField and then click Add). As a reference, read this tutorial for details  (ImageField can be configured the same way in both DetailsView and Gridview web controls).  

Step 8: Click ImageField under "Selected fields" and change the Header Text to Photos.

Step 9: Under ImageField properties, go to Data. Configure these important fields as follows:

a. DataImageUrlField = aircraftid

b. DataImageUrlFormatString = /aspnetqueryurl/aircraftimages/{0}.jpg

Your Edit Column field should look like:

Finally click OK. The configuration of Details.aspx has been completed.

Test the Project in the Browser

Go to Default.aspx, Go to File à View in Browser. You will then see the home page with "Read Details" hyperlink.

Clicking on it (for example click the entry on F-22A Raptor), will show the URL in the browser address bar as:

http://localhost:4384/aspnetqueryurl/Details.aspx?id=9

The id is 9, which corresponds to the F-22A Raptor record in the database. SqlDataSource has been configured to grab the query ID from the URL, and then retrieve database records to show content to the DetailsView web control:

Of course the output is very simple and unformatted. You can add more features, such as a link that returns the user to the home page, colors, etc. This simple concept illustrating the ASP.NET querystring can be used to create more complex, dynamic websites.

You can download the entire source code for Default.aspx and Details.aspx.