ここでは、ASP.NET の Calender コントロールを使用したポップアップカレンダーのサンプルコードを掲載しています。
スポンサーリンク
親フォーム
親フォームはテキストボックスコントロールとボタンコントロールが配置されているものとします。ボタンクリックで子フォーム ( Calender コントロールのみ ) を開き、子フォームで選択された日付を親フォームのテキストボックスに設定します。以下が親フォームのサンプルコードになります。
VB.NET
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 'HTML要素のIDを取得 Dim id As String = TextBox1.ClientID Dim opt As String = "height=350,width=350,dependent=yes,location=no,menubar=no," + _ "scrolbars=no,toolbar=no,status=no" 'ポップアップカレンダーを開くスクリプトを作成 Dim script As String = "var url = 'Calendar.aspx?id={0}&date=' + getElementById('{0}').value;" + _ "window.open(url,'_blank', '{1}'); return false;" script = String.Format(script, id, opt) ' onclick 属性にスクリプトを設定する Button1.Attributes.Add("onclick", script) End Sub
C#
protected void Page_Load(object sender, EventArgs e) { //HTML要素のIDを取得 string id = TextBox1.ClientID; string opt = "height=350,width=350,dependent=yes,location=no,menubar=no," + "scrolbars=no,toolbar=no,status=no"; //ポップアップカレンダーを開くスクリプトを作成 string script = "var url = 'Calendar.aspx?id={0}&date=' + getElementById('{0}').value;" + "window.open(url,'_blank', '{1}'); return false;"; script = String.Format(script, id, opt); // onclick 属性にスクリプトを設定する Button1.Attributes.Add("onclick", script); }
子フォーム ( Calender コントロールのみ )
子フォームは Calender コントロールのみを持ちます。window.opener で親フォームのテキストボックスコントロールに値を設定しています。詳細はコメントを参照ください。
VB.NET
'ページロード Protected Sub Page_Load(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles Me.Load If IsPostBack = True Then Return End If ' GETパラメータの日付を初期表示する Dim dateParam As DateTime DateTime.TryParse(Request.QueryString("date"), dateParam) Calendar1.VisibleDate = dateParam Calendar1.SelectedDate = dateParam End Sub ' 日付が選択された Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, _ ByVal e As EventArgs) _ Handles Calendar1.SelectionChanged '選択された日付を保持 Dim sDate As String = Calendar1.SelectedDate.ToString("d") '変更する子フォームの要素(ID)を取得 Dim id As String = Request.QueryString("id") '親フォームの要素を変更するスクリプトを作成 Dim script As String script = "if(!window.opener || window.opener.closed) {" + _ " window.close();" + _ "} else { " + _ " window.opener.document.getElementById('" + id + "').value = '" + sDate + "';" + _ " window.close();" + _ "}" ClientScript.RegisterClientScriptBlock(Me.GetType(), "calendar", script, True) End Sub
C#
protected void Page_Load(object sender, EventArgs e) { if (IsPostBack == true) { return; } // GETパラメータの日付を初期表示する DateTime dateParam; DateTime.TryParse(Request.QueryString["date"], out dateParam); Calendar1.VisibleDate = dateParam; Calendar1.SelectedDate = dateParam; } protected void Calendar1_SelectionChanged(object sender, EventArgs e) { //選択された日付を保持 string sDate = Calendar1.SelectedDate.ToString("d"); // 変更する子フォームの要素(ID)を取得 string id = Request.QueryString["id"]; // 親フォームの要素を変更するスクリプトを作成 string script; script = "if(!window.opener || window.opener.closed) {" + " window.close();" + "} else { " + " window.opener.document.getElementById('" + id + "').value = '" + sDate + "';" + " window.close();" + "}"; ClientScript.RegisterClientScriptBlock(this.GetType(), "calendar", script, true); }
ポイント
- ClientScript.RegisterClientScriptBlock
ClientScript.RegisterClientScriptBlock メソッドによる Javascript の実行については『 [ ASP.NET ] ボタンクリック時に動的に埋め込んだ Javascript を実行する 』でまとめてありますのでご確認ください。
- TextBox.ClientID
サンプルでは、GET メソッドで親フォームから子フォームへテキストボックスの ID を渡しています。渡すのは、TextBox.ID プロパティではなく TextBox.ClientID です。Javascript により子フォームから親フォームの要素を変更するため必要なものは、ASP.NET 側で管理している ID ではなく、出力された HTML の ID 属性です。ASP.NET では HTML に出力された要素の ID 属性は ClientID プロパティによって取得できます。
ASP.NET4 からは、『 Control.ClientID プロパティ 』の記載があるように、サーバ側とクライアント側で管理する ID を同一にする設定などが、ClientIDMode プロパティを使用してできるようになっています。ただし、モードの設定に依存するので、不安要素がある場合(設計変更など)には、適切に使い分けておいたほうが良いかもしれません。