In this article I will explain with an example, how to build GridView FormView Master Detail example in ASP.Net using C# and VB.Net.
HTML Markup
The HTML Markup consists of an ASP.Net GridView with two BoundField columns, one hidden TemplateField column with a Label and one ButtonField column which consists of a Select Button to select the GridView Row.
Below the GridView, there’s a FormView control consisting of an HTML table for displaying the selected GridView row details.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnSelectedIndexChanged="OnSelectedIndexChanged">
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id" />
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:TemplateField HeaderText="Country" Visible="false">
<ItemTemplate>
<asp:Label ID="lblDescription" runat="server" Text='<%# Eval("Description") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:ButtonField Text="Select" CommandName="Select"/>
</Columns>
</asp:GridView>
<br />
<u>Selected Row:</u>
<br />
<br />
<asp:FormView ID="FormView1" runat="server">
<ItemTemplate>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
ID:
</td>
<td>
<%# Eval("Id") %>
</td>
</tr>
<tr>
<td>
Name:
</td>
<td>
<%# Eval("Name") %>
</td>
</tr>
<tr>
<td>
Description:
</td>
<td>
<%# Eval("Description") %>
</td>
</tr>
</table>
</ItemTemplate>
</asp:FormView>
Namespaces
You will need to import the following namespaces.
C#
VB.Net
Binding the GridView
The GridView is populated using some dummy records using DataTable.
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
new DataColumn("Name", typeof(string)),
new DataColumn("Description",typeof(string)) });
dt.Rows.Add(1, "John Hammond", "Works as a scientist in USA.");
dt.Rows.Add(2, "Mudassar Khan", "ASP.Net programmer and consultant in India.");
dt.Rows.Add(3, "Suzanne Mathews", "Content Writer in France.");
dt.Rows.Add(4, "Robert Schidner", "Wild life photographer in Russia.");
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim dt As New DataTable()
dt.Columns.AddRange(New DataColumn(2) {New DataColumn("Id", GetType(Integer)), _
New DataColumn("Name", GetType(String)), _
New DataColumn("Description", GetType(String))})
dt.Rows.Add(1, "John Hammond", "Works as a scientist in USA.")
dt.Rows.Add(2, "Mudassar Khan", "ASP.Net programmer and consultant in India.")
dt.Rows.Add(3, "Suzanne Mathews", "Content Writer in France.")
dt.Rows.Add(4, "Robert Schidner", "Wild life photographer in Russia.")
GridView1.DataSource = dt
GridView1.DataBind()
End If
End Sub
Displaying GridView Selected Row in FormView control
When the Select Button is clicked, the OnSelectedIndexChanged event handler of the ASP.Net GridView is triggered. The ID and Name values are extracted directly from the BoundField column, while the Description value is extracted via finding the Label control inside the TemplateField column.
The fetched values are inserted into a dynamic DataTable which is finally used to populate the FormView control.
C#
protected void OnSelectedIndexChanged(object sender, EventArgs e)
{
string id = GridView1.SelectedRow.Cells[0].Text;
string name = GridView1.SelectedRow.Cells[1].Text;
string description = (GridView1.SelectedRow.FindControl("lblDescription") as Label).Text;
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
new DataColumn("Name", typeof(string)),
new DataColumn("Description",typeof(string)) });
dt.Rows.Add(id, name, description);
FormView1.DataSource = dt;
FormView1.DataBind();
}
VB.Net
Protected Sub OnSelectedIndexChanged(sender As Object, e As EventArgs)
Dim id As String = GridView1.SelectedRow.Cells(0).Text
Dim name As String = GridView1.SelectedRow.Cells(1).Text
Dim description As String = TryCast(GridView1.SelectedRow.FindControl("lblDescription"), Label).Text
Dim dt As New DataTable()
dt.Columns.AddRange(New DataColumn(2) {New DataColumn("Id", GetType(Integer)), _
New DataColumn("Name", GetType(String)), _
New DataColumn("Description", GetType(String))})
dt.Rows.Add(id, name, description)
FormView1.DataSource = dt
FormView1.DataBind()
End Sub
Screenshot
Demo
Downloads