Use Modal Popup Extender Using Gridview in ASP.Net

We use one link button from which we pop up the grid view control and then inside the grid view whatever you choose will be shown in the other pop-up.

Initial Chamber

Step 1

Open Visual Studio 2010 and create an empty website, provide it a suitable name such as gridview_demo.

Step 2

In Solution Explorer you will get your empty website. Add a web form and SQL Database as in the following.

For Web Form

gridview_demo (your empty website) then right-click and select Add New Item, Web Form. Name it gridview_demo.aspx.

For SQL Server Database

gridview_demo (your empty website) then right-click and select Add New Item, SQL Server Database. (Add the database inside the App_Data_folder).

Database Chamber

Step 3

Get to your database (Database.mdf). We will create a table tbl_Data. Now go to the database.mdf, then Table and Add New table, design your table as in the following:

Table: tbl_data, don't forget to set the ID as Identity Specification - Yes.

table design

Design Chamber

Step 4

Now open your gridview_demo.aspx file, where we create our design for modal pop-up extender.

Gridview_demo.aspx

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>  
  4.   
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  6.   
  7. <html xmlns="http://www.w3.org/1999/xhtml">  
  8. <head runat="server">  
  9.     <title></title>  
  10.     <style type="text/css">  
  11.         .style2  
  12.         {  
  13.             width: 116px;  
  14.         }  
  15.         .style3  
  16.         {  
  17.             width: 202px;  
  18.         }  
  19.          
  20.         #man  
  21.         {  
  22.            margin:200px,500px,0px,200px;  
  23.            padding:200px,550px,0px,200px;  
  24.              
  25.              
  26.               
  27.           }  
  28.           
  29.           
  30.         .style4  
  31.         {  
  32.             font-size: large;  
  33.             text-align: left;  
  34.         }  
  35.           
  36.           
  37.     </style>  
  38. </head>  
  39. <body>  
  40.     <form id="form1" runat="server">  
  41.       
  42.     <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">  
  43.     </asp:ToolkitScriptManager>  
  44.     <div>  
  45.   
  46.         <asp:ModalPopupExtender ID="ModalPopupExtender1" EnableViewState="true" CancelControlID="Button2" TargetControlID="LinkButton1" PopupControlID="Panel1" runat="server">  
  47.         </asp:ModalPopupExtender>  
  48.         <div class="man">   
  49.             <asp:LinkButton ID="LinkButton1" runat="server"   
  50.                 style="text-align: center" BackColor="#CCFFFF" ForeColor="#666633">Open your Grid View Here!!</asp:LinkButton>  
  51.         </div>      
  52.   
  53.         <asp:LinkButton ID="Linkbtn" runat="server"></asp:LinkButton>  
  54.         <asp:ModalPopupExtender ID="ModalPopupExtender2" TargetControlID="Linkbtn" CancelControlID="btnclose" PopupControlID="Panel2"  runat="server">  
  55.         </asp:ModalPopupExtender>  
  56.   
  57.   
  58.   
  59.         <asp:Panel ID="Panel1" runat="server">  
  60.             <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"   
  61.                 CellPadding="4" onselectedindexchanged="GridView1_SelectedIndexChanged"   
  62.                 ForeColor="#333333" GridLines="None">  
  63.                 <AlternatingRowStyle BackColor="White" />  
  64.                 <Columns>  
  65.                     <asp:TemplateField HeaderText="id">  
  66.                         <EditItemTemplate>  
  67.                             <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("id") %>'></asp:TextBox>  
  68.                         </EditItemTemplate>  
  69.                         <ItemTemplate>  
  70.                             <asp:Label ID="Label1" runat="server" Text='<%# Bind("id") %>'></asp:Label>  
  71.                         </ItemTemplate>  
  72.                     </asp:TemplateField>  
  73.                     <asp:TemplateField HeaderText="Name">  
  74.                         <EditItemTemplate>  
  75.                             <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("name") %>'></asp:TextBox>  
  76.                         </EditItemTemplate>  
  77.                         <ItemTemplate>  
  78.                             <asp:Label ID="Label2" runat="server" Text='<%# Bind("name") %>'></asp:Label>  
  79.                         </ItemTemplate>  
  80.                     </asp:TemplateField>  
  81.                     <asp:TemplateField HeaderText="City">  
  82.                         <EditItemTemplate>  
  83.                             <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("city") %>'></asp:TextBox>  
  84.                         </EditItemTemplate>  
  85.                         <ItemTemplate>  
  86.                             <asp:Label ID="Label3" runat="server" Text='<%# Bind("city") %>'></asp:Label>  
  87.                         </ItemTemplate>  
  88.                     </asp:TemplateField>  
  89.                     <asp:ButtonField CommandName="Select" Text="Select" />  
  90.                 </Columns>  
  91.                 <FooterStyle BackColor="#990000" ForeColor="White" Font-Bold="True" />  
  92.                 <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />  
  93.                 <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />  
  94.                 <RowStyle ForeColor="#333333" BackColor="#FFFBD6" />  
  95.                 <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />  
  96.                 <SortedAscendingCellStyle BackColor="#FDF5AC" />  
  97.                 <SortedAscendingHeaderStyle BackColor="#4D0000" />  
  98.                 <SortedDescendingCellStyle BackColor="#FCF6C0" />  
  99.                 <SortedDescendingHeaderStyle BackColor="#820000" />  
  100.             </asp:GridView>  
  101.             <br />  
  102.         </asp:Panel>  
  103.   
  104.         <asp:Panel ID="Panel2" runat="server">  
  105.             <table style="width: 100%;" bgcolor="#FFFFCC" border="1px">  
  106.                 <caption class="style4">  
  107.                     <strong>                   This is your Selected Data</strong></caption>  
  108.                 <tr>  
  109.                     <td class="style2">  
  110.                         <asp:Label ID="Label7" runat="server" Text="ID:"></asp:Label>  
  111.                     </td>  
  112.                     <td class="style3">  
  113.                            
  114.                         <asp:Label ID="Label4" runat="server" ForeColor="#009933" Text="Label"></asp:Label>  
  115.                     </td>  
  116.                 </tr>  
  117.                 <tr>  
  118.                     <td class="style2">  
  119.                         <asp:Label ID="Label8" runat="server" Text="Name:"></asp:Label>  
  120.                     </td>  
  121.                     <td class="style3">  
  122.                            
  123.                         <asp:Label ID="Label5" runat="server" Text="Label" ForeColor="#009933"></asp:Label>  
  124.                     </td>    
  125.                 </tr>  
  126.                 <tr>  
  127.                     <td class="style2">  
  128.                          <asp:Label ID="Label9" runat="server" Text="City:"></asp:Label>  
  129.                     </td>  
  130.                     <td class="style3">  
  131.                            
  132.                         <asp:Label ID="Label6" runat="server" ForeColor="#009933" Text="Label"></asp:Label>  
  133.                     </td>       
  134.                 </tr>  
  135.                 <tr>  
  136.                     <td class="style2">  
  137.                          </td>  
  138.                     <td class="style3">  
  139.                         <asp:Button ID="btnclose" runat="server" BackColor="#99CCFF" Text="Close"/>  
  140.                     </td>             
  141.                 </tr>  
  142.             </table>  
  143.         </asp:Panel>  
  144.     </div>  
  145.     </form>  
  146. </body>  
  147. </html>  
Your design will look like the following:

design

Code Chamber

Step 5

Open your gridview_demo.aspx.cs and write some code so that our application works.

Gridview_demo.cs
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.Data;  
  8. using System.Data.SqlClient;  
  9.   
  10. public partial class _Default : System.Web.UI.Page  
  11. {  
  12.     protected void Page_Load(object sender, EventArgs e)  
  13.     {  
  14.         if (!Page.IsPostBack)  
  15.         {  
  16.             SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");  
  17.             SqlCommand cmd = new SqlCommand("select * from tbl_data", con);  
  18.             SqlDataAdapter sda = new SqlDataAdapter(cmd);  
  19.             DataTable dt = new DataTable();  
  20.             sda.Fill(dt);  
  21.             GridView1.DataSource = dt;  
  22.             GridView1.DataBind();  
  23.         }  
  24.         
  25.     }  
  26.   
  27.     protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)  
  28.     {  
  29.         Label4.Text = (GridView1.SelectedRow.FindControl("Label1"as Label).Text;  
  30.         Label5.Text = (GridView1.SelectedRow.FindControl("Label2"as Label).Text;  
  31.         Label6.Text = (GridView1.SelectedRow.FindControl("Label3"as Label).Text;  
  32.         ModalPopupExtender2.Show();  
  33.   
  34.     }  
  35. }  
Output Chamber

Output

gridview

select data

It works like this. When you click on the first link, it will show the GridView in the pop-up. Inside the grid view we took a button field as Select, so when you click on the select button of any ID, it will call another Pop-up where we had shown that specific ID data that you have selected.

Have a good day! Thank you for reading. I hope you liked it.

Up Next
    Ebook Download
    View all
    Learn
    View all