ASP.NET is the most preferred technology used for developing dynamic websites and web applications these days. All applications have some data to be inserted. By using ASP.NET GridView, you can add data in a table format.

In this tutorial, ASP.NET GridView, you will learn everything you need, to begin your GridView journey.

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program
Want a Top Software Development Job? Start Here!

What Is ASP.NET?

ASP.NET is a server-side technology used for developing dynamic websites and web applications. It helps developers create web applications by using HTML, CSS, and JavaScript.

ASP.NET_logo

It is the latest version of Active Server Pages, which Microsoft developed to build websites. It is a web application framework released in 2002 and had an extension of .aspx. 

ASP.NET provides multiple development modes, which help develop applications in an easy and better way. It reduces all the issues that come up while building a web application like speed, cost, and language.

ASP.NET_GridView_What_is_ASP.NET_Performance

What is ASP.NET GridView?

GridView is a control used to display data in tables on a web page. It displays data in both rows and columns, where each column represents a field, and each row represents a record.

ASP.NET_GridView_What_is_GridView

GridView helps to perform key activities like Insert, Delete, Sorting, and Paging.

GridView Control Syntax:

<asp:GridView ID=”GridControl” runat=”server”>

</asp:GridView>

ASP.NET_GridView_Demo_code.

Prepare Yourself to Answer All Questions!

Automation Testing Masters ProgramExplore Program
Prepare Yourself to Answer All Questions!

Properties of GridView

Here are some properties of GridView:

Name

Description

  BorderWidth

BorderWidth represents the border width of a Web Control Server. The specified border width of a web server is negative.

CssClass

CSSClass sets the Cascading Style Sheets class rendered by the Web Server Control on the client.  

AccessKey

AccessKey helps you navigate quickly to the Web Server Control. It allows you to specify the keyboard shortcut for web server control.

BackColor

BackColor represents and sets the background color of the Web Server Control. By default, it sets the color to be empty to show that there is no property set.

BorderColor

BorderColor sets the border color for the Web Server Control. It is inherited from the WebControl base class.

TagKey

TagKey gets the value of HtmlTextWriterTag which corresponds to the Web Server Control.

  TagName

TagName is used to get the name of the control tag associated with the Web Server Control.

Width

A Width is a unit that represents the width of a Web Server. The width of the Web Server is a negative value.

ASP.NET_GridView_Methods

Learn From The Best Mentors in the Industry!

Automation Testing Masters ProgramExplore Program
Learn From The Best Mentors in the Industry!

Control Events of GridView

GridView control provides several events that help develop programs for an application. 

Here are some of the Control Events:

Name

Description

RowCommand

RowCommand is an event that performs a task when a button is clicked in the GridView control. It also enables you to perform custom routines whenever this event occurs.

RowCreated

RowCreated is an event used to modify the contents of a row when a row is created. It also helps to determine the index of a row.

RowDeleted

RowDeleted is an event used to check the results of a deleted operation. It also displays a message whenever the process is successful.

RowUpdated

RowUpdated helps to check the results of an updated operation. It also enables to perform custom routines and check the result.

Sorted

An event is used to perform tasks after the user clicks a hyperlink to sort a column.

RowEditing

RowEditing is an event used to cancel the editing operations whenever the event occurs.

Sorting

Sorting is used to perform the sorting functionality when a GridView control is bound to a DataTable object by setting the data source property.

RowDataBound

RowDataBound occurs when a row is bound to data in a GridView control.

Methods of GridView

Here are some of the methods of GridView:

Name

Description

AddedControl

AddedContol method is used when a control is added to Control’s collection. It is called after it adds child control to the control’s collection of the control event.

DataBind

DataBind binds a data source that invokes a server control and child controls with an option to raise the DataBinding event.

Dispose

Dispose is a method that enables a server control to perform a cleaning operation before the release of memory. It leaves the grid control in an unusable state.

FindControl

FindControl is used to search the current naming container for the specific server control with the specified id parameter.

RemovedControl

RemovedControl is a method called immediately after a child control is removed from the controls collection of the control object.

InitializerPage

InitializePage initializes the page row displayed when the paging feature is enabled. GridView row represents the pager row to initialize.

LoadViewState

LoadViewState loads the previously saved view state of the GridView control. This method is mainly used by the .net framework.

OnBubbleEvent

OnBubbleEvent is a method used to pass the interface for server control hierarchy to the web server control.

ASP.NET_GridView_Methods

Learn 15+ In-Demand Tools and Skills!

Automation Testing Masters ProgramExplore Program
Learn 15+ In-Demand Tools and Skills!

Demo: How to Create a Database Table in GridView?

Before creating a database table in Gridview, there are some prerequisites that you must keep in mind.

Prerequisites:

  • Installed Microsoft SQL Server 
  • Microsoft Management Server Studio

 Now, the steps to create a database table are:

1. Download and Install Microsoft SQL Server

  • Open Chrome and type Microsoft SQL Server.

    https://www.microsoft.com/en-in/sql-server/sql-server-2019
  • In the link, go for downloads on the top of the website.

  • There are two types of download options - one is Developer, and the other is Server.

  • Click on download below the server option. It will take some time to download.

  • After the download is successful, open the application and run it.

  • Before installing, it shows a message to select some options. Choose the Basic option and then click on Agree.

ASP.NET_GridView_Demo_SQL_Installation

  • Once you click on Agree, a new window will appear on the screen.

  • In that window, click on Install. It takes some time to download and install all the tools and applications.

  • Once the installation is successful, go ahead and close the application.

2. Download and Install SQL Server Management Studio

  • To install SSMS, either install directly in the final step of SQL Server Installation or go to Chrome.

  • In the Chrome window, type Microsoft SQL Server Management Studio 

https://docs.microsoft.com/en-us/sql/ssms/download-sql-server-management-studio-ssms?view=sql-server-ver15

  • After you download the above application, open the application and run it. It will take some time to download the application and install it.

  • Once you install the application, close the application.

Unleash a High-paying Automation Testing Job!

Automation Testing Masters ProgramExplore Program
Unleash a High-paying Automation Testing Job!

3. Set Up Visual Studio

  • Open Visual Studio 2019.

  • Then select: 

File → New in that project

  • In the pop-up that appears, click on Create a new project. It will take some time to open.

  • After that, a new pop-up will open, and in that, select templates and go for ASP.NET web Application (.NET framework) using C#.

  • In the message box that appears, click on next. A new message box will appear on the screen. Name it GridView1.

  • Now, click on create and select Empty. And again, click on Create. The application will take a bit to open the project.

  • Once the application opens, you will see some options on the Right-Side of the Visual Studio.

  • Right-click on the Name GridView1. Then click add, followed by clicking on the web form. A pop-up will raise to specify a name.

ASP.NET_GridView_Demo_WebForms

  • Once the source opens, open Microsoft SQL Server Management Studio.

4. Working on Microsoft SQL Server Management Studio

  • Once the SQL Server Management Studio opens, it shows a message to connect with SQL Server. Click on Connect or Connect by Default.

ASP.NET_GridView_Demo_SSMS

  • Then, you can see some options on the right side of the SQL Management server in Object Explorer.

  • Right-click on the Database, and click on New Database. A message will appear specifying a database name. Here specify a name and click Ok. 

This tutorial has used the name “MobileData”.

ASP.NET_GridView_Demo_SSMS_Naming

  • Then, in the Database column, you see that a new database is created by the name MobileData.

  • Expand MobileData In the options that appear 

Table → New Table

  • A new message will appear to edit Column Name. In the column name, add MobileDataID and add int in Data Type.

  • Add FirstName below MobileDataID and select varchar(50) in DataType.

  • Now, add LastName below FirstName and select varchar(50) in DataType.

ASP.NET_GridView_Demo_SSMS_Table.

  • Now, add Contact with LastName and select varchar(50) in DataType.

  • And make MobileDataID the primary key.

  • Now, come to the bottom of the page, there is an option called Column Properties.

  • In that, go to Identity Specification, make sure that you select the option ‘Yes’.
  • Then save the file (CTRL + S), and on saving, you can see a message box for specifying the name.

  • After this is done, go to Visual Studio. On the right side of Visual Studio,there is an option called toolbox.

ASP.NET_GridView_Demo_SSMS_Creation.

  • Click on the toolbox option followed by the Data option. Then in the drop-down, there will be a GridView option.

  • Drag the GridView option and insert it on the Design page.

  • Then go to the source, and here you can see some code on the screen.

ASP.NET_GridView_Demo_TableEditing

<Columns>

                    <asp:TemplateField HeaderText="FirstName">

                        <ItemTemplate>

                            <asp:Label Text='<%# Eval("FirstName") %>' runat="server" />

                        </ItemTemplate>

                        <EditItemTemplate>

                            <asp:TextBox ID="txtFirstName" Text='<%# Eval("FirstName") %>' runat="server" />

                        </EditItemTemplate>

                        <FooterTemplate>

                            <asp:TextBox ID="txtFirstNameFooter" runat="server" />

                        </FooterTemplate>

                    </asp:TemplateField>

                     <asp:TemplateField HeaderText="LastName">

                        <ItemTemplate>

                            <asp:Label Text='<%# Eval("LastName") %>' runat="server" />

                        </ItemTemplate>

                        <EditItemTemplate>

                            <asp:TextBox ID="txtLastName" Text='<%# Eval("LastName") %>' runat="server" />

                        </EditItemTemplate>

                        <FooterTemplate>

                            <asp:TextBox ID="txtLastNameFooter" runat="server" />

                        </FooterTemplate>

                    </asp:TemplateField>

                     <asp:TemplateField HeaderText="ContactName">

                        <ItemTemplate>

                            <asp:Label Text='<%# Eval("ContactName") %>' runat="server" />

                        </ItemTemplate>

                        <EditItemTemplate>

                            <asp:TextBox ID="txtContact" Text='<%# Eval("ContactName") %>' runat="server" />

                        </EditItemTemplate>

                        <FooterTemplate>

                            <asp:TextBox ID="txtContactFooter" runat="server" />

                        </FooterTemplate>

                    </asp:TemplateField>

                </Columns>

  • Once the above code is written, you can go to the Design page and check the table created.

ASP.NET_GridView_Created_Table

That was all about ASP.NET GridView

Conclusion

With this, you have learned everything about ASP.NET GridView. Initially, you learned about the basics of ASP.NET and ASP.NET GridView. Then you saw some properties and events of GridView. Finally, you explored how to create a database table using GridView with a hands-on demo.

If you are planning to learn .NET, consider enrolling in Simplilearn’s .NET Programming course. This comprehensive program will help you master the fundamentals of .NET programming and how to create .NET projects. In the .NET programming certification course, you will be introduced to .NET space and coding with C#, including Visual Studio and Winforms, which will help you excel in your career.

If you have any doubts regarding ASP.NET GridView, leave a comment below.

Recommended Reads