Filling a GridView with Data from a Database using ASP.NET Controls

Filling a GridView with Data from a Database using ASP.NET Controls

You can frequently need to present enormous volumes of data on a webpage as a web developer. Using a grid-based layout, such a GridView, is a typical remedy for this. In this post, we'll look at utilising ASP.NET controls to populate a GridView with data from a database.

Overview of GridView:

The GridView is a server control for ASP.NET that offers a versatile way to present data in a tabular style. It comes pre-loaded with capabilities like data editing, sorting, paging, and many others. Due of its flexibility and the ability to alter the grid's appearance and behaviour via templates, styles, and events, GridView is frequently used in ASP.NET applications.

Connecting to a Database:

Before we can fill a GridView with data, we need to connect to a database. In this article, we will use the Microsoft SQL Server database. You can use any database that supports the ADO.NET data provider, including Oracle, MySQL, and others.

To connect to a database, we need to create a connection string. A connection string is a string that contains information about the database, such as the server name, database name, user name, and password. In ASP.NET, we can store the connection string in the Web.config file.

<connectionStrings>

   <add name="MyDatabase" 

        connectionString="Data Source=(local);Initial Catalog=MyDatabase;Integrated Security=True"/>

</connectionStrings>

Retrieving Data from a Database:

The ADO.NET data provider can be used to get data once we have established a connection to the database. In this tutorial, we will retrieve data from the database and save it in a DataSet using the SqlDataAdapter. When storing and retrieving data from a database, a DataSet is an in-memory representation of the data.

using (SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["MyDatabase"].ConnectionString))

{

    connection.Open();

    SqlDataAdapter adapter = new SqlDataAdapter("SELECT * FROM Customers", connection);

    DataSet dataSet = new DataSet();

    adapter.Fill(dataSet, "Customers");

}

Binding Data to the GridView:

We can now link the data to the GridView after retrieving it from the database. The DataSource property of the GridView must be set to the DataSet, and the DataBind method must be called in order to bind data to the GridView.

GridView1.DataSource = dataSet.Tables["Customers"];

GridView1.DataBind();

Customizing the GridView:

The GridView presents data by default in a straightforward table format. However, we may use templates, styles, and events to alter the GridView's appearance and behaviour. For instance, we can format the data in the cells, add sorting and paging capabilities, and add a header row to the GridView.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">

    <Columns>

        <asp:BoundField DataField="CustomerID" HeaderText="Customer ID" />

        <asp:BoundField DataField="CompanyName" HeaderText="Company Name" />

        </Column>