Post
Ask Question

Show Gridview Data in Popup Using RowData Bound in ASP.Net

Initial Chamber

Step 1

Open Your Visual Studio 2010 and create an Empty Website, provide a suitable name (RowDataBoundPopUp_demo).

Step 2

In Solution Explorer you get your empty website then add a web as in the following:

For Web Form:

    RowDataBoundPopUp _demo (Your Empty Website) then right-click then select Add New Item -> Web Form. Name it as -> RowDataBoundPopUp _demo.aspx.

Well here we will not use any SQL Server for making a table or Stored Procedure, we will make our table at the server side so that we can fetch the row of the table easily and also this article relates to RowDataBound too.

Design Chamber

Step 3

Open your RowDataBoundPopUp_demo.aspx page and provide the code for designing our GridView. Look at the following code.

RowDataBoundPopUp_demo.aspx

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8.     <style type="text/css">  
  9.         .style1  
  10.         {  
  11.             width: 240px;  
  12.         }  
  13.     </style>  
  14. </head>  
  15. <body>  
  16.     <form id="form1" runat="server">  
  17.     <div>  
  18.   
  19.   
  20.   
  21.         <table style="width:100%;">  
  22.             <tr>  
  23.                 <td>  
  24.                      </td>  
  25.                 <td class="style1">  
  26.                      </td>  
  27.                 <td>  
  28.                      </td>  
  29.             </tr>  
  30.             <tr>  
  31.                 <td>  
  32.                      </td>  
  33.                 <td class="style1">  
  34.                     <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"   
  35.                         BackColor="White" BorderColor="#336666" BorderStyle="Double" BorderWidth="3px"   
  36.                         CellPadding="4" DataKeyNames="id" GridLines="Horizontal"   
  37.                         onrowcommand="GridView1_RowCommand">  
  38.                         <Columns>  
  39.                             <asp:TemplateField HeaderText="Name">  
  40.                                 <EditItemTemplate>  
  41.                                     <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("name") %>'></asp:TextBox>  
  42.                                 </EditItemTemplate>  
  43.                                 <ItemTemplate>  
  44.                                    <asp:Label ID="Label1" runat="server" Text='<%# Bind("name") %>'></asp:Label>  
  45.                                 </ItemTemplate>  
  46.                             </asp:TemplateField>  
  47.                             <asp:TemplateField HeaderText="Education">  
  48.                                 <EditItemTemplate>  
  49.                                     <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("education") %>'></asp:TextBox>  
  50.                                 </EditItemTemplate>  
  51.                                 <ItemTemplate>  
  52.                                     <asp:Label ID="Label2" runat="server" Text='<%# Bind("education") %>'></asp:Label>  
  53.                                 </ItemTemplate>  
  54.                             </asp:TemplateField>  
  55.                             <asp:TemplateField HeaderText="Location">  
  56.                                 <EditItemTemplate>  
  57.                                     <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("location") %>'></asp:TextBox>  
  58.                                 </EditItemTemplate>  
  59.                                 <ItemTemplate>  
  60.                                     <asp:Label ID="Label3" runat="server" Text='<%# Bind("location") %>'></asp:Label>  
  61.                                 </ItemTemplate>  
  62.                             </asp:TemplateField>  
  63.                             <asp:TemplateField>  
  64.                                 <EditItemTemplate>  
  65.                                     <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>  
  66.                                 </EditItemTemplate>  
  67.                                 <ItemTemplate>  
  68.                                     <asp:Button ID="Button1" runat="server" CommandName="Select"  
  69.                                         CommandArgument="<%# Container.DataItemIndex%>" Text="Click to PopUp Me" />  
  70.                                 </ItemTemplate>  
  71.                             </asp:TemplateField>  
  72.                         </Columns>  
  73.                         <FooterStyle BackColor="White" ForeColor="#333333" />  
  74.                         <HeaderStyle BackColor="#336666" Font-Bold="True" ForeColor="White" />  
  75.                         <PagerStyle BackColor="#336666" ForeColor="White" HorizontalAlign="Center" />  
  76.                         <RowStyle BackColor="White" ForeColor="#333333" />  
  77.                         <SelectedRowStyle BackColor="#339966" Font-Bold="True" ForeColor="White" />  
  78.                         <SortedAscendingCellStyle BackColor="#F7F7F7" />  
  79.                         <SortedAscendingHeaderStyle BackColor="#487575" />  
  80.                         <SortedDescendingCellStyle BackColor="#E5E5E5" />  
  81.                         <SortedDescendingHeaderStyle BackColor="#275353" />  
  82.                     </asp:GridView>  
  83.                 </td>  
  84.             </tr>  
  85.             <tr>  
  86.                 <td>  
  87.                      </td>  
  88.                 <td class="style1">  
  89.                      </td>  
  90.                 <td>  
  91.                      </td>  
  92.             </tr>  
  93.         </table>  
  94.     </div>      
  95.     </form>  
  96. </body>  
  97. </html>  

Your GridView will look like this:

grid view

Code Chamber

Step 4

Open the RowDataBoundPopUp_demo.aspx.cs file to write some code and make our application complete.

RowDataBoundPopUp_demo.aspx.cs

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.Data;  
  8. using System.Data.SqlClient;  
  9.   
  10. public partial class _Default : System.Web.UI.Page  
  11. {  
  12.     protected void Page_Load(object sender, EventArgs e)  
  13.     {  
  14.         if (!Page.IsPostBack)  
  15.         {  
  16.             refreshdata();  
  17.         }  
  18.   
  19.     }  
  20.   
  21.     public void refreshdata()  
  22.     {   
  23.       
  24.         // for making  Table   
  25.             DataTable dt = new DataTable();  
  26.   
  27.         // these are the table columns  
  28.             dt.Columns.Add("id", typeof(Int32));  
  29.             dt.Columns.Add("name", typeof(string));  
  30.             dt.Columns.Add("education", typeof(string));  
  31.             dt.Columns.Add("location", typeof(string));  
  32.   
  33.         // these are the table rows with values  
  34.             dt.Rows.Add(1, "Nilesh", "B.E(IT)", "Rajkot");  
  35.             dt.Rows.Add(2,"Purnima", "B.E(CSE)", "Rajkot");  
  36.             dt.Rows.Add(2, "Chandni", "MSc(IT)", "Ahmedabad");  
  37.             dt.Rows.Add(2, "Rinku", "MBA", "Pune");  
  38.             dt.Rows.Add(2, "Nilu", "MBBS", "Bikaner");  
  39.      
  40.             GridView1.DataSource = dt;  
  41.             GridView1.DataBind();  
  42.    
  43.     }  
  44.       protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)  
  45.     {  
  46.         if (e.CommandName== "Select")  
  47.         {  
  48.            int Index  =Convert.ToInt32(e.CommandArgument.ToString());  
  49.          GridViewRow row = GridView1.Rows[Index];  
  50.            string name = (row.FindControl("Label1") as Label).Text;  
  51.            string education = (row.FindControl("Label2") as Label).Text;  
  52.            string location= (row.FindControl("Label3") as Label).Text;  
  53.            
  54.             
  55.            ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Name:" + name + "\\nEducation:" + education +"\\nLocation:"+location+" ');", true);  
  56.         }  
  57.   
  58.     }  
  59. }  
code

Output Chamber

If the user clicks the button the browser will show the data in the pop-up, like this:

pop up

When the user clicks the button it will show like this:

click the button

I hope you like this. Have a nice Day! Thanks for the reading. 


Similar Articles