如何从 Jquery 对话框表单提交中调用父页面上的回发？

Posted 2023-05-08

【中文标题】如何从 Jquery 对话框表单提交中调用父页面上的回发？

【英文标题】：How to call postback on parent page from Jquery dialog form submit?

【发布时间】：2015-04-22 06:58:50

【问题描述】：

我目前正在使用 jQuery UI 对话框在用户单击链接后显示带有表单的对话框。我已经使用适当的 aspx 页面正确填充了 jquery UI 对话框。单击保存按钮时，我无法知道如何提交加载到对话框中的表单。现在我在加载的表单上调用按钮单击事件，它确实保存了数据，但随后它回发到对话框中加载的同一页面，但在它自己的页面上。我想要的是将数据保存在对话框中，然后刷新当前的aspx页面，打开jquery对话框的原始链接。

总而言之，当在 jquery 对话框上单击保存按钮时，我需要找出一种方法，我可以在后面的代码中调用单击处理程序，不要从该调用返回响应，然后关闭对话框，并回发到父页面。

用于创建和打开对话框的javascript： $(文档).ready(函数 () $("#dialog").dialog( 自动打开：假， 模态：真， 可调整大小：假， 标题：“项目编辑”， 纽扣： “保存”：函数（e） $('input#').click(); ); $(".item").on("点击", function () var itemId = $(this).attr("itemId"); var url = window.location.protocol + "//" + window.location.host + "/ItemEdit.aspx?itemId=" + itemId; $("#dialog").load(url); $("#dialog").dialog("open"); 返回假； ); );

表单加载到 jquery 对话框中： Inherits="ItemEdit" %> 项目编辑 物品： /> tabindex="-1" style="position:absolute; top:-1000px"/>

页面加载到 jquery 对话框中的代码： 导入 System.Data.OleDb 导入系统.IO 导入 System.Data.SqlClient

Partial Public Class ItemEdit
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)  
Handles Me.Load
    If (Not Page.IsPostBack) Then
        If Request.QueryString("itemId") IsNot Nothing Then
            Dim itemId As String = Request.QueryString("itemId")
            Dim command As New OleDbCommand("SELECT * FROM items WHERE id = 
" & itemId, New OleDbConnection(ConnectionString))
            Try
                command.Connection.Open()
                Dim reader As OleDbDataReader = command.ExecuteReader()
                If reader.Read() Then
                    lblItem.Text = reader("item")
                    cbxMB.Checked = reader("mb")
                    cbxPP.Checked = reader("pp")
                    cbxB.Checked = reader("b")
                    cbxT.Checked = reader("t")
                    lblItemId.Text = reader("itemId")
                End If
                reader.Close()
            Finally
                command.Connection.Close()
            End Try
        End If
    End If
End Sub

Protected Sub btnSave_Click(ByVal sender As System.Object, ByVal e As 
System.EventArgs) Handles btnSave.Click
    Dim command As New OleDbCommand("UPDATE items SET b=" & 
Math.Abs(CInt(cbxB.Checked)) & ",t=" & Math.Abs(CInt(cbxT.Checked)) & ",mb=" 
& Math.Abs(CInt(cbxMB.Checked)) & ",pp=" & Math.Abs(CInt(cbxPP.Checked)) & " 
WHERE id=" & lblItemId.Text, New OleDbConnection(ConnectionString))
    Try
        command.Connection.Open()
        command.ExecuteNonQuery()
    Finally
        command.Connection.Close()
    End Try
End Sub
End Class

【参考方案1】：

保存完成后你想回到父页面，对吧？

我会说

Response.Redirect("Parentpage.aspx")

在你的 try-block 应该这样做之后。页面将重新加载，对话框保持关闭。

编辑：

参考您的评论，我认为您必须通过 JavaScript 传递值，然后手动更新 Grid 以显示新值。

对话框上的 JS：

function transferDataAndCloseDialog(item, mb, pp, b, t, itemId) 
 var retVal = new Object();
 retVal.Item = item;
 retVal.Mb = mb;
 retVal.Pp = pp;
 retVal.B = b;
 retVal.T = t;
 retVal.ItemId = itemId;

 window.parent.setDataAndCloseDialog(retVal);

CodeBehind 对话框（抱歉，您必须适应 C#）： 读取您的数据后，在您的 btn_Click 中调用它：

private void SetUpdateScript(string item, string mb, string pp, string b, string t, string itemId)

 string jScript = " $(document).ready(function ()  "+
 " transferDataAndCloseDialog('"+item+"','"+mb+"','"+pp+"','"+b+"','"+t+"','"+itemId+"'); );";

 this.Page.ClientScript.RegisterClientScriptBlock(typeof(DialogPage), "UpdateScript", jScript, true);

JS 父页面：

function setDataAndCloseDialog(data) 
 //A function, where you use the data to update your grid:
 // you can access the values like "data.Item" etc.
 updateGrid(data);
 $("#dialog").dialog("close");

【讨论】：

正确，我想导航回父页面。但是，仅重定向到该页面将丢失滚动位置并重置该当前页面上的所有内容，我真正想要的是执行回发到父页面，这将使页面像以前一样但更新表格对话框表单更新.

我改进了我的答案。