前置き
* 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
