In this article I will explain with an example, how to display AJAX ModalPopupExtender Modal Popup inside RowCommand event of GridView in ASP.Net using C# and VB.Net.
Inside the GridView OnRowCommand 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 OnRowCommand event handler.
<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
runat="server" AutoGenerateColumns="false" OnRowCommand="OnRowCommand">
<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 AJAX ModalPopupExtender inside RowCommand event of GridView in ASP.Net
Inside the OnRowCommand event handler of the GridView control, first the GridView Row is referenced using the RowIndex determined from the CommandArgument property.
Then 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 OnRowCommand(object sender, GridViewCommandEventArgs e)
{
//Reference the GridView Row using RowIndex from CommandArgument.
GridViewRow selectedRow = GridView1.Rows[Convert.ToInt32(e.CommandArgument)];
//Fetch values from BoundField columns.
lblId.Text = selectedRow.Cells[0].Text;
lblName.Text = selectedRow.Cells[1].Text;
//Fetch values from TemplateField columns.
lblCountry.Text = (selectedRow.FindControl("lblCountry") as Label).Text;
//Display the ModalPopup.
mpe.Show();
}
VB.Net
Protected Sub OnRowCommand(ByVal sender As Object, ByVal e As GridViewCommandEventArgs)
'Reference the GridView Row using RowIndex from CommandArgument.
Dim selectedRow As GridViewRow = GridView1.Rows(Convert.ToInt32(e.CommandArgument))
'Fetch values from BoundField columns.
lblId.Text = selectedRow.Cells(0).Text
lblName.Text = selectedRow.Cells(1).Text
'Fetch values from TemplateField columns.
lblCountry.Text = CType(selectedRow.FindControl("lblCountry"), Label).Text
'Display the ModalPopup.
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 AJAX ModalPopupExtender inside RowCommand event of GridView in ASP.Net]()
Demo
Downloads
