Post
Ask Question

Displaying Records in Model Popup Using jQuery From GridView

Introduction

In this article we will learn about the GridView control and how to display data into a jQuery and AJAX model pop-up window. We can also learn how to edit and update the record from the model pop-up window and update it in the database from the GridView at runtime. In this article we can see these things in two different ways in two different examples.

  • Display selected records using jQuery
  • Display selected records using AJAX

Display selected records using jQuery

Use the following procedure to create a sample of creating a jQuery model pop-up window in a GridView event.

Step 1

Open the Visual Studio and select the project.

selectProject

Step 2

Choose an empty template.

emptyProject

Step 3

Add New Item and choose a Web Form and give a nice name.

AddNew

Step 4

Add jQuery to your project. Right-click on the project then choose Manage NuGet Packeges and  download jQuery, the latest version.

JqueryByNugetPAckage

Step 5

Add a GridView to the page and bind with some dummy data.

For the use of a DataTable we should add a using statement for the "System.Data" namespace.

CodeDescription

Step 6

To display the data into a dialog box we should to use a jQueryUI dialog model as in the following:

JqueryUI

Step 7

Now for some jQuery code for the click event. In GridView there is a button with an ID, for that ID we call the model pop-up a dialog box.

  1. $(document).on("click", "[id*=btn]", function () {  
  2.         $("#id").html($(".Id", $(this).closest("tr")).html());  
  3.         $("#name").html($(".Name", $(this).closest("tr")).html());  
  4.         $("#add").html($(".add", $(this).closest("tr")).html());  
  5.         $("#dialog").dialog({  
  6.             title: "View Details",  
  7.             buttons: {  
  8.                 Ok: function () {  
  9.                     $(this).dialog('close');  
  10.                 }  
  11.             },  
  12.             modal: true  
  13.         });  
  14.         return false;  
  15.     });  

Output : 

output1

When we click on the view button the jQuery dialog box will appear with all the row information.

output2

Code:

  1. <html>  
  2. <head runat="server">  
  3.     <title>Untitled Page</title>  
  4.     <script src="Scripts/jquery-2.1.1.min.js"></script>  
  5.     <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>  
  6.     <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"  
  7.         rel="stylesheet" type="text/css" />  
  8.     <script type="text/javascript">  
  9.         $(document).on("click", "[id*=btn]", function () {  
  10.             $("#id").html($(".Id", $(this).closest("tr")).html());  
  11.             $("#name").html($(".Name", $(this).closest("tr")).html());  
  12.             $("#add").html($(".add", $(this).closest("tr")).html());  
  13.             $("#dialog").dialog({  
  14.                 title: "View Details",  
  15.                 buttons: {  
  16.                     Ok: function () {  
  17.                         $(this).dialog('close');  
  18.                     }  
  19.                 },  
  20.                 modal: true  
  21.             });  
  22.             return false;  
  23.         });  
  24.     </script>  
  25. </head>  
  26. <body>  
  27.     <form id="form1" runat="server">  
  28.         <asp:GridView ID="GridView1" HeaderStyle-BackColor="Blue" HeaderStyle-ForeColor="White"  
  29.             runat="server" AutoGenerateColumns="false">  
  30.             <Columns>  
  31.                 <asp:BoundField DataField="Id" ItemStyle-CssClass="Id" HeaderText="Id" ItemStyle-Width="30" />  
  32.                 <asp:BoundField DataField="Name" ItemStyle-CssClass="Name" HeaderText="Name" ItemStyle-Width="150" />  
  33.                 <asp:BoundField DataField="Address" ItemStyle-CssClass="add" HeaderText="Address"  
  34.                     ItemStyle-Width="150" />  
  35.                 <asp:TemplateField>  
  36.                     <ItemTemplate>  
  37.                         <asp:Button Text="View" ID="btn" runat="server" BackColor="AliceBlue" />  
  38.                     </ItemTemplate>  
  39.                 </asp:TemplateField>  
  40.             </Columns>  
  41.         </asp:GridView>  
  42.         <div id="dialog" style="display: none">  
  43.             <b>Id:</b> <span id="id"></span>  
  44.             <br />  
  45.             <b>Name:</b> <span id="name"></span>  
  46.             <br />  
  47.             <b>Address:</b> <span id="add"></span>  
  48.         </div>  
  49.    
  50.     </form>  
  51. </body>  
  52. </html>  

Display selected records using AJAX

Display an entire row on a button click using the AJAX toolkit. To display the data in a model pop-up window we need to use the following basic procedure.

Step 1

In this step we need to follow all the previous 5 steps of adding a new project, adding new items and adding the web form. In addition to that we need to install the AJAX library in the project to use the AJAX controls in the web form.

Step 2

Download the Ajax Control Toolkit. link

Step 3

After the downloading of the Ajax toolkit, extract all the files.

Step 4

Add the DLL file in the Visual Studio. After adding you get AjaxExtensions.

AjaxExtension

Step 5

Add a GridView to the web form.

Step 6

Add a CSS file to your project. The CSS file is used for the pop-up window.

Step 7

Add ToolScriptManager into the web form and activate the SelectedIndexChanged Event for the GridView.

ActivateTheEvent

Step 8

Add the ModelpopupExtender to the web form. ModelpopupExtender does the pop-up for any panel window.

Step 9

Add a panel that is treated like a pop-up window.

Step 10

Now bind a DataTable having some dummy data into the grid view.

  1. if (!this.IsPostBack)  
  2.            {  
  3.                DataTable dt = new DataTable();  
  4.                dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Address") });  
  5.                dt.Rows.Add(1, "Rajeev", "Hazaribagh");  
  6.                dt.Rows.Add(2, "Ranjan", "New Delhi");  
  7.                dt.Rows.Add(3, "Prerana Tiawri", "Noida");  
  8.                dt.Rows.Add(4, "Kumar Rohit", "Pune");  
  9.                GridView1.DataSource = dt;  
  10.                GridView1.DataBind();  
  11.                GridView1.DataSource = dt;  
  12.                GridView1.DataBind();  
  13.            }  

Step 11

Open the model pop-up inside the onSelectedIndexChanged event.

  1. lblId.Text = GridView1.SelectedRow.Cells[0].Text;  
  2.            lblName.Text = GridView1.SelectedRow.Cells[1].Text;  
  3.            lblCountry.Text = (GridView1.SelectedRow.FindControl("lblAdd") as Label).Text;  
  4.            mp.Show();  

Output:

o1

After clicking the view button we will get the selected row data inside the pop-up window. 

o2

Summary 

In this article we will see how to pop-up the selected row data using Ajax or jQuery, we will see by both. Thanks for reading this article.


Similar Articles