In this article I will explain with an example, how to display the GridView Selected Row Details in ASP.Net AJAX ModalPopupExtender Modal Popup using C# and VB.Net.
Inside the GridView OnSelectedIndexChanged event handler, the GridView Selected Row details will be fetched and displayed in the ASP.Net AJAX ModalPopupExtender Modal Popup.
HTML Markup
The HTML Markup consists of an ASP.Net GridView and ASP.Net AJAX ModalPopupExtender Modal Popup.
The GridView has been specified with OnSelectedIndexChanged event handler.
<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
runat="server" AutoGenerateColumns="false" OnSelectedIndexChanged="OnSelectedIndexChanged">
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id" ItemStyle-Width="30" />
<asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="lblCountry" Text='<%# Eval("Country") %>' runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:ButtonField Text="Select" CommandName="Select" />
</Columns>
</asp:GridView>
<asp:LinkButton Text="" ID = "lnkFake" runat="server" />
<cc1:ModalPopupExtender ID="mpe" runat="server" PopupControlID="pnlPopup" TargetControlID="lnkFake"
CancelControlID="btnClose" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" Style="display: none">
<div class="header">
Details
</div>
<div class="body">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style = "width:60px">
<b>Id: </b>
</td>
<td>
<asp:Label ID="lblId" runat="server" />
</td>
</tr>
<tr>
<td>
<b>Name: </b>
</td>
<td>
<asp:Label ID="lblName" runat="server" />
</td>
</tr>
<tr>
<td>
<b>Country: </b>
</td>
<td>
<asp:Label ID="lblCountry" runat="server" />
</td>
</tr>
</table>
</div>
<div class="footer" align="right">
<asp:Button ID="btnClose" runat="server" Text="Close" CssClass="button" />
</div>
</asp:Panel>
Namespaces
You will need to import the following namespace.
C#
VB.Net
Binding the GridView control
Inside the Page Load event handler, the GridView is populated with a dynamic DataTable with some dummy data.
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("Country",typeof(string)) });
dt.Rows.Add(1, "John Hammond", "United States");
dt.Rows.Add(2, "Mudassar Khan", "India");
dt.Rows.Add(3, "Suzanne Mathews", "France");
dt.Rows.Add(4, "Robert Schidner", "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("Country", GetType(String))})
dt.Rows.Add(1, "John Hammond", "United States")
dt.Rows.Add(2, "Mudassar Khan", "India")
dt.Rows.Add(3, "Suzanne Mathews", "France")
dt.Rows.Add(4, "Robert Schidner", "Russia")
GridView1.DataSource = dt
GridView1.DataBind()
End If
End Sub
Displaying GridView Selected Row Details in AJAX ModalPopupExtender in ASP.Net using the SelectedIndexChanged event
Inside the OnSelectedIndexChanged event handler of the GridView control, the values of BoundField and TemplateField columns are extracted and displayed in Label controls placed inside the ModalPopupExtender’s associated Panel control and then the ModalPopupExtender is shown.
C#
protected void OnSelectedIndexChanged(object sender, EventArgs e)
{
lblId.Text = GridView1.SelectedRow.Cells[0].Text;
lblName.Text = GridView1.SelectedRow.Cells[1].Text;
lblCountry.Text = (GridView1.SelectedRow.FindControl("lblCountry") as Label).Text;
mpe.Show();
}
VB.Net
Protected Sub OnSelectedIndexChanged(sender As Object, e As EventArgs)
lblId.Text = GridView1.SelectedRow.Cells(0).Text
lblName.Text = GridView1.SelectedRow.Cells(1).Text
lblCountry.Text = TryCast(GridView1.SelectedRow.FindControl("lblCountry"), Label).Text
mpe.Show()
End Sub
Modal Popup CSS styles
The following CSS styles used for styling the ASP.Net AJAX ModalPopupExtender.
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
.modalBackground
{
background-color: Black;
filter: alpha(opacity=40);
opacity: 0.4;
}
.modalPopup
{
background-color: #FFFFFF;
width: 300px;
border: 3px solid #0DA9D0;
}
.modalPopup .header
{
background-color: #2FBDF1;
height: 30px;
color: White;
line-height: 30px;
text-align: center;
font-weight: bold;
}
.modalPopup .body
{
min-height: 50px;
line-height: 30px;
text-align: center;
padding:5px
}
.modalPopup .footer
{
padding: 3px;
}
.modalPopup .button
{
height: 23px;
color: White;
line-height: 23px;
text-align: center;
font-weight: bold;
cursor: pointer;
background-color: #9F9F9F;
border: 1px solid #5C5C5C;
}
.modalPopup td
{
text-align:left;
}
</style>
Screenshot
![Display GridView Selected Row Details in AJAX ModalPopupExtender in ASP.Net]()
Demo
Downloads
