Search

Thursday, January 28, 2016
One comments

JQuery ASP.NET GridView details on Modal Popup

12:04 AMThursday, January 28, 2016
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">
    <title></title>
    <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>
    <script>
        function popup(idn,un,ps,em)
        {
            $("#userid").text(idn);
            $("#usern").text(un);
            $("#pwd").text(ps);
            $("#eml").text(em);
            $("#popupdiv").dialog({
                title: "Show modal popup window",
                width: 350,
                height: 250,
                modal: true,
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }
                }


            })
         
        }



    </script>
</head>
<body>
    <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>
        </div>


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

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

                  </ItemTemplate>

              </asp:TemplateField>

            </Columns>



        </asp:GridView>
   
 
    </form>
</body>
</html>

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();
            con.Open();

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

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

Code generate the following output:



Protected by Copyscape Online Copyright Protection Software

1 comments :

 
Toggle Footer
Top