Post
Ask Question

Insertion In GridView By Disconnected Mode Using ASP.Net

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 updated 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 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.

 

  1. CREATE TABLE [dbo].[EmployeeDetails](  
  2.        [EmployeeId] [int] NULL,  
  3.        [FirstName] [char](50) NULL,  
  4.        [LastName] [char](50) NULL,  
  5.        [Address] [nvarchar](max) NULL,  
  6.        [EmailId] [nvarchar](max) NULL  
  7. )  

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".

  1. <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <title></title>  
  6. </head>  
  7. <body>  
  8.     <form id="form1" runat="server">  
  9.     <div>  
  10.     <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">  
  11.         <Columns>  
  12.             <asp:TemplateField HeaderText="EmployeId">  
  13.                 <ItemTemplate>  
  14.                     <asp:Label ID="lblempid" runat="server" Text='<%#Eval("EmployeeId")%>'></asp:Label>  
  15.                 </ItemTemplate>  
  16.                 <FooterTemplate>  
  17.                     <asp:TextBox ID="txtempid" runat="server">  
  18.                     </asp:TextBox>  
  19.                 </FooterTemplate>  
  20.             </asp:TemplateField>  
  21.              <asp:TemplateField HeaderText="Firstname">  
  22.                 <ItemTemplate>  
  23.                     <asp:Label ID="lblname" runat="server" Text='<%#Eval("FirstName")%>'></asp:Label>  
  24.                 </ItemTemplate>  
  25.                 <FooterTemplate>  
  26.                     <asp:TextBox ID="txtname" runat="server">  
  27.                     </asp:TextBox>  
  28.                 </FooterTemplate>  
  29.             </asp:TemplateField>  
  30.        <asp:TemplateField HeaderText="LastName">  
  31.                 <ItemTemplate>  
  32.                     <asp:Label ID="lbllname" runat="server" Text='<%#Eval("LastName")%>'></asp:Label>  
  33.                 </ItemTemplate>  
  34.                 <FooterTemplate>  
  35.                     <asp:TextBox ID="txtlname" runat="server">  
  36.                     </asp:TextBox>  
  37.                 </FooterTemplate>  
  38.             </asp:TemplateField>  
  39.             <asp:TemplateField HeaderText="Address">  
  40.                 <ItemTemplate>  
  41.                     <asp:Label ID="lbladdress" runat="server" Text='<%#Eval("Address")%>'></asp:Label>  
  42.                 </ItemTemplate>  
  43.                 <FooterTemplate>  
  44.                     <asp:TextBox ID="txtaddress" runat="server">  
  45.                     </asp:TextBox>  
  46.                 </FooterTemplate>  
  47.             </asp:TemplateField>  
  48.             <asp:TemplateField HeaderText="EmailId">  
  49.                 <ItemTemplate>  
  50.                     <asp:Label ID="lblemailid" runat="server" Text='<%#Eval("EmailId")%>'></asp:Label>  
  51.                 </ItemTemplate>  
  52.                 <FooterTemplate>  
  53.                     <asp:TextBox ID="txtEmailid" runat="server">  
  54.                     </asp:TextBox>  
  55.                 </FooterTemplate>  
  56.             </asp:TemplateField>  
  57.             <asp:TemplateField HeaderText="Operation">  
  58.                 <FooterTemplate>  
  59.                     <asp:Button ID="btnsave" runat="server" Text="Insert" OnClick="gridInsert_SelectedIndexChanged" />  
  60.                 </FooterTemplate>  
  61.             </asp:TemplateField>  
  62.              </Columns>  
  63.         <FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />  
  64.         <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />  
  65.         <PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />  
  66.         <RowStyle BackColor="White" ForeColor="#330099" />  
  67.         <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />  
  68.     </asp:GridView>  
  69.     </div>  
  70.     </form>  
  71. </body>  
  72. </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:

  1. <%# 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.

 

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.Data;  
  8. using System.Data.SqlClient;  
  9. public partial class _Default : System.Web.UI.Page  
  10. {  
  11.     SqlConnection con;  
  12.     SqlCommand cmd;  
  13.     SqlDataAdapter adap;  
  14.     DataTable dt;  
  15.     SqlCommandBuilder cmbuild;  
  16.     public _Default()  
  17.     {  
  18.         con = new SqlConnection(@"Data Source=.;Initial Catalog=Records;User ID=sa;Password=mcn@123");  
  19.     }  
  20.     protected void Page_Load(object sender, EventArgs e)  
  21.     {  
  22.         if (!IsPostBack)  
  23.         {  
  24.             FillGrid();  
  25.         }  
  26.     }  
  27.     public void FillGrid()  
  28.     {  
  29.         adap = new SqlDataAdapter("select * from EmployeeDetails", con);  
  30.         dt = new DataTable();  
  31.         adap.Fill(dt);  
  32.         cmbuild = new SqlCommandBuilder(adap);  
  33.         gridInsert.DataSource = dt;  
  34.         gridInsert.DataBind();  
  35.    }  
  36. }  

 

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.

  1. protected void gridInsert_SelectedIndexChanged(object sender, EventArgs e)  
  2. {  
  3.     TextBox TextEmpId = gridInsert.FooterRow.FindControl("txtempid") as TextBox;  
  4.     TextBox TextEmpName = gridInsert.FooterRow.FindControl("txtName") as TextBox;  
  5.     TextBox TextLname = gridInsert.FooterRow.FindControl("txtlname") as TextBox;  
  6.     TextBox TextAddress = gridInsert.FooterRow.FindControl("txtaddress") as TextBox;  
  7.     TextBox TextEmailId = gridInsert.FooterRow.FindControl("txtEmailid") as TextBox;  
  8.     con.Open();  
  9.     cmd = new SqlCommand("insert into EmployeeDetails values('" + TextEmpId.Text + "','" + TextEmpName.Text + "','" + TextLname + "','" + TextAddress + "','" + TextEmailId + "')", con);  
  10.     cmd.ExecuteNonQuery();  
  11.     con.Close();  
  12. }   

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.


Similar Articles