In this article I will explain with an example, how to display the
GridView Selected Row Details in
ASP.Net AJAX ModalPopupExtender Modal Popup in
ASP.Net 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:
GridView – For displaying data.
Columns
The
GridView consists of two
BoundField columns and
TemplateField column.
GridView has been specified with
OnSelectedIndexChanged event handler.
TemplateField - The TemplateField column consists of ItemTemplate.
ItemTemplate - It consists of a
Label.
Button - When we click on Select, we can see the customer details.
LinkButton – For triggering the Modal popup to open.
ModalPopupExtender – For displaying Modal popup.
The AJAX ModalPopupExtender has been assigned with following properties:
PopupControlID – The control which will be displayed as Modal popup.
TargetControlID – The control which opens the Modal popup.
CancelControlID – The control which closes the Modal popup.
Panel - For displaying content of the Modal popup.
The Panel Consists of
HTML Table.
Button - For close the Modal popup dialog box.
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></cc1:ToolkitScriptManager>
<asp:GridView ID="gvCustomers" HeaderStyle-BackColor="#3AC0F2"
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 namespaces.
C#
VB.Net
Binding the GridView control
Inside the
Page_Load event handler, an object of
DataTable is created.
Then, three columns are added to the
DataTable Columns collection using the
AddRange method.
Once the schema is ready i.e. all the columns are defined, some rows have been added using the Rows.Add method.
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"),
new DataColumn("Name"),
new DataColumn("Country") });
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");
gvCustomers.DataSource = dt;
gvCustomers.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"),
New DataColumn("Name"),
New DataColumn("Country")})
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")
gvCustomers.DataSource = dt
gvCustomers.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 = gvCustomers.SelectedRow.Cells[0].Text;
lblName.Text = gvCustomers.SelectedRow.Cells[1].Text;
lblCountry.Text = (gvCustomers.SelectedRow.FindControl("lblCountry")as Label).Text;
mpe.Show();
}
VB.Net
Protected Sub OnSelectedIndexChanged(sender As Object, e As EventArgs)
lblId.Text = gvCustomers.SelectedRow.Cells(0).Text
lblName.Text = gvCustomers.SelectedRow.Cells(1).Text
lblCountry.Text = TryCast(gvCustomers.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: black;
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
