[ASP.NET & JavaScript] 開新視窗並在子視窗觸發父視窗的事件

2009-12-29

44812
0

因為常常會做到父子視窗要互動的這類需求，因此用個小小範例作整理～

GetStart:

新增一個 ASP.NET AJAX-Enabled Web Application Projects.

若新增專案時沒有此項目可以選，可以選擇安裝 ASP.NET 2.0 AJAX Extensions 1.0

或者新增一般專案，再將 System.Web.Extensions.dll 組件加入至專案參考中。

這是為了要使用 ScriptManager類別來註冊JavaScript指令碼。

【父視窗】

※頁面上放置兩個按鈕


 <asp:Button ID="OpenBtn" runat="server" Text="另開一視窗" />        

 <asp:Button ID="TestBtn" runat="server" Text="由子視窗觸發此按鈕" OnClick="TestBtn_Click" />

※放置一個 Label 控制項，顯示執行狀態用


<asp:Label ID="Label1" runat="server"></asp:Label>

※放置一個 HiddenField ，將 ClientID 傳給子頁面，就可以在子頁面設定value


 <asp:HiddenField ID="hiddenReload" runat="server" />

※在 Page_Load 註冊新開視窗的 JavaScript 到 OpenBtn 的 OnClientClick 事件。並傳遞 HiddenReloadWindow 參數，其值為 HiddenField 的 ClientID


protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
          
            string strJavaScript = string.Empty;
            strJavaScript = "window.open('OpenPage.aspx?HiddenReloadWindow=" + this.hiddenReload.ClientID + "','OpenPage123','height=450,width=450,top=300,left=300,scrollbars=yes');";
            this.OpenBtn.OnClientClick = strJavaScript;
        }

    }

window 的open( ) 語法：

基本格式是：

window.open("URL");

另外一種呼叫格式可以設定視窗的外觀：

windows.open( " URL " , " 視窗名稱 " , " 視窗外觀之設定 ");

視窗外觀的設定有以下幾個指令，每個設定值以「,」分隔。

要注意「,」之後不能有空白，否則 JS 會認為指令碼結束，而造成錯誤。

width=pixels	視窗的『寬度』
height=pixels	視窗的『高度』
toolbar=yes / no	是否顯示『工具列』
location=yes / no	是否顯示『位址欄位』
directories=yes / no	是否顯示『目錄列』
status=yes / no	是否顯示『狀態列』
menubar=yes / no	是否顯示『功能表』
scrollbars=yes / no	是否顯示『捲動軸』
resizable=yes / no	是否『可以調整大小』

※在 Page_Load 撰寫以下程式碼，在頁面載入時，判斷 HiddenField 的值是否被子頁面所改變，並以 Label Control 顯示狀態。


        if (this.hiddenReload.Value != "")
        {
            if (this.hiddenReload.Value == "reload")
            {
                Label1.Text = "子視窗觸發頁面重整！";
            }
            else if (this.hiddenReload.Value == "close")
            {
                Label1.Text = "子視窗關閉！";
            }

           

            this.hiddenReload.Value = "";
        }

※按鈕 TestBtn 的 Click 事件


    protected void TestBtn_Click(object sender, EventArgs e)
    {
        Label1.Text =  "Button Click() ";
    }

【子視窗】

※在子視窗分別放置三個按鈕，做關閉視窗、重載父頁面、執行父頁面按鈕 Click 事件等事情


 <asp:Button ID="CloseBtn" runat="server" Text="關閉視窗" OnClick="CloseBtn_Click" />

 <asp:Button ID="ParentReloadBtn" runat="server" Text="讓父視窗重新整理" OnClick="ParentReloadBtn_Click"/>

 <asp:Button ID="CallParentTestBtn" runat="server" Text="按父視窗的測試按鈕" OnClick="CallParentTestBtn_Click"/>

※關閉視窗按鈕事件


protected void CloseBtn_Click(object sender, EventArgs e)
{
        ScriptManager.RegisterStartupScript(this, this.GetType(), "WindowClose", "window.close();", true);

}

※重載父頁面事件


    protected void ParentReloadBtn_Click(object sender, EventArgs e)
    {
        //修改HiddenReloadWindow的值，並使父視窗submit，以重載父頁面
        string hidReload = this.Page.Request["HiddenReloadWindow"].ToString();

        ScriptManager.RegisterStartupScript(this, this.GetType(), "OpenerWindowReload", "window.opener.document.all['" + hidReload + "'].value='Y'; window.opener.document.forms[0].submit(); ", true);

    }

※執行父頁面按鈕 Click 事件


    protected void CallParentTestBtn_Click(object sender, EventArgs e)
    {
        string js = "window.opener.document.getElementById('TestBtn').click();";
       
        ScriptManager.RegisterStartupScript(this, this.GetType(), "ParentButtonClick", js, true);

    }

【執行畫面】

1. 初始畫面

2.按下「另開一視窗」按鈕。開啟一頁新視窗。

3.按下新開視窗的「按父視窗的測試按鈕」，執行父視窗的「TestBtn_Click」事件。

4.按下新開視窗的「讓父視窗重新整理」，父視窗將會重新載入頁面。

5.關閉視窗（結合重載父頁面事件的處理方式）

→

檔案下載→ OpenWindowAndReload.rar

回首頁