How to Auto-Refresh Grid View on Closing of Popup Menu

Introduction

In today's article, you will learn how to Auto-Refresh a Grid View on the closing of a popup menu.

In my last article, I told you How to Open a new web form in the Model Popup of ASP.NET Application.

This article will take you many steps ahead of that article since this article will tell you how to Auto-Refresh a GridView on the closing of a popup menu of a WebForm in which new entries were made.

Step 1. First of all, I created a database, "test", in which a table is created named "Popup". We will enter our data in this database through various controls that I used in the WebForm.

The fields created in the table are as follows.

First Name
Middle Name
Last Name
Gender
Age
City
State
Country
Zip Code

Here Age and Zip Code are the int datatype and all others are nvarchar(50). We will make entries in this table at runtime using the Popup Form.

Step 2. Now we should move towards our .NET Application. In ASP.NET I took two WebForms named "WebForm1" and "WebForm2". WebForm1 will be used to show the Grid View and it will be the base form of our application since on this form the Popup will be opened by clicking on the button provided.

My WebForm1 code is as follows.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication26.WebForm1" %>   

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>   

<!DOCTYPE html>   

<html xmlns="http://www.w3.org/1999/xhtml">   
<head runat="server">   
    <title></title>   
</head>   
<body>   
    <form id="form1" runat="server">   
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>   
        <asp:Button ID="Button1" runat="server" Text="Fill Form in Popup" />   
        <br />   
        <br />   
        <asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3">   
            <FooterStyle BackColor="White" ForeColor="#000066" />   
            <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />   
            <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />   
            <RowStyle ForeColor="#000066" />   
            <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />   
            <SortedAscendingCellStyle BackColor="#F1F1F1" />   
            <SortedAscendingHeaderStyle BackColor="#007DBB" />   
            <SortedDescendingCellStyle BackColor="#CAC9C9" />   
            <SortedDescendingHeaderStyle BackColor="#00547E" />   
        </asp:GridView>   
        
        <cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panl1" TargetControlID="Button1" BackgroundCssClass="Background">   
        </cc1:ModalPopupExtender>   
        <asp:Panel ID="Panl1" runat="server" CssClass="Popup" align="center" style = "display:none">   
            <iframe style=" width: 380px; height: 360px;" id="irm1" src="WebForm2.aspx" runat="server"></iframe>   
        </asp:Panel>   
    </form>   
</body>   
</html>

As you can see first I registered the Ajax Toolkit for my application. You can download the Ajax Toolkit either from here "AJAXTOOLKIT" or from other sites.

In the form Tag, I first used the ScriptManager Tag because I will use the Ajax Tools in my application, so before using the Ajax Tools you need to call the Script Manager.

Then I took a button that will be used to open the Popup Menu.

Then I took a GridView whose theme is set by clicking on the AutoFormat option of GridView.

Then I took a ModelPopupExtender in which you need to pass the ID of the Popup Control and Target Control that will open the Popup, now you will be wondering that in my previous article, I had passed one more ID and that was of the control that will close the Popup, but here I haven't used such type of Id that's because in this application the Popup WebForm does have the close button, that button will close the Popup and will refresh the GridView as well.

Then a Panel is used with the iframe to open the WebForm2.

So until now,

our containers are ready and now the internal work is remaining.

Step 3. Now we will move towards the second WebForm that will be opened in the Popup.

On my second Webform, I create a table in which some Labels and textboxes are used that will allow the user to make entries in them. I am providing you with some parts of the code so that you can understand how I created the complete form.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication26.WebForm2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery-1.9.1.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <table>
            <tr>
                <td>
                    <asp:Label ID="Label1" runat="server" CssClass="lbl" Text="First Name"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox1" runat="server" Font-Size="14px"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="Label3" runat="server" CssClass="lbl" Text="Last Name"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox3" runat="server" Font-Size="14px"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="Label9" runat="server" CssClass="lbl" Text="Zip Code"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox9" runat="server" Font-Size="14px"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Button runat="server" Text="Close Popup" ID="btn" OnClick="btn_Click" />
                    <script>
                        $("#btn").click(
                           function () {
                               window.top.location = "WebForm1.aspx";
                           });
                    </script>
                </td>
                <td>
                    <asp:Button runat="server" ID="savebtn" Text="Save Data" OnClick="savebtn_Click" />
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

Here I haven't provided you the complete code since that's of no use, you can make as many entries as you want. The complete code can be downloaded by downloading the Zip file provided at the start of this article.

But this code has some of our main functions. Have a look at the end of the code. There I used two buttons, one is the close button and the other is the "Save" Button.

In the close button, I used the following jQuery code.

<script>
    $("#btn").click(
        function () {
            window.top.location = "WebForm1.aspx";
        });
</script>

This code is the main part of our article, this code uses the ID of the Button and on that ID a click function is called. On the click, a function "window.top.location" will start working and will take you to the Form whose ID you have passed in the " ". This jQuery code will work on the URL of the page and will change the URL by the ID you had currently provided. To make this jQuery code work you need to add a jQuery 1.9.1 file to your application, you can fetch it from the code Zip file provided at the start. You might be thinking, why I didn't use some simple lines of code, like "Response. Redirct" or "Server. Transfer"? You will get your answer at the end of this article.

Step 4. After this, I created a connection between the .NET and SQL. I hope you have known how to create a connection between them, if not then simply go to the Server Explorer of your application and choose "Add New Connection", then provide the Server Name, User Name, and Password. Also, choose the database to which connectivity is to be done.

Now I am working on the click of the save button that I created in the last step.

using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;

namespace WebApplication26
{
    public partial class WebForm2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        SqlConnection x;
        SqlCommand y;

        protected void savebtn_Click(object sender, EventArgs e)
        {
            x = new SqlConnection(@"Data Source=.;Initial Catalog=test;User ID=sa;Password=password@123");
            x.Open();
            y = new SqlCommand("insert into Popup values('" + TextBox1.Text + "','" + TextBox2.Text + "','" + TextBox3.Text + "','" + TextBox4.Text + "'," + TextBox5.Text + ",'" + TextBox6.Text + "','" + TextBox7.Text + "','" + TextBox8.Text + "'," + TextBox9.Text + ")", x);
            y.ExecuteNonQuery();
            x.Close();
        }
    }
}

I have provided the code in the simplest way I can, here first the namespace for the SQL is passed in the beginning. Then SqlConnection and SqlCommand are passed as x and y.

On the button click, I have passed the connection string under the "x". Then the connection is opened. By using the Y I passed the Insert command of SQL, here all the TextBox Ids are passed in the ' " " ' except for the Textbox5 and Textbox9, that's because they will insert the Integer value.

Step 5. Now only one thing is remaining and that's connecting the GridView to the database so that the data can be shown at runtime. For that go to the .aspx.cs page of the WebForm1 and write this code on the page Load.

using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;

namespace WebApplication26
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            SqlConnection x = new SqlConnection(@"Data Source=.;Initial Catalog=test;User ID=sa;Password=password@123");
            x.Open();
            SqlDataAdapter z1 = new SqlDataAdapter("select * from Popup", x);
            DataSet ds = new DataSet();
            z1.Fill(ds, "Popup");
            GridView1.DataSource = ds.Tables["Popup"];
            GridView1.DataBind();
            x.Close();
        }
    }
}

Here again, I have created a connection between the form and the SQL, but instead of a command, a DataAdapter is used to show the data.

Now our application is created and is ready for execution.

Output

On running the code you might get a Web Page on which only one button will exist but if you enter a value in the database then you will get output like this.

Now if you click on the button then you will get an output window like this.

Now I will make some entries in this form and click on the "Save Data" button.

Since I click on the "Close Popup" button, the Grid will be refreshed and will show the current entries.

Now I will provide you the answer to why we can't use "Response. redirect" or "Server. Transfer" if we have the close button on the Popup WebForm. I am changing the code of the close button to "Response.redirect" Let's see what output we get:

What will happen is, the WebForm will be opened inside the Popup. That's why we can't use the "Response. redirect" or "Server. Transfer" here. Only window. top.location = "WebForm1.aspx"; can work here.