Tech Junkie Blog - Real World Tutorials, Happy Coding!: ASP.NET GridView Control Part 1: Getting Started, Create GridView in Web Form

Sunday, June 19, 2016

ASP.NET GridView Control Part 1: Getting Started, Create GridView in Web Form

The GridView data grid control is probably the most popular and flexible data grid control in the ASP.NET arsenal.  In this tutorial we will create a new GridView data grid on a web form.

Here are the steps:

1. Click on the "Design" tab in main window of Visual Studio



Visual Studio Design Surface


2. Click on the "Toolbox" tab, then expand the "Data" node, then drag the "GridView" data control to the Design surface.  The Design Surface is the big window in the middle of Visual Studio.

Visual Studio drag GridView from Toolbox to design surface


3. Click on "Toolbox" tab again, this time drag the "SqlDataSource" control to the Design Surface

SqlDataSource in Toolbox

4. Click on the ">" button next to SqlDataSource1 control, then select "Configure Data Source"
5. Click on the "New Connection" button

Configure Data Source

 6. Select your "Server name", SQL Server should pick up your database server automatically if it's on a local machine, but if it doesn't type in (local) in the "Server name" field.


7. Click "OK"
8. A new connection has been defined in your web application

Connection string

9. Click "Next", leave the checkbox check for the option "Yes, save this connection as:", "NorthwindConnectionString"
10. Click "Next"
11. On the "Configure the Select Statement" window select "Specify a custom SQL statement or stored procedure"
Configure the Select Statement
 12. Click "Next"
13. Click on the "Query Builder" button"
 14. On the "Add Table" window select the "Categories" and "Products" table and then click "Add", then click "Close"
Add Table in Query Builder

15. In "Query Builder" the two tables and their relationships are displayed

Relationships between tables in Query Builder

16. The following into the SELECT statement window

SELECT        Products.ProductName, Products.UnitPrice, Categories.CategoryName, Categories.Description
FROM            Categories INNER JOIN
                         Products ON Categories.CategoryID = Products.CategoryID

Query Builder SELECT statement window

17. Click "OK"
18. Click "Next"
19. Click "Finish"

20. Click on the ">" button next to the GridView1 control, and for the "Choose Data Source" dropdown list chose "SqlDataSource1"

Choose a Data Source for SqlDataSource control

21. Right-click on the "Default.aspx" file then select "Set as Start Page"


22. Press F5 to run the page, the GridView will be displayed on the browser page.

GridView products result

Source CodeGridViewWebSite.zip  to download the zip file click on File -> Download

3 comments:

Search This Blog