In this blog, we will discuss about how to use DataView and DataGrid in ASP.NET.
What are DataGrid and GridView?
- DataGrid is introduced in ASP.NET 1.1 and still supports Gridview, which was introduced in ASP.NET 2.0
- We can use DataGrid controls only for data selection.
- GridView control can use sorting, paging, deletes and updates .
- GridView introduces new column types.
In this tutorial, I will show how to retrieve the database value and how to show the database value in GridView and DataGrid.
First, we will create a Webpage in ASP.NET Web Application project, where we will open Visual Studio, followed by clicking File->New->Project.
Afterwards, click Project followed by opening new popup Window, which opens, as shown below.
Now, click ASP.NET Web Application and enter the project name (I am creating a project name GridViewSample). Afterwards, enter the name and click OK. Afterwards, click OK button templates that will popup, as shown below.
![]()
I choose WebForms empty template. Afterwards, click OK button. New project explorer is created. Afterwards, we should create new WebForm page . Right click on the Project folder, followed by clicking Add and subsequently choose WebForm.
I had given Web Form Page name GridViewSample. Subsequently, click OK button and create a new Webpage. Now, I will explain how to retrieve the database, using GridView and DataGrid.
First, I have created a sample database, using SQL Server. My database sample screenshot is given below.
Now, I am going to explain the database value, which will be retrieved, using GridView and DataGrid. In Visual Studio, click Webform page and subsequently click Design Mode.
Let's click Toolbox now. We are going to choose First DataGrid. Before proceeding to DataGrid Toolbox, two types of DataGrid are available. We can see the screenshot given below. First, right click on toolbox, followed by choosing an item. We can see Two DataGrid.
![]()
The screenshot shows Two DataGrid options, where one is Windows and another is Web. Now, we should choose Web. Subsequently, click Web and finally OK button. Now, DataGrid control will be added.
Now, we can see DataGrid in the toolbox. Now, drag and drop DataGrid in WebForm Design space. Before proceeding, DataGrid cannot access the database directly. We are required to connect the database declarative datasource controls SQL DATASOURCE. We can choose its toolbox itself.
Now, drag and drop SQL DataSource and DataGrid also in Web Form Design space. Now, we should configure the database, using SQL DataSource.
![]()
Click arrow, followed by clicking 'Configure Data Source'. Now, we configure our database with SQL database. Afterwards, the database is configured with SQL DataSource. Now, click Next button, which shows pop up database table column field name. Now, we select our column field name.
Now, click 'Next' button. We can check our database value, using Test Query in popup. Click Test Query, which shows table database value.
Now, click Finish, which helps in successfully configuring the database successfully. Now, I am going to explain configured database value. How do we use DataGrid and Grid View table? Now, drag and drop DataGrid into Webform Page Design page. Click arrow Gridview, followed by selecting the Data Source.
![]()
Now, select configured database name. Now, our design code looks as shown below.
- <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridviewExample.aspx.cs" Inherits="GridViewSample.GridviewExample" %>
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
-
- <head runat="server">
- <title></title>
- </head>
-
- <body>
- <form id="form1" runat="server">
- <div>
- <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:DBconnectionstring %>" ProviderName="<%$ ConnectionStrings:DBconnectionstring.ProviderName %>" SelectCommand="SELECT [id], [name], [City] FROM [samplevalue]"></asp:SqlDataSource>
- <asp:DataGrid ID="DataGrid1" runat="server" DataSourceID="SqlDataSource1" Height="168px" style="margin-top: 1px" Width="275px"> </asp:DataGrid>
- </div>
- </form>
- </body>
-
- </html>
Now, DataGrid table shows the database value table format. It is similar to whatever we did in DataGrid. Afterwards, configure GridView with Data configsource and the output will look, as shown below.
Now run the code. Output should be like this ,
![]()
Conclusion
I hope you understood how to retrieve the database value, using DataGrid and Gridview, which shows the table format, using ASP.NET. Please share your valuable feedback and comments to improve my future articles and improve my article presentation.