In this article I will explain with an example, how to display (show) GridView inside jQuery Dialog Modal Popup Window in ASP.Net using C# and VB.Net.
This article will also explain how to keep the jQuery Dialog Modal Popup Window when paging in ASP.Net GridView.
Database
I have made use of the following table Customers with the schema as follows.
![Bind (Populate) ASP.Net DropDownList using DataTable (DataSet) in C# and VB.Net]()
I have already inserted few records in the table.
![Bind (Populate) ASP.Net DropDownList using DataTable (DataSet) in C# and VB.Net]()
Note: You can download the database table SQL by clicking the download link below.
HTML Markup
The below HTML Markup consists of a GridView control with three BoundField columns and a Button. The GridView is placed inside a hidden HTML DIV which will be used for displaying the jQuery Dialog Modal Popup Window.
<asp:Button ID="btnShowPopup" runat="server" Text="Show Popup" />
<div id="dialog" style="display: none">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnPageIndexChanging="OnPageIndexChanging"
PageSize="2" AllowPaging="true">
<Columns>
<asp:BoundField DataField="CustomerId" HeaderText="Customer Id" ItemStyle-Width="80" />
<asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
<asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" />
</Columns>
</asp:GridView>
</div>
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Populating the GridView control
The GridView is populated using the records from the Customers table inside the Page Load event of the ASP.Net page.
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.BindGrid();
}
}
private void BindGrid()
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("SELECT CustomerId, Name, Country FROM Customers"))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataTable dt = new DataTable())
{
sda.Fill(dt);
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
Me.BindGrid()
End If
End Sub
Private Sub BindGrid()
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As New SqlConnection(constr)
Using cmd As New SqlCommand("SELECT CustomerId, Name, Country FROM Customers")
Using sda As New SqlDataAdapter()
cmd.Connection = con
sda.SelectCommand = cmd
Using dt As New DataTable()
sda.Fill(dt)
GridView1.DataSource = dt
GridView1.DataBind()
End Using
End Using
End Using
End Using
End Sub
Display (Show) GridView inside jQuery Dialog Modal Popup Window in ASP.Net
The ASP.Net Button has been assigned a jQuery Click event handler. When the Button is clicked the ShowPopup JavaScript function is executed which opens the HTML DIV containing the ASP.Net GridView as jQuery Dialog Modal Popup Window.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("[id*=btnShowPopup]").click(function () {
ShowPopup();
return false;
});
});
function ShowPopup() {
$("#dialog").dialog({
title: "GridView",
width: 450,
buttons: {
Ok: function () {
$(this).dialog('close');
}
},
modal: true
});
}
</script>
Keeping the jQuery Dialog Modal Popup Window open when paging in GridView
The jQuery Dialog Modal Popup Window closed when any page number of the ASP.Net GridView is clicked. Hence in order to solve this problem, the ShowPopup JavaScript methods is called using ClientScript RegisterStartupScript method inside the OnPageIndexChanging event handler.
C#
protected void OnPageIndexChanging(object sender, GridViewPageEventArgs e)
{
GridView1.PageIndex = e.NewPageIndex;
this.BindGrid();
ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup();", true);
}
VB.Net
Protected Sub OnPageIndexChanging(sender As Object, e As GridViewPageEventArgs)
GridView1.PageIndex = e.NewPageIndex
Me.BindGrid()
ClientScript.RegisterStartupScript(Me.GetType(), "Popup", "ShowPopup();", True)
End Sub
Screenshot
![Display (Show) GridView inside jQuery Dialog Modal Popup Window in ASP.Net using C# and VB.Net]()
Demo
Downloads
