从弹出窗口刷新父页面上的 GridView 控件

引言

在本文中，我将向您展示如何从弹出窗口刷新父页面上的 GridView 控件。我将讨论不同的场景，这些场景在实现解决方案时将非常有用。

数据库表

我将在此文章中使用我自己的自定义表。表名为 Users，它包含 UserID、UserName、FirstName 和 LastName 列。UserID 是一个自动生成的主键。这是 Users 表的架构

if exists (select * from dbo.sysobjects where 
     id = object_id(N'[dbo].[Users]') and 
     OBJECTPROPERTY(id, N'IsUserTable') = 1)
drop table [dbo].[Users]
GO

CREATE TABLE [dbo].[Users] (
[UserID] [int] IDENTITY (1, 1) NOT NULL ,
[UserName] [varchar] (50) COLLATE SQL_Latin1_General_CP1_CI_AS NULL ,
[FirstName] [varchar] (20) COLLATE SQL_Latin1_General_CP1_CI_AS NULL ,
[LastName] [varchar] (20) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
) ON [PRIMARY]
GO

创建父页面

父页面将包含一个 GridView 控件和一个 href 标签。该 href 标签将打开一个新的弹出窗口，用于将数据插入数据库并刷新父页面上的 GridView 控件。让我们看看父页面的实现。

父页面的后台代码

protected void Page_Load(object sender, EventArgs e)
{
  BindData();
}

private void BindData()
{
  // make the query
  string query = "SELECT * FROM Users";
  SqlConnection myConnection = new SqlConnection(ConnectionString);
  SqlDataAdapter ad = new SqlDataAdapter(query, myConnection);

  DataSet ds = new DataSet();

  ad.Fill(ds,"Users");
  GridView1.DataSource = ds;
  GridView1.DataBind();
}

private string ConnectionString
{
  get { return @"Server=localhost;Database" + 
               @"=MyDatabase;Trusted_Connection=true"; }
}

正如您所见，我没有做什么花哨的事情。我只是使用 BindData 方法中的 SELECT 查询从数据库中填充 GridView。

父页面还包含用于打开弹出窗口的 href 标签。让我们在页面的 HTML 视图中查看此 href 标签的代码。

<a href="#" onclick="OpenWindow()">Insert Data


<script language="javascript" type="text/javascript">
function OpenWindow()
{
    window.open ("PopUpWindow.aspx",
       "mywindow", "menubar=0,resizable=0," + 
       "width=350,height=250,toolbars=0");

}
</script>

很简单，对吧？当您单击 href 标签时，将触发 OpenWindow 函数。这将打开一个小的弹出窗口。请看下面的屏幕截图，以便更清晰地了解

是的，您猜对了，包含用户名、名字和姓氏文本框的小窗口就是我们的小弹出窗口。现在，在填写完文本框中的所有必需信息并按“添加用户”按钮后，我们希望它将用户添加到数据库并刷新包含 GridView 控件的父页面，从而将新插入的数据填充到 GridView 中。

弹出页面的实现

现在，让我们看看弹出页面的实现方式。首先，让我们看看弹出页面的 HTML 代码，这样我们就会知道页面上的控件是如何设置的。

<form id="form1" runat="server">
 <div>
  UserName: <asp:TextBox ID="txtUserName" runat="server"></asp:TextBox><br>
  FirstName:<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox><br>
  LastName:<asp:TextBox ID="txtLastName" runat="server"></asp:TextBox><br>

  <asp:Button ID="BtnAdd" runat="server" Text="Add User" OnClick="BtnAdd_Click"/>
  <asp:Button ID="Btn_CloseWindow" runat="server" Text="Close Window"/>
 </div>
</form>

现在，让我们实现将数据插入数据库的代码。当用户按下“添加用户”按钮时，将触发以下代码。

private void AddUser(string userName, string firstName, string lastName)
{
  string QUERY_ADDUSER = @"INSERT INTO Users(UserName," + 
         @" FirstName, LastName) VALUES(@UserName,@FirstName,@LastName)";
  SqlConnection myConnection = new SqlConnection(ConnectionString);
  SqlCommand myCommand = new SqlCommand(QUERY_ADDUSER, myConnection);
  myCommand.Parameters.AddWithValue("@UserName", userName);
  myCommand.Parameters.AddWithValue("@FirstName", firstName);
  myCommand.Parameters.AddWithValue("@LastName", lastName);
  myConnection.Open();
  myCommand.ExecuteNonQuery();
  myConnection.Close();
}

上面的代码只是将参数附加到参数化查询并将它们插入数据库。我敢肯定您已经多次做过类似的事情。

现在，让我们看看刷新包含 GridView 的父页面的代码。

刷新父页面上的 GridView 控件

刷新父页面上的 GridView 控件听起来很棒！抱歉这个糟糕的笑话，让我们回到正题。刷新 GridView 控件非常简单。看看下面的代码

protected void Page_Load(object sender, EventArgs e)
{
  string scriptString = "<script language=JavaScript> " + 
         "window.opener.document.forms(0).submit(); </script>";

  // ASP.NET 2.0
  if (!Page.ClientScript.IsClientScriptBlockRegistered(scriptString))
  {
    Page.ClientScript.RegisterClientScriptBlock(this.GetType(), 
                                       "script", scriptString);
  }

  //// ASP.NET 1.X
  //if (!Page.IsClientScriptBlockRegistered(scriptString))
  //{
  // Page.RegisterClientScriptBlock("script", scriptString);
  //}

  if (!Page.IsPostBack) { }
  }

我包含了两个版本的代码。如果您使用的是 Visual Studio .NET 2003 或 .NET Framework 1.X，则可以使用注释掉的代码。在 Page_Load 事件中，我只是将客户端脚本附加到页面。脚本 window.opener.document.forms(0).submit(); 意味着将提交当前页面的父级。这将导致父页面发生回发，并且由于我们在每次页面加载时都绑定 GridView 控件，因此它将正常工作。请看下面的屏幕截图

所以，您看到了，它很简单，对吧？现在，让我们处理一些重要的事情。比如说，当按下“关闭窗口”按钮时，您想关闭该窗口。您可以通过简单地将 JavaScript 函数 "window.close()" 附加到按钮单击事件来完成此操作。

// ASP.NET 2.0
Btn_CloseWindow.OnClientClick = "window.close();";

// ASP.NET 1.X
Btn_CloseWindow.Attributes.Add("onclick", "window.close();");

您可能想将窗口关闭事件附加到“添加用户”按钮。这样，当添加用户时，弹出窗口会自动关闭。为此，您可以使用 OnUnload 事件。查看下面的代码

<body onunload="opener.location.reload();">

正如我已经解释过的，JavaScript 函数 window.opener.document.forms(0).submit(); 将导致回发，并且为了使用此示例，您需要在每次加载页面时绑定 GridView。这不是一个好主意，您可以通过使用 opener.location.reload(); 函数来改进这一点，该函数将重新加载父页面。这样，您就可以仅在页面重新加载时绑定 GridView 和其他控件，而不是在回发时。要使用 opener.location.reload();，只需将其附加到父页面的 OnUnload 事件，如下所示

<body onunload="opener.location.reload();">

另外请记住，在使用 opener.location.reload() 时，您无需注册任何脚本。

希望您喜欢这篇文章，祝您编码愉快！