使用 Ajax 从弹出窗口填充父网格

• 下载演示项目 - 5.9 KB
• 下载源代码 - 5.7 KB

引言

我看到很多人请求从弹出页面控制父网页，所以我决定写这篇文章。 本文解释了如何使用 AJAX 从弹出窗口调用父服务器级函数。

为此，我使用填充网格作为示例。 这里我有一个数据网格，其中包含用于编辑每一行的按钮。 当我单击该按钮时，会弹出一个弹出窗口 (popup.aspx)，其中包含所选行的字段。

编辑完行后，网格将从弹出窗口刷新，而无需回传到服务器。 我使用 Ajax 功能来做到这一点。

Using the Code

这里我使用了两个 ASPX 页面。

1. Default.aspx
2. popup.aspx

我维护一个隐藏按钮 (btnReload) 只是为了填充网格。 在加载 default.aspx 的函数时，我从 Northwind 数据库填充网格。

Private Function FillGrid() As Boolean 

    Dim Sqlstring As String = " select top 10 customerID,companyname," +
        "contactname from customers" 
    Dim Myreader As SqlDataReader = Nothing 
    Connect_SQLDataReader(Myreader, Sqlstring, errmsg) 
    grid.DataSource = Myreader 
    grid.DataBind() 

End Function

在默认页面的 Onload 事件中，我注册了一个 JavaScript 函数 ReloadPage()，该函数将引用重新加载按钮的单击事件。 这就是诀窍。

Protected Sub Page_Load(ByVal sender As Object,
    ByVal e As System.EventArgs) Handles Me.Load 

ScriptManager.RegisterStartupScript(Me.btnReload, Me.GetType, "xxxxx", 
    "function ReloadPage(){" & Page.ClientScript.GetPostBackEventReference(
    Me.btnReload, Nothing) & "}", True) 
If Page.IsPostBack = False Then 
FillGrid() 
End If 

End Sub

请注意，您必须在 Page.IsPostBack 条件之外执行此操作，因为我们必须为每次回传注册脚本以实现 稳定性保证，即您将网格放入 Ajax Update Panel 中。

单击网格的链接按钮时，我弹出了新的 ASPX 页面 popup.aspx，在那里我获取了 rowID 的查询字符串，并填充了用于编辑目的的文本框。

Protected Sub Page_Load(ByVal sender As Object,
    ByVal e As System.EventArgs) Handles Me.Load 

If Page.IsPostBack = False Then 
Dim Sqlstring = "select companyname,
    contactname from customers where customerID='" & 
    Request.QueryString("id") & "'" 
Dim Myreader As SqlDataReader = Nothing 
Connect_SQLDataReader(Myreader, Sqlstring, errMsg) Myreader.Read() 

txtCompanyName.Text = Myreader(0).ToString() 
txtContactName.Text = Myreader(1).ToString() 
Myreader.Close() 

End If 

End Sub

现在，在单击弹出窗口中的保存按钮后，我正在编辑后端的数据，并调用一个 JavaScript 函数 ReloadParent()。

Protected Sub Button1_Click(ByVal sender As Object,
    ByVal e As System.EventArgs) Handles Button1.Click 

Dim Sqlstring = "update customers set companyname='" & 
    txtCompanyName.Text & "', contactname='" & txtContactName.Text & 
    "' where customerID='" & Request.QueryString("id") & "'" 
Dim result As Integer 

Try

 Connect_SQLNonQuery(result, Sqlstring, errMsg) 

Catch ex As Exception 

End Try 

ScriptManager.RegisterStartupScript(Me.Page, GetType(String), "Success",
    "ReloadParent('Records Updated')", True) 

End Sub

让我们看看 ReloadParent() 的作用。

function ReloadParent(msg) 
{
    var opener;
    if (window.opener){opener = window.opener;} else{opener = 
       window.dialogArguments;
} 
opener.ReloadPage();
    alert('Records Updated'); //self.close(); 

}

在这里，我正在调用父 JavaScript 函数 opener.ReloadPage();，它将调用父页面的 btnReload 点击事件。 在 btnReload 中，我们像这样调用 Fillgrid() 函数

Protected Sub btnReload_Click(ByVal sender As Object,
    ByVal e As System.EventArgs)
FillGrid()

End Sub