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
Your design will look like the following:
![design]()
Code ChamberStep 5
Open your gridview_demo.aspx.cs and write some code so that our application works.
Gridview_demo.cs
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Web;
- using System.Web.UI;
- using System.Web.UI.WebControls;
- using System.Data;
- using System.Data.SqlClient;
-
- public partial class _Default : System.Web.UI.Page
- {
- protected void Page_Load(object sender, EventArgs e)
- {
- if (!Page.IsPostBack)
- {
- SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");
- SqlCommand cmd = new SqlCommand("select * from tbl_data", con);
- SqlDataAdapter sda = new SqlDataAdapter(cmd);
- DataTable dt = new DataTable();
- sda.Fill(dt);
- GridView1.DataSource = dt;
- GridView1.DataBind();
- }
-
- }
-
- protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
- {
- Label4.Text = (GridView1.SelectedRow.FindControl("Label1") as Label).Text;
- Label5.Text = (GridView1.SelectedRow.FindControl("Label2") as Label).Text;
- Label6.Text = (GridView1.SelectedRow.FindControl("Label3") as Label).Text;
- ModalPopupExtender2.Show();
-
- }
- }
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.