如何点击按钮弹出新窗口,输入数据后返回并刷新页面?

在一些.NET论坛中有人经常会问:如何在页面中点击按钮打开新页面,输入数据,然后返回到初始页面并进行更新?要解决这个问题,应该弄清楚window.showModalDialog()的用法,本人在http://www.youkuaiyun.com/Develop/read_article.asp?id=15113已经做过介绍。下面就用例子介绍如何在ASP.NET中实现这个功能。

本例子共3个页面,其中WebForm2.aspx是过渡页面,是为了防止提交时打开新页面。

WebForm1.aspx 

 <%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm1.aspx.vb" Inherits="ShowModalDialog.WebForm1" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <title>WebForm1</title> <meta content="Microsoft Visual Studio .NET 7.0" name="GENERATOR"> <meta content="Visual Basic 7.0" name="CODE_LANGUAGE"> <meta content="JavaScript" name="vs_defaultClientScript"> <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema"> </HEAD> <body MS_POSITIONING="GridLayout"> <div align="center"> <form id="Form1" method="post" runat="server"> <asp:label id="Label1" runat="server" Font-Bold="true"> 从当前页面打开新窗口,并把变量传递到新窗口的例子,可以多次打开提交。 </asp:label><br> <br> <asp:textbox id="TextBox1" runat="server" Width="600px">这是初始值,将被传递到新窗口。</asp:textbox><br> <br> <asp:button id="Button1" runat="server" Text="打开窗口" Width="96px"></asp:button></form> </div> </body> </HTML>
 

WebForm1.aspx.vb

 Public Class WebForm1 Inherits System.Web.UI.Page Protected WithEvents TextBox1 As System.Web.UI.WebControls.TextBox Protected WithEvents Form1 As System.Web.UI.HtmlControls.HtmlForm Protected WithEvents Label1 As System.Web.UI.WebControls.Label Protected WithEvents Button1 As System.Web.UI.WebControls.Button #Region " Web 窗体设计器生成的代码 " '该调用是 Web 窗体设计器所必需的。 <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent() End Sub Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init 'CODEGEN: 此方法调用是 Web 窗体设计器所必需的 '不要使用代码编辑器修改它。 InitializeComponent() End Sub #End Region Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load '在此处放置初始化页的用户代码 If (Not IsClientScriptBlockRegistered("clientScript")) Then Dim strScript As String = "<script>" + vbCrLf strScript += "function OpenWin(){" + vbCrLf strScript += "var str=window.showModalDialog('WebForm2.aspx',document.Form1.TextBox1.value)" + vbCrLf strScript += "if(str!=null) document.Form1.TextBox1.value=str" + vbCrLf strScript += "}" + vbCrLf strScript += "</script>" + vbCrLf RegisterClientScriptBlock("clientScript", strScript) End If Button1.Attributes.Add("onclick", "OpenWin()") End Sub End Class 

 

WebForm2.aspx

 <%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm2.aspx.vb" Inherits="aspxWeb.mengxianhui.com.WebForm2"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <title>WebForm2</title> <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.0"> <meta name="CODE_LANGUAGE" content="Visual Basic 7.0"> <meta name="vs_defaultClientScript" content="JavaScript"> <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"> </HEAD> <frameset rows="0,*"> <frame src="about:blank"> <frame src="WebForm3.aspx"> </frameset> </HTML>
 
WebForm2.aspx.vb
 Public Class WebForm2 Inherits System.Web.UI.Page #Region " Web 窗体设计器生成的代码 " '该调用是 Web 窗体设计器所必需的。 <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent() End Sub Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init 'CODEGEN: 此方法调用是 Web 窗体设计器所必需的 '不要使用代码编辑器修改它。 InitializeComponent() End Sub #End Region Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load '在此处放置初始化页的用户代码 End Sub End Class
 

WebForm3.aspx

 <%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm3.aspx.vb" Inherits="ShowModalDialog.WebForm3" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <title>WebForm3</title> <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.0"> <meta name="CODE_LANGUAGE" content="Visual Basic 7.0"> <meta name="vs_defaultClientScript" content="JavaScript"> <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"> </HEAD> <body MS_POSITIONING="GridLayout" id="MyBody" runat="server"> <form id="Form1" method="post" runat="server"> <asp:Label id="Label1" runat="server">请输入您的大名:</asp:Label><br> <br> <asp:TextBox id="TextBox1" runat="server" Width="558"></asp:TextBox><br> <br> <asp:Button id="Button1" runat="server" Text=" 提 交 "></asp:Button> </form> </body> </HTML>
 
WebForm3.aspx.vb
 Public Class WebForm3 Inherits System.Web.UI.Page Protected WithEvents TextBox1 As System.Web.UI.WebControls.TextBox Protected WithEvents Label1 As System.Web.UI.WebControls.Label Protected WithEvents Button1 As System.Web.UI.WebControls.Button Protected MyBody As System.Web.UI.HtmlControls.HtmlControl #Region " Web 窗体设计器生成的代码 " '该调用是 Web 窗体设计器所必需的。 <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent() End Sub Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init 'CODEGEN: 此方法调用是 Web 窗体设计器所必需的 '不要使用代码编辑器修改它。 InitializeComponent() End Sub #End Region Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load '在此处放置初始化页的用户代码 If IsPostBack Then Dim strScript As String = "<script>" + vbCrLf strScript += "window.parent.returnValue='" + TextBox1.Text.Replace("'", "/'") + "'" + vbCrLf strScript += "window.parent.close()" + vbCrLf strScript += "</script>" + vbCrLf If (Not IsClientScriptBlockRegistered("clientScript")) Then RegisterClientScriptBlock("clientScript", strScript) End If End If If Not IsPostBack Then MyBody.Attributes.Add("onload", "document.Form1.TextBox1.value=window.parent.dialogArguments") End If End Sub End Class 
 

showModalDialog()、showModelessDialog()方法使用详解

 Javascript有许多内建的方法来产生对话框,如:window.alert(), window.confirm(),window.prompt().等。 然而IE提供更多的方法支持对话框。如:

  showModalDialog() (IE 4+ 支持)
  showModelessDialog() (IE 5+ 支持)


 window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框,由于是对话框,因此它并没有一般用window.open()打开的窗口的所有属性。
 window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。

 当我们用showModelessDialog()打开窗口时,不必用window.close()去关闭它,当以非模态方式[IE5]打开时, 打开对话框的窗口仍可以进行其他的操作,即对话框不总是最上面的焦点,当打开它的窗口URL改变时,它自动关闭。而模态[IE4]方式的对话框始终有焦点(焦点不可移走,直到它关闭)。模态对话框和打开它的窗口相联系,因此我们打开另外的窗口时,他们的链接关系依然保存,并且隐藏在活动窗口的下面。

使用方法如下:
 vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
 vReturnValue = window.showModelessDialog(sURL [, vArguments] [, sFeatures])
参数说明:
 sURL
 必选参数,类型:字符串。用来指定对话框要显示的文档的URL。
 vArguments
 可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
 sFeatures
 可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。
  dialogHeight 对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。
   dialogWidth: 对话框宽度。
   dialogLeft: 距离桌面左的距离。
   dialogTop: 离桌面上的距离。
   center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。
   help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。
   resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。
   status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
  scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默认为yes。

  还有几个属性是用在HTA中的,在一般的网页中一般不使用。
  dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。
  edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。
  unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。

 传入参数:
 要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象,例如:

 test1.htm
 ====================
 <script>
  var mxh1 = new Array("mxh","net_lover","孟子E章")
  var mxh2 = window.open("about:blank","window_mxh")
  // 向对话框传递数组
  window.showModalDialog("test2.htm",mxh1)
  // 向对话框传递window对象
  window.showModalDialog("test3.htm",mxh2)
 </script>

 test2.htm
 ====================
 <script>
  var a = window.dialogArguments
  alert("您传递的参数为:" + a)
 </script>

 test3.htm
 ====================
 <script>
  var a = window.dialogArguments
  alert("您传递的参数为window对象,名称:" + a.name)
 </script>

 可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象。例如:

 test4.htm
 ===================
 <script>
  var a = window.showModalDialog("test5.htm")
  for(i=0;i<a.length;i++) alert(a[i])
 </script>

 test5.htm
 ===================
 <script>
 function sendTo()
 {
  var a=new Array("a","b")
  window.returnValue = a
  window.close()
 }
 </script>
 <body>
 <form>
  <input value="返回" type=button onclick="sendTo()">
 </form>

 常见问题:
 1,如何在模态对话框中进行提交而不新开窗口?
 如果你 的 浏览器是IE5.5+,可以在对话框中使用带name属性的iframe,提交时可以制定target为该iframe的name。对于IE4+,你可以用高度为0的frame来作:例子,

 test6.htm
 ===================
 <script>
  window.showModalDialog("test7.htm")
 </script>

 test7.htm
 ===================
 if(window.location.search) alert(window.location.search)
 <frameset rows="0,*">
  <frame src="about:blank">
  <frame src="test8.htm">
 </frameset>

 test8.htm
 ===================
 <form target="_self" method="get">
 <input name=txt value="test">
 <input type=submit>
 </form>
 <script>
 if(window.location.search) alert(window.location.search)
 </script>
 2,可以通过http://servername/virtualdirname/test.htm?name=mxh方式直接向对话框传递参数吗?
 答案是不能。但在frame里是可以的。


                
<think>好的,我现在需要帮用户解决在JavaFX中点击按钮弹出页面,存储数据数据库,关闭子页面刷新主界面的问题。首先,我得理清楚整个流程。 用户的需求分几个步骤:点击按钮打开弹出页面输入数据保存到数据库,关闭弹出页面后,主界面自动查询数据刷新显示。我需要考虑如何实现弹窗、数据存储、以及关闭弹窗后的刷新机制。 首先,弹窗页面通常可以用Stage来实现,作为模态窗口,这样主窗口在弹窗关闭前无法操作。然后,数据存储部分需要数据库操作,比如使用JDBC或者ORM框架,比如Hibernate。不过用户可能希望一个简单的示例,所以先用JDBC示范。 接下来,关闭子页面刷新主界面,这里涉及到窗口间通信。可能的方法包括在子窗口关闭时触发主窗口刷新方法,或者使用事件监听机制。比如,主窗口监听子窗口的关闭事件,一旦关闭,就执行查询和刷新操作。 另外,JavaFX中的控件布局和事件处理需要正确设置。按钮的事件处理器里创建新的Stage,设置Scene,显示。子窗口可能需要传递主窗口的引用,以便在关闭时调用主窗口的方法。 数据库操作部分需要确保在后台线程执行,避免阻塞UI线程,否则界面会卡顿。JavaFX的Service和Task类可以用来处理后台任务,更新UI则通过Platform.runLater()方法。 现在,我需要把这些步骤整合成一个连贯的示例代码。可能的结构是: 1. 主界面有一个按钮和一个TableView用于显示数据。 2. 点击按钮打开子窗口输入数据点击保存,将数据插入数据库。 3. 子窗口关闭后,主窗口自动刷新表格数据。 在代码中,主窗口的控制器需要有一个刷新数据的方法,比如refreshTable(),该方法从数据库读取最新数据更新TableView。子窗口的控制器在保存数据后关闭窗口通知主窗口刷新。 关于窗口间的通信,可以使用回调函数或者传递主控制器实例到子控制器中。例如,当创建子窗口时,将主控制器的引用传递给子控制器,这样在保存数据后,子控制器可以调用主控制器的refreshTable()方法。 还需要处理异常情况,比如数据库连接失败,或者输入数据验证。但用户可能首先需要一个基础实现,后续再考虑优化。 最后,确保代码符合JavaFX的最佳实践,比如使用FXML加载界面,分离逻辑和视图。不过用户可能希望一个简洁的示例,所以可能会用纯代码的方式,或者混合FXML。 总结步骤: 1. 主界面布局,包含按钮和表格。 2. 按钮点击事件打开子窗口。 3. 子窗口输入数据,保存到数据库。 4. 子窗口关闭时触发主界面刷新。 5. 主界面查询数据更新表格。 现在需要将这些写成代码示例,解释每一步的关键点,比如Stage的模态设置,数据库操作,线程处理,以及刷新机制。</think>在JavaFX中实现点击按钮弹出页面存储数据在关闭后刷新主界面,可以按照以下步骤进行: ### 一、实现步骤 1. **主界面搭建** 使用`TableView`展示数据,`Button`触发弹窗操作 2. **弹窗页面创建** 新建`Stage`设置为模态窗口,包含数据输入控件和提交按钮 3. **数据库交互** 使用JDBC实现数据存储功能,建议在独立线程中执行 4. **刷新机制** 通过窗口关闭监听事件触发主界面数据刷新 ### 二、核心代码示例 ```java // 主界面控制器 public class MainController { @FXML private TableView<DataModel> dataTable; // 初始化时加载数据 public void initialize() { refreshTable(); } // 打开弹窗事件 @FXML private void openPopup() throws IOException { FXMLLoader loader = new FXMLLoader(getClass().getResource("popup.fxml")); Parent root = loader.load(); // 获取子控制器设置回调 PopupController popupController = loader.getController(); popupController.setRefreshCallback(this::refreshTable); Stage stage = new Stage(); stage.initModality(Modality.APPLICATION_MODAL); stage.setScene(new Scene(root)); stage.showAndWait(); } // 刷新表格数据 public void refreshTable() { Task<List<DataModel>> task = new Task<>() { @Override protected List<DataModel> call() throws Exception { return DatabaseUtil.queryData(); // 数据库查询方法 } }; task.setOnSucceeded(e -> { dataTable.getItems().setAll(task.getValue()); }); new Thread(task).start(); } } // 弹窗控制器 public class PopupController { private Runnable refreshCallback; public void setRefreshCallback(Runnable callback) { this.refreshCallback = callback; } @FXML private void saveData() { // 创建后台任务 Task<Void> task = new Task<>() { @Override protected Void call() throws Exception { DatabaseUtil.saveData(...); // 数据库存储方法 return null; } }; // 设置成功回调 task.setOnSucceeded(e -> { ((Stage) submitButton.getScene().getWindow()).close(); if(refreshCallback != null) { Platform.runLater(refreshCallback); } }); new Thread(task).start(); } } ``` ### 三、关键技术点 1. **模态窗口** 使用`stage.initModality(Modality.APPLICATION_MODAL)`确保弹窗获得焦点[^2] 2. **线程安全** 数据库操作在`Task`中执行,UI更新通过`Platform.runLater()`实现 3. **回调机制** 通过函数式接口实现子窗口到主窗口的通信 4. **数据绑定** TableView应使用`ObservableList`实现自动刷新 ### 四、数据库工具类示例 ```java public class DatabaseUtil { public static void saveData(DataModel data) throws SQLException { String sql = "INSERT INTO table_name (...) VALUES (...)"; try (Connection conn = DriverManager.getConnection(DB_URL); PreparedStatement pstmt = conn.prepareStatement(sql)) { // 设置参数... pstmt.executeUpdate(); } } public static List<DataModel> queryData() { // 实现查询逻辑... } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值