SqlDataSource Control Part 1: Bind The SqlDataSource To A GridView Without Writing A Single Line Of Code

The SqlDataSource control is a data source control that is wizard driven to give you a quick and easy way to connect to the database.  It is a great tool to use if you need something quick to show your boss or if you need to set up a quick demo as a proof of concept.  Most .NET beginners like to use this data source control because it requires very little coding if any at all.  However, if you want to build a real world application you might want to think about creating a data access layer and a business layer to communicate with the database.  Imagine if your application gets bigger and each of your GridView uses an SqlDataSource control.  Each SqlDataSource has it's own query to maintain.  It would be a maintenance nightmare.

The following is a step by step instruction of how to bind a SqlDataSource control to a GridView:

1.  Create a new project Web project in Visual Studio
2.  Create a new .aspx page
3.  Drag the "GridView" control from the "Toolbox" pane in the left hand side to the .aspx design surface

  

4.  Drag the "SqlDataSource" control to the .aspx design surface

 

 5. Click on the "Configure Data Source" link in the "SqlDataSource1" control.  The "Configure Data Source" wizard is displayed.  Then click on the "New Connection" button

6. The "Add Connection" wizard is displayed, type in your server name\sql instance in the "Server name:" drop down menu. 

7.  Select the "Northwind" database that Visual Studio picks up from the database, or you could type it in yourself if Visual Studio is taking too long to detect the databases

8.  Click on the "Test Connection" to see if you could connect to the database

9.  Click on the "OK" button to move on to the next step.

 

10.  You will be taken back to the "Configure Data Source" screen.  Click the "Next" button to move on to the next step.

11.   Check the "Yes, save this connection as:" checkbox then click "Next" to move on to the next step

12.  The "Configure the Select Statement" wizard is displayed

13.  In the "Name:" dropdown list, select the "Products" table

14.  Under "Columns" leave the checkbox  "*" checked, then click on the "Next" button

15. On the "Test Query" screen click on the "Test Query" button to see the query execute and return the result in the preview pane.  Then click "Finish" when you are done

16.  Now that we have our SqlDataSource control configured.  We want to bind it to the GridView1 control on our .aspx page.  To perform this step, first you click on little ">" icon next to the GridView1 control.  The "GridView Tasks" panel will open up.

17.  Select "SqlDataSource1" from the "Choose Data Source" drop down list in the "GridView Tasks" panel.

18.  You will see the "GridView1" control expand with the "Products" table columns

19.  Hit  Ctrl+F5 to run the application.  Make sure you set the project and .aspx page as the startup project and start up page before you hit Ctrl + F5