Displaying Student Details Form in GridView Row
Introduction
In this tutorial, we'll delve into a powerful web development technique: displaying a student details form within a GridView row upon clicking the edit button. This dynamic feature improves user experience and allows for seamless editing of student information.
Create Database Table : StudentMarks
To begin, we need a database table called StudentMarks. The table includes fields such as studentID, studentName, physics, chemistry, maths, computer, and result. The predefined data is inserted through SQL scripts for demonstration purposes.
create table StudentMarks(
studentID int,
studentName varchar(30),
physics int,
chemistry int,
maths int,
computer int,
result varchar(5))
insert into StudentMarks values(1,'Krishna', 35,35,35,35,'Pass')
insert into StudentMarks values(2,'Parmesh', 75,56,46,71,'Pass')
insert into StudentMarks values(3,'Sathya', 64,83,25,63,'Fail')
insert into StudentMarks values(4,'Naresh', 37,51,42,67,'Pass')
insert into StudentMarks values(4,'Naresh', 43,31,62,17,'Fail')
HTML Markup Language
First, add or drag and drop Gridview Control from toolbox to webpage (i.e Default.aspx), especially this article i'll show you in 3 step how to design gridview control.
a.) Add Gridview Control Design
Open Default.aspx page and add Gridview Control and select Auto Format and choose any design as you like or copy and paste the gridview control design from below code snippet.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
CellPadding="4" ForeColor="#333333" GridLines="None">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<!-- b.) Design Gridview Control Header Section -->
<!-- Add Gridview Header Section Code Here -->
<EditRowStyle BackColor="#999999" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#E9E7E2" />
<SortedAscendingHeaderStyle BackColor="#506C8C" />
<SortedDescendingCellStyle BackColor="#FFFDF8" />
<SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>
b.) Design Gridview Control Header Section
This Gridview Header Section is used to display under <asp:TemplateField> </asp:TemplateField> . TemplateField must add under <Columns> <!-- Add Template Field Code Here --> </Columns>
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<table style="border-collapse:collapse;">
<tr>
<th style="padding:5px; width:100px;">Student ID</th>
<th style="padding:5px; width:100px;">Student Name</th>
<th style="padding:5px; width:100px;">Physics</th>
<th style="padding:5px; width:100px;">Chemistry</th>
<th style="padding:5px; width:100px;">Mathematics</th>
<th style="padding:5px; width:100px;">Computer</th>
<th style="padding:5px; width:100px;">Result</th>
</tr>
</table>
</HeaderTemplate>
<ItemTemplate>
<!--c.) Gridview Body Section Design Here -->
</ItemTemplate>
</asp:TemplateField>
</Columns>
c.) Gridview Body Section Design Here
Design the GridView Body Section to present student details, including an "Edit" link that triggers the form display
<table>
<tr>
<td style="padding:5px; width:100px;">
<asp:Label ID="lblStudentID1" runat="server" Text='<%# Evalundefined"studentID") %>'></asp:Label>
</td>
<td style="padding:5px; width:100px;">
<asp:Label ID="lblStudentName" runat="server" Text='<%# Evalundefined"studentName") %>'></asp:Label>
</td>
<td style="padding:5px; width:100px;">
<asp:Label ID="lblPhysics" runat="server" Text='<%# Evalundefined"physics") %>'></asp:Label>
</td>
<td style="padding:5px; width:100px;">
<asp:Label ID="lblChemistry" runat="server" Text='<%# Evalundefined"chemistry") %>'></asp:Label>
</td>
<td style="padding:5px; width:100px;">
<asp:Label ID="lblMaths" runat="server" Text='<%# Evalundefined"maths") %>'></asp:Label>
</td>
<td style="padding:5px; width:100px;">
<asp:Label ID="lblComputer" runat="server" Text='<%# Evalundefined"computer") %>'></asp:Label>
</td>
<td style="padding:5px; width:100px;">
<asp:Label ID="lblResult" runat="server" Text='<%# Evalundefined"result") %>'></asp:Label>
</td>
<td>
<a href='javascript:voidundefined0);' onclick="openFormundefined<%# Evalundefined"studentID") %>); return false;">Edit</a>
</td>
</tr>
<tr>
<td colspan="7">
<!--d.) Student Details Form Code Here -->
</td>
</tr>
</table>
d.) Student Details Form Code Here
Create the Student Details Form within the GridView.
<div id='div<%# Eval("studentID") %>' style="display:none;">
<table class="tableForm">
<tr>
<th colspan="5" class="tableForm_th">
<span style="float:left;">Student Details :</span><a style="color:#fff;" href="javascript:voidundefined0);" onclick="CloseFormundefined<%# Evalundefined"studentID") %>); return false;"><span class="scls">X</span></a>
</th>
</tr>
<tr>
<td class="tableForm_td"> StudentID </td>
<td class="tableForm_td">
<asp:Label ID="lblStudentID" runat="server" Text='<%# Evalundefined"studentID") %>'></asp:Label>
</td>
<td class="tableForm_td"> StudentName </td>
<td class="tableForm_td">
<asp:TextBox ID="txtStudentName" runat="server" Text='<%# Evalundefined"studentName") %>'></asp:TextBox>
</td>
</tr>
<tr>
<td class="tableForm_td"> Physics </td>
<td class="tableForm_td">
<asp:TextBox ID="txtPhy" runat="server" Text='<%# Evalundefined"physics") %>'></asp:TextBox>
</td>
<td class="tableForm_td"> Chemistry </td>
<td class="tableForm_td">
<asp:TextBox ID="txtChe" runat="server" Text='<%# Evalundefined"chemistry") %>'></asp:TextBox>
</td>
</tr>
<tr>
<td class="tableForm_td"> Mathematics </td>
<td class="tableForm_td">
<asp:TextBox ID="txtMaths" runat="server" Text='<%# Evalundefined"maths") %>'></asp:TextBox>
</td>
<td class="tableForm_td"> Computer </td>
<td class="tableForm_td">
<asp:TextBox ID="txtComp" runat="server" Text='<%# Evalundefined"computer") %>'></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="4">
<asp:Button ID="btnUpdate" Text="Update" runat="server" OnClick="btnUpdate_Click" /> <asp:Button ID="btnCancel" Text="Cancel" runat="server" />
</td>
</tr>
</table>
</div>
JQuery Code
Include the necessary jQuery code to handle the display and close functionality of the student details form.
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title></title>
<script type="text/javascript">
function openForm(n) {
$("#div" + n).show();
return false;
}
function CloseForm(n) {
$("#div" + n).hide();
return false;
}
</script>
CSS Code
Apply CSS styles for a visually appealing and organized layout.
<style type="text/css">
.tableForm {
border-collapse:collapse; width:100%;
}
.tableForm_th, .tableForm_td {
border:1px solid #999; padding:5px;
}
.tableForm_th {
background-color:#8e44ad; color:#fff;
}
.scls, .scls:hover {
float:right; padding:3px;
}
.scls:hover {
color:#000000;
}
</style>
C# Coding
In the code-behind (C#), manage the page load, bind the GridView, and handle the GridView row data binding. Additionally, implement the update functionality for the student details form.
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 = new SqlConnection("Data Source=.; Database=master; User ID=sa; Password=****;");
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGridview();
}
}
private void BindGridview()
{
SqlDataAdapter da = new SqlDataAdapter("Select * from StudentMarks", con);
DataSet ds = new DataSet();
da.Fill(ds);
GridView1.DataSource = ds;
GridView1.DataBind();
}
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
Label lblSID = (Label)e.Row.FindControl("lblStudentID");
Label lblSName = (Label)e.Row.FindControl("lblStudentName");
Label lblPhyscs = (Label)e.Row.FindControl("lblPhysics");
Label lblChemistry = (Label)e.Row.FindControl("lblChemistry");
Label lblMaths = (Label)e.Row.FindControl("lblMaths");
Label lblComputer = (Label)e.Row.FindControl("lblComputer");
Label lblResult = (Label)e.Row.FindControl("lblResult");
if (lblResult.Text == "Fail")
{
lblSID.Style.Add("color", "#f00");
lblSName.Style.Add("color", "#f00");
lblPhyscs.Style.Add("color", "#f00");
lblChemistry.Style.Add("color", "#f00");
lblMaths.Style.Add("color", "#f00");
lblComputer.Style.Add("color", "#f00");
lblResult.Style.Add("color", "#f00");
}
}
}
protected void btnUpdate_Click(object sender, EventArgs e)
{
GridViewRow row = (sender as Button).NamingContainer as GridViewRow;
Label lblSID = (Label)row.FindControl("lblStudentID1");
TextBox txtStudentName = (TextBox)row.FindControl("txtStudentName");
TextBox txtPhy = (TextBox)row.FindControl("txtPhy");
TextBox txtChe = (TextBox)row.FindControl("txtChe");
TextBox txtMaths = (TextBox)row.FindControl("txtMaths");
TextBox txtComp = (TextBox)row.FindControl("txtComp");
SqlCommand cmd = new SqlCommand("Update StudentMarks set studentName='" + txtStudentName.Text + "', physics='" + txtPhy.Text + "', chemistry='" + txtChe.Text + "', maths='" + txtMaths.Text + "', computer='" + txtComp.Text + "' where studentID='" + lblSID.Text + "'", con);
con.Open();
int i = cmd.ExecuteNonQuery();
if (i > 0)
{
BindGridview();
}
con.Close();
}
}
Watch Demo Video How its Work
Conclusion:
By implementing this feature, you empower users to seamlessly edit student details within a GridView, enhancing the overall interactivity of your web application. This tutorial serves as a valuable resource for developers aiming to improve user experience in data management applications.
0 Comments