Introduction:
Adding data to a GridView in ASP.NET is a common task, but what if you need to add multiple records at once? This tutorial will guide you through the process of incorporating TextBox controls to input data and dynamically adding it to a GridView. The provided code, along with explanations, will help you understand and implement this functionality in your ASP.NET web application.
HTML Markup: Design Page:
In the initial section of the code, we see the HTML markup for designing the page. The author suggests using a GridView control to hold employee records and explains how to achieve this programmatically. The design includes TextBox controls for Employee ID, Name, Salary, and an "Add" button to initiate the process. The HTML markup provides a clear structure, making it easy for developers to understand and customize according to their needs.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="InsertGridviewRecordtoDataBase.aspx.cs" Inherits="InsertGridviewRecordtoDataBase" %>
<!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 align="center" style="margin-top:50px;">
<table align="center" style="border-collapse:collapse; width:500px;">
<tr>
<th align="left" colspan="4" style="color:#86ef12; border:1px solid #86ef12; padding:5px 10px;">Add Employees Details</th>
</tr>
<tr>
<td style="border:1px solid #86ef12;padding:5px 10px;"> Employ ID :</td>
<td style="border:1px solid #86ef12;"><asp:TextBox ID="txtempid" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td style="border:1px solid #86ef12;padding:5px 10px;"> Employ Name :</td>
<td style="border:1px solid #86ef12;"><asp:TextBox ID="txtempname" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td style="border:1px solid #86ef12;padding:5px 10px;"> Employ Salary :</td>
<td style="border:1px solid #86ef12;"><asp:TextBox ID="txtempsalary" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td colspan="4" style="padding:5px 10px; text-align:center;border:1px solid #86ef12;">
<asp:Button ID="btn_add" runat="server" Text=" ADD " onclick="btn_add_Click" />
</td>
</tr>
</table>
<br />
<asp:GridView ID="GridView1" runat="server" BackColor="White"
BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" CellPadding="4"
ForeColor="Black" GridLines="Vertical">
<AlternatingRowStyle BackColor="White" />
<FooterStyle BackColor="#CCCC99" />
<HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
<RowStyle BackColor="#F7F7DE" />
<SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#FBFBF2" />
<SortedAscendingHeaderStyle BackColor="#848384" />
<SortedDescendingCellStyle BackColor="#EAEAD3" />
<SortedDescendingHeaderStyle BackColor="#575357" />
</asp:GridView>
</div>
</form>
</body>
</html>
C# Coding: Adding Textbox Data into GridView:
The heart of this tutorial lies in the C# code, where the functionality of adding TextBox data into the GridView is implemented. The code utilizes ASP.NET's Page_Load event for initialization and btn_add_Click event for handling the button click.
The C# code begins by creating a DataTable to store the employee records. It defines columns for Employee ID, Name, and Salary. The btn_add_Click event is triggered when the "Add" button is clicked. It checks if ViewState["emp"] is not null, indicating that data exists in the DataTable. If data is present, a new DataRow is created, populated with TextBox values, and added to the DataTable. The GridView is then updated with the latest data.
If no data is present in ViewState["emp"], a new DataRow is created, and the process continues as before. The ViewState is then updated to store the DataTable for future use.
This C# code ensures that multiple records can be added dynamically to the GridView without overwriting existing data. The logic is well-structured and easy to follow, making it a valuable resource for developers looking to enhance their ASP.NET applications.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
public partial class InsertGridviewRecordtoDataBase : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btn_add_Click(object sender, EventArgs e)
{
DataTable dt = new DataTable();
dt.Columns.Add("EmpID");
dt.Columns.Add("EmpName");
dt.Columns.Add("EmpSal");
DataRow dr = null;
if (ViewState["emp"] != null)
{
for (int i = 0; i < 1; i++)
{
dt = (DataTable)ViewState["emp"];
if (dt.Rows.Count > 0)
{
dr = dt.NewRow();
dr["EmpID"] = txtempid.Text;
dr["EmpName"] = txtempname.Text;
dr["EmpSal"] = txtempsalary.Text;
dt.Rows.Add(dr);
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
}
else
{
dr = dt.NewRow();
dr["EmpID"] = txtempid.Text;
dr["EmpName"] = txtempname.Text;
dr["EmpSal"] = txtempsalary.Text;
dt.Rows.Add(dr);
GridView1.DataSource = dt;
GridView1.DataBind();
}
ViewState["emp"] = dt;
}
}
Video Tutorial:
To complement the written tutorial, a video tutorial is provided. The video demonstrates the step-by-step process of adding multiple records to the GridView using TextBox controls. Visual learners can benefit from watching the tutorial to gain a better understanding of the implementation.
Conclusion:
In conclusion, this tutorial provides a comprehensive guide on adding multiple records to a GridView in ASP.NET. The combination of clear HTML markup and well-structured C# code ensures developers can easily implement this functionality in their web applications. Whether you prefer following written instructions or watching a video tutorial, this resource has you covered. Start enhancing your ASP.NET projects by incorporating this efficient and dynamic method of handling data input.
0 Comments