JQuery ASP.NET GridView details on Modal Popup

January 28, 2016 , 1 Comments

In this article, I will show you how to show details of the grid view's row on modal popup. Before doing this article, I will show details of row in second page. You can say that  all information of particular data shown on modal popup. Lets take an example:

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link href="http://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        function popup(idn,un,ps,em)
                title: "Show modal popup window",
                width: 350,
                height: 250,
                modal: true,
                buttons: {
                    Close: function () {


    <form id="form1" runat="server">
    <div id="popupdiv" title="JQuery Modal" style="display:none">
        id:<label id="userid"></label><br />
        userName :<label id="usern"></label><br />
        Password : <label id="pwd"></label><br />
        Email : <label id="eml"></label>

        <asp:GridView AutoGenerateColumns="false" ID="g1" runat="server">
                <asp:BoundField DataField="Id" HeaderText="ID" />
                <asp:BoundField DataField="username" HeaderText="UserName" />
                <asp:BoundField DataField="Password" HeaderText="Password" />
                <asp:BoundField DataField="email" HeaderText="Email" />

                      <a href="#" onclick='popup("<%# Eval("Id") %>","<%# Eval("username") %>","<%# Eval("Password") %>","<%# Eval("email") %>")'>Check</a>





According to mentioned code, we have a grid view with 4 columns and one hyperlink column. Hyperlink column contains four parameters. When we click on it then all these are pass into JavaScript function. In this function, generate modal popdialog by using dialog method.

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class GRIDVIEWDETAILS : System.Web.UI.Page
    protected void Page_Load(object sender, EventArgs e)
        if (!Page.IsPostBack)
            SqlConnection con = new SqlConnection();
            con.ConnectionString = ConfigurationManager.ConnectionStrings["ConnectionStringtr"].ToString();

            SqlCommand cmd = new SqlCommand();
            cmd.CommandText = "Select * from [user_table]";
            cmd.Connection = con;

            SqlDataReader rd = cmd.ExecuteReader();
            g1.DataSource = rd;

Code generate the following output:

Jacob Lefore

Some say he’s half man half fish, others say he’s more of a seventy/thirty split. Either way he’s a fishy bastard. Google

1 comment: