We can use template fields to
display data in gridview. In this article I will explain how to get data from
database and display in gridview using Template
Fields in gridview.
1.
Add webpage to your application. Now drag and drop
gridview control to your webpage.
2.
Right click on gridview and select Edit columns option.
3.
Now add Template fields from options. And set Header Text.
4.
Now right on the gridview to edit these templates. Click
”Edit Template” and place label control in
ItemTemplate and Place Textbox in EditTemplate Field. Now bind these
controls with Data Column Name.
5.
In code file, bind gridview with data from database
using data table.
Implementation:
Follow
following steps
1.
Create a database i.e. “Blog”. Then create a table “Student_Info”.
Column Name
|
Datatype
|
Student_id
|
Int(Primary Key. So set Is
Identity=True)
|
Student_Name
|
Varchar(500)
|
Age
|
int
|
Class
|
Varchar(50)
|
2. Now insert some data in this table using “insert”
command.
INSERT INTO student_info(Student_Name,Age,Class) VALUES('Akhsay',12, 'first')
INSERT INTO student_info(Student_Name,Age,Class) VALUES('Raghav',25, 'M.Sc')
INSERT INTO student_info(Student_Name,Age,Class) VALUES('aksht', 23, 'Bsc')
INSERT INTO student_info(Student_Name,Age,Class) VALUES('ankit', 23, 'MBA')
INSERT INTO student_info(Student_Name,Age,Class) VALUES('anil', 23, 'MCA')
|
3. Create Connection: Now create
connection in webcofig file as given
below.
<connectionStrings>
<add name="con" connectionString="Data
Source=localhost; Initial Catalog= Blog; Integrated Security=true;" providerName="System.Data.SqlClient"/>
</connectionStrings>
|
4. ASP.Net Page design:
Add gridview control on the webpage
<asp:GridView ID="GridView1"
runat="server"
AutoGenerateColumns="False"
BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px"
CellPadding="3" Width="270px" onrowcommand="GridView1_RowCommand"
onrowdeleting="GridView1_RowDeleting">
<Columns>
<asp:TemplateField HeaderText="Student Name">
<ItemTemplate>
<asp:Label ID="Label1"
runat="server"
Text='<%# Bind("Student_name") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="TextBox1"
runat="server"
Text='<%# Bind("Student_name") %>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Age">
<ItemTemplate>
<asp:Label ID="Label2"
runat="server"
Text='<%# Bind("Age") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="TextBox2"
runat="server"
Text='<%# Bind("Age") %>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Class">
<ItemTemplate>
<asp:Label ID="Label3"
runat="server"
Text='<%# Bind("Class") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="TextBox3"
runat="server"
Text='<%# Bind("Class") %>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Delete" ShowHeader="False">
<ItemTemplate>
<asp:LinkButton ID="lnkDelete"
runat="server"
CausesValidation="False"
CommandName="Delete"
OnClientClick="javascript:
return confirm('Do you want to delete this record?')" CommandArgument='<%#bind("Student_id") %>' Text="Delete"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="White" ForeColor="#000066" />
<HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
<RowStyle ForeColor="#000066" />
<SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#007DBB"
/>
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#00547E"
/>
</asp:GridView>
|
5. ASP.NET code behind
File using C#:
In code behind, add following code:
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
|
Now Fetch data and bIND TO GRIDVIEW
public partial
class gridview
: System.Web.UI.Page
{
protected
void Page_Load(object
sender, EventArgs e)
{
if
(!IsPostBack)
{
Bind_grid();
}
}
//Fetch data
from database and bind to gridview
public void Bind_grid()
{
SqlConnection
con = new SqlConnection(ConfigurationManager.ConnectionStrings["con"].ConnectionString);
if
(con.State == ConnectionState.Open)
{
con.Close();
}
con.Open();
DataTable
dt = new DataTable();
SqlDataAdapter
dataadapater = new SqlDataAdapter("Select * from student_info", con);
dataadapater.Fill(dt);
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
|
VB.NET code behind file:
In code behind, add following code:
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
|
Now Fetch data and bIND TO
GRIDVIEW
Partial Public
Class gridview
Inherits
System.Web.UI.Page
Protected
Sub Page_Load(sender As
Object, e As EventArgs)
If Not IsPostBack Then
Bind_grid()
End If
End Sub
'Fetch data
from database and bind to gridview
Public Sub Bind_grid()
Dim
con As New
SqlConnection(ConfigurationManager.ConnectionStrings("con").ConnectionString)
If
con.State = ConnectionState.Open Then
con.Close()
End If
con.Open()
Dim
dt As New
DataTable()
Dim
dataadapater As New
SqlDataAdapter("Select * from
student_info", con)
dataadapater.Fill(dt)
GridView1.DataSource = dt
GridView1.DataBind()
End Sub
End Class
|
Demo:
Use this code, create your own
application and check result. You can use this code in any application by
customizing it. If you have any doubt, you can ask by commenting in comment
section.
