Introduction
This article explains the GridView control and the operations performed in a GridView such as insertion in disconnected mode.
GridView
GridView is a server control in ASP.Net.The GridView control allows you to display the values of a data source in a tabular format. A GridView control has the ability to be built with sort capability. Other built-in capabilities are update and delete, paging and row selection. Programming access to the GridView object model allows properties and event handlers to be set dynamically.
Features
The Features of a GridView are:
- Built-in support for sorting and paging.
- Data source binding for direct interaction with a DataSource.
- A GridView allows you to display the data in a tabular form.
- Adding your own code to the functionality of the GridView control by handling events.
GridView Events
You can customize the functionality of the GridView control by handlings the events. The GridView control provides events that occur both before and after a navigation or manipulating an operation such as insertion, deletion and updates.
Insertion on GridView
In this section I will make a web application. You just need to use the following procedure to do the insertion in the GridView server control.
Step 1:
Create the table in database SQL Server and define the fields names.
CREATE TABLE [dbo].[EmployeeDetails](
[EmployeeId] [int] NULL,
[FirstName] [char](50) NULL,
[LastName] [char](50) NULL,
[Address] [nvarchar](max) NULL,
[EmailId] [nvarchar](max) NULL
)
Step 2:
Open Visual Studio and go to "File" --> "New" --> "Website".
![new-web-site.jpg]()
![choose-new-webform.jpg]()
After selecting the Website you need to design a GridView in the webform named "default.aspx".
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gridInsert" runat="server" AutoGenerateColumns="False" ShowFooter="True" BackColor="White" BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px" CellPadding="4" EnableModelValidation="True" OnSelectedIndexChanged="gridInsert_SelectedIndexChanged">
<Columns>
<asp:TemplateField HeaderText="EmployeId">
<ItemTemplate>
<asp:Label ID="lblempid" runat="server" Text='<%#Eval("EmployeeId")%>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtempid" runat="server">
</asp:TextBox>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Firstname">
<ItemTemplate>
<asp:Label ID="lblname" runat="server" Text='<%#Eval("FirstName")%>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtname" runat="server">
</asp:TextBox>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="LastName">
<ItemTemplate>
<asp:Label ID="lbllname" runat="server" Text='<%#Eval("LastName")%>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtlname" runat="server">
</asp:TextBox>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Address">
<ItemTemplate>
<asp:Label ID="lbladdress" runat="server" Text='<%#Eval("Address")%>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtaddress" runat="server">
</asp:TextBox>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="EmailId">
<ItemTemplate>
<asp:Label ID="lblemailid" runat="server" Text='<%#Eval("EmailId")%>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtEmailid" runat="server">
</asp:TextBox>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Operation">
<FooterTemplate>
<asp:Button ID="btnsave" runat="server" Text="Insert" OnClick="gridInsert_SelectedIndexChanged" />
</FooterTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />
<PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />
<RowStyle BackColor="White" ForeColor="#330099" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />
</asp:GridView>
</div>
</form>
</body>
</html>
In this default.aspx page we have TemplateField consisting of two templates: an ItemTemplate that has a Label whose Text property is set to the value of the FirstName data field, and aThe data-binding syntax:
<%# Eval("fieldName") %>
that indicates that the fieldName data field is bound to the specified Web control property.
Design View of the .aspx page
![design-view-gridview.jpg]()
Step 4:
In this step you need to click on the Submit button that appears in default.aspx and write the following code for the click event of the submit button.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
{
SqlConnection con;
SqlCommand cmd;
SqlDataAdapter adap;
DataTable dt;
SqlCommandBuilder cmbuild;
public _Default()
{
con = new SqlConnection(@"Data Source=.;Initial Catalog=Records;User ID=sa;Password=mcn@123");
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
FillGrid();
}
}
public void FillGrid()
{
adap = new SqlDataAdapter("select * from EmployeeDetails", con);
dt = new DataTable();
adap.Fill(dt);
cmbuild = new SqlCommandBuilder(adap);
gridInsert.DataSource = dt;
gridInsert.DataBind();
}
}
Step 5:
Just go to the design page and double-click on to the GridView control. Then an event is generated, it is protected void gridInsert_SelectedIndexChanged(object sender, EventArgs e) gridInsert is the id of the GridView.
protected void gridInsert_SelectedIndexChanged(object sender, EventArgs e)
{
TextBox TextEmpId = gridInsert.FooterRow.FindControl("txtempid") as TextBox;
TextBox TextEmpName = gridInsert.FooterRow.FindControl("txtName") as TextBox;
TextBox TextLname = gridInsert.FooterRow.FindControl("txtlname") as TextBox;
TextBox TextAddress = gridInsert.FooterRow.FindControl("txtaddress") as TextBox;
TextBox TextEmailId = gridInsert.FooterRow.FindControl("txtEmailid") as TextBox;
con.Open();
cmd = new SqlCommand("insert into EmployeeDetails values('" + TextEmpId.Text + "','" + TextEmpName.Text + "','" + TextLname + "','" + TextAddress + "','" + TextEmailId + "')", con);
cmd.ExecuteNonQuery();
con.Close();
}
Step 6:
Debug the program by pressing F5 to execute the web application in the browser. The output will be as in the figures given below.
![output-in-browser.jpg]()
![output-in-database.jpg]()
Summary
In this article I have explained the GridView control and done the insertion operation in the GridView to the database by the disconnected mode. I hope you understand.