前置き
* ASP.NETでshowModalDialog()を利用したモーダルの子画面ダイアログを表示し、画面間で値を受け渡す。 * その際、できる限りポストバックは避けるようにする。
サンプル1
* 以下にあるようにwindow.showModalDialog()の第2パラメタを利用するhttp://d.hatena.ne.jp/replication/20100117/1263694945
親画面・デザイン:SampleMain.aspx
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="SampleMain.aspx.vb" Inherits="VBTestSite.SampleMain" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="">http://www.w3.org/1999/xhtml"> <head runat="server"> <script type="text/javascript" src="JScript1.js"></script> <title></title> <base target="_self" /> </head> <body> <form id="form1" runat="server"> <div> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" Text="Button" /> </div> </form> </body> </html>
親画面・コードビハインド:SampleMain.aspx.vb
Public Class SampleMain Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load ' ★ポイント1(重要)★ ' 最後に「return false;」とすること。 ' さもないとポストバックしてしまう Me.Button1.OnClientClick = _ "showModal('" & Me.TextBox1.ClientID & _ "'); setData('" & Me.TextBox1.ClientID & "'); return false;" End Sub End Class
子画面・デザイン:SampleModal.aspx
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="SampleModal.aspx.vb" Inherits="VBTestSite.SampleModal" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="">http://www.w3.org/1999/xhtml"> <head runat="server"> <script type="text/javascript" src="JScript1.js"></script> <title></title> <!-- ★ポイント2(超重要)★ 「<base target="_self" />」を追記する。 詳細は、「http://d.hatena.ne.jp/fyts/20071107/asp」を参照のこと。 --> <base target="_self" /> </head> <body onload="init('<%= TextBox1.ClientID %>');"> <form id="form1" runat="server"> <div> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" Text="Button" /> </div> </form> </body> </html>
子画面・デザイン:SampleModal.aspx.vb
Public Class SampleModal Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Me.Button1.OnClientClick = "closeModal('" & Me.TextBox1.ClientID & "');" End Sub End Class
JScript1.js
var SampleClassData = function (name) { this.name = name; } function showModal(targetID) { var textObj = document.getElementById(targetID); var textValue = textObj.value; if (SampleClassData != null) { SampleClassData.name = textValue; } else { SampleClassData = new SampleClassData(textValue); } window.dialogArguments = SampleClassData; window.showModalDialog( "SampleModal.aspx", window, "dialogWidth=400px;dialogHeight=300px"); } function init(targetID) { var args = window.dialogArguments.dialogArguments; SampleClassData = args; var textObj = document.getElementById(targetID); textObj.value = SampleClassData.name; } function closeModal(targetID) { var textObj = document.getElementById(targetID); SampleClassData.name = textObj.value; self.close(); } function setData(targetID) { var textObj = document.getElementById(targetID); if (SampleClassData != null && SampleClassData.name != null) { textObj.value = SampleClassData.name; } }
参考文献
http://d.hatena.ne.jp/fyts/20071107/asphttp://park14.wakwak.com/~kimihiko/web-maniacs/javascript/modal/002/index.html