How To Open Gridview In Ajax Modal PopUp

In this tutorial i will teach you How To Open Gridview In Ajax Modal PopUp.In this example we are opening a gridview on click of a button, gridview will be shown in a Ajax Modal Popup.

Stored Procedure to Fetch Data:

create procedure selectemployee
as
begin
select * from EMP
end

Design View:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.aspx.cs" Inherits="Index" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>How To Open Grid View In Ajax Modal Pop Up</title>
<style type="text/css">
body
{
margin:0px auto;
width:980px;
text-align:center;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;	
}
h2
{
font-size:30px;
text-align:center;	
}
.modalbg
{
background-color:rgb(0,0,4);
filter: alpha(opacity=80);
opacity: 0.8;
}
.pnl
{
background-color: rgba(0,0,0,0.4);
width: 750px;
}
.closebtn
{
margin-top:-15px;
margin-right:-8px;
float:right;
}
.text
{
color:#fff;
text-align:center;
font-size:14px;	
width:100%;
}
.hr
{
clear:both;	
margin-top:60px;
border-bottom:solid 2px rgba(0,0,0,0.4);
}
.footer
{
width: 100%;
text-align: center;
padding-top: 0px;
font-size: 16px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<h2>How To Open Grid View In Ajax Modal Pop Up</h2>
<div class="text">
<asp:Button ID="open" runat="server" Text="Open Modal PopUp" />  
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>      

<asp:Panel ID="gvpnl" runat="server">
<div class="pnl">
<asp:ImageButton ID="close" CssClass="closebtn" ImageUrl="~/image/close.png" runat="server" Text="Close" />
<asp:GridView ID="gv" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Empno" HeaderText="Employee No." />
<asp:BoundField DataField="Ename" HeaderText="Employee Name" />
<asp:BoundField DataField="basic" HeaderText="Basic Salary" />
<asp:BoundField DataField="Deptno" HeaderText="Dept. No." />
<asp:BoundField DataField="comm" HeaderText="Communication" />
<asp:BoundField DataField="job" HeaderText="Designation" />
<asp:BoundField DataField="mgr" HeaderText="Manager ID" />
<asp:BoundField DataField="hiredate" HeaderText="Hired On" />
</Columns>
</asp:GridView>
</div>
</asp:Panel>
    
<asp:ModalPopupExtender CancelControlID="close" PopupControlID="gvpnl" TargetControlID="open"
ID="ModalPopupExtender1" BackgroundCssClass="modalbg" runat="server"></asp:ModalPopupExtender> 
</div>

<!--hr-->
<br /><br />
<hr />

<!--footer-->
<div class="footer">
<p>&copy; 2013 All rights reserved by HighTechnology.in
<a href="http://hightechnology.in" target="_blank">HighTechnology.in</a>
| Hosting Partner <a href="http://www.grootstech.com" target="_blank">Grootstech Solutions</a></p>
</div>
</form>
</body>
</html>

Code View:

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 Index : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        binddata();
    }
    public void binddata()
    {
        SqlConnection con = new SqlConnection("Data Source=.;Initial Catalog=session;User ID=sa;Password=mann ");
        con.Open();
        SqlCommand cmd = new SqlCommand("selectemployee",con);
        cmd.CommandType = CommandType.StoredProcedure;
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        DataSet ds = new DataSet();
        da.Fill(ds);
        gv.DataSource = ds;
        gv.DataBind();
    }
}