Basic steps to view database results using gridview control

Back to the tutorials list

Introduction

This tutorial shows the steps needed to make a connection to a database table and bring up the records in the database onto a web page.

If you did not already do the tutorial Sending Form Input to a Database  then do it now, before continuing with this tutorial, which is going to show you how to bring up the results from the database you created in that tutorial.

Create a page to show the database results

Open VWD and with it open the website you previously created (most likely you called it MyTutorialsWebsite).

In the Solution Explorer pane, right-click on your website name (at the very top), click Add New Item, highlight Web Form, highlight Visual Basic as the code choice at the upper left, check the box at lower right to Place Code in Separate File, change the Default name offered to DatabaseResultsPage.aspx, and click the Add button. This should open your new blank page in a new tab.

Drag a GridView from the data section of your toolbox onto your page. You will immediately see the GridView Tasks box.

In the "Choose Data Source" box select "New Data Source", click on the SQL Database Icon and specify a sensible ID for the SQL datasource like SDSGridViewTest and click OK. For the connection string, you should find the connection string you already created in previous tutorial. It is titled "MyTutorialsDatabaseConnectionString". That is the one to select, then click Next.

Check the "Specify Columns from Table or View" and your "FormInputTable" should be available to choose. You can either select * to display all the fields in the database, or check the individual fields you would like to display. We want to display all the fields (some will be used in a later tutorial).

Click the Advanced button and select the "Generate Insert, Update, and Delete Statements" if you would like the user to be able to edit and delete results in the database (in some situations you would not want this). Important Note: You must include the primary key (in this case ID) or the box to check the Generate Insert, Update, and Delete statements will be greyed out.

Then click OK to close that window, click Next, Test Query, and Finish

From the Gridview Tasks, select "Enable Sorting" (and "Enable Editing" and "Enable Deleting if you choose - and if you decided to enable those funtions above). Click Autoformat and choose a format scheme that appeals to you.

Save your page, and then file / preview in browser. You should find all the results from your database table, along with the the ability for the user to do the things you have enabled.  At this point you have learned how to add records to a simple database table from your first tutorial, and how to view, edit and delete those records from this tutorial.

Try it out

Add some records by opening and using  the SubmitForm.aspx page you created in the previous tutorial. Edit or delete records using the page created with this tutorial. You might find it handy to put a link to your Submitform.aspx page on your DatabaseResults.aspx page, and vice-versa.

Note: you may find you have to refresh your pages after each change you make in order to see the latest changes -- otherwise your browser may just show you a cached page that does not display your latest changes, and you may erroneously think your page is not working.

Leave some records in the database table

We will be doing a search page that brings up selected results from this table, so make sure to leave it with some records in it. Make sure you have left the table still containing a record for John Smith.

For more advanced things you can do with databases, check the other tutorials on this site.