[個人筆記] ASP.NET搭配JavaScript做日期開窗

2010-10-28

5166
0
WebDevelop

一共會有三個頁面：主頁面、開窗1、開窗2

主頁頁面JavaScript：

	   1:      <script type="text/javascript">

	   2:          function choiceDate(id) {

	   3:              var returnValue = window.showModalDialog("開窗1", id);

	   4:              document.getElementById(id).value = returnValue;

	   5:              document.getElementById(id).blur();

	   6:          }

	   7:      </script>

主頁Behind Code：

	   1:          protected void Page_Load(object sender, EventArgs e)

	   2:          {

	   3:              BtnDate.Attributes.Add("onclick", @"choiceDate('txtDate');");

	   4:              txtDate.Attributes.Add("onclick", @"choiceDate('txtDate');");

	   5:          }

主頁的作法就是在頁面讀取時註冊onclick事件觸發JavaScript來開啟"開窗1"頁面，id傳入帶回值顯示的TextBox控件(txtDate)，並且於JavaScript使之blur()以消除控件Focus狀態，因為TextBox設定ReadOnly會無法帶回值，所以在TextBox被點選時也觸發開窗事件，並於帶回值後消除Focus狀態。

開窗1頁面JavaScript：

	   1:      <script id="clientEventHandlersJS" language="javascript">

	   2:          function IFRAME_onblur() { }

	   3:      </script>

開窗1頁面Html：

	   1:  <iframe frameborder="no" src=開窗2' style="width: 480px; height: 450px"

	   2:          id="IFRAME" language="javascript" onblur="return IFRAME_onblur()"></iframe>

開窗1的用途在於作為開窗2的容器，可以避免其被點選日期時觸發開窗。

開窗2Behind Code：

	   1:          protected void Calendar_SelectionChanged(object sender, EventArgs e)

	   2:          {

	   3:              Response.Write("<script language=javascript>window.returnValue='" + CalendarControl.SelectedDate.ToLongDateString() + "';window.close();</script>");

	   4:          }

在日曆點選日期的時候就會觸發傳值回主頁，並且關閉頁面。

參考網站：http://www.haoxiai.net/wangzhanzhizuo/aspnet/53755.html

回首頁