[ASP.NET] 使用 JavaScript 開新視窗跨網頁回傳資料方法

摘要:[VB] ASP.NET 使用 JavaScript 開新視窗跨網頁回傳資料方法

前言


在專案中開新視窗顯示資料是蠻常用到的功能,延伸而來就會有需要將新視窗的資料帶回主視窗的情況,

新視窗回傳值的方法可以參考以下範例。

 

範例


Step 1

主視窗頁面:

<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#Button1").click(function () {
                window.open('SubMain.aspx?SrcCtl=TextBox1&SrcForm=form1&SrcType=1',
                            'NewWindows',
                            'height=230,width=120px,status=no,toolbar=no,menubar=no,location=no,top=150,left=150);');
                return false;
            });
            $("#Button2").click(function () {
                window.open('SubMain.aspx?SrcCtl=TextBox1&SrcForm=form1&SrcType=2',
                            'NewWindows',
                            'height=230,width=120px,status=no,toolbar=no,menubar=no,location=no,top=150,left=150);');
                return false;
            });
            $("#Button3").click(function () {
                window.open('SubMain.aspx?SrcCtl=TextBox1&SrcForm=form1&SrcType=3',
                            'NewWindows',
                            'height=230,width=120px,status=no,toolbar=no,menubar=no,location=no,top=150,left=150);');
                return false;
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True" 
            ontextchanged="TextBox1_TextChanged"></asp:TextBox>
        <br />
        <asp:Button ID="Button1" runat="server" Text="開新視窗帶回值" />
        <asp:Button ID="Button2" runat="server" Text="開新視窗帶回值並重Load畫面" />
        <asp:Button ID="Button3" runat="server" Text="開新視窗帶回值並PostBack畫面" />
        <br />
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </div>
    </form>
</body>

主視窗的 Script Url 參數說明:

  • SrcCtl: 之後要接收回傳值的 Control Client ID
  • SrcForm: 本頁的Form ID
  • SrcType: 子頁面接收判斷的參數,真正使用上可以不用

Step 2

子視窗程式碼:

public partial class SubMain : System.Web.UI.Page
{
    string srcCtl = "";
    string srcForm = "";
    string srcType = "";
    protected void Page_Load(object sender, EventArgs e)
    {
        srcCtl = Request.Params["SrcCtl"];
        srcForm = Request.Params["SrcForm"];
        srcType = Request.Params["SrcType"];
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        ReturnOpener();
    }

    public void ReturnOpener()
    {
        string jsStr = "";
        switch (srcType)
        {
            case "1":
                jsStr += "window.opener." + srcForm + "." + srcCtl + ".value = ";
                jsStr += "window.opener." + srcForm + "." + srcCtl + ".value = form1." + TextBox1.ClientID + ".value; ";
                jsStr += "window.close();";
                ClientScript.RegisterStartupScript(this.GetType(), "ret", jsStr, true);
                break;
            case "2":
                jsStr += "window.opener." + srcForm + "." + srcCtl + ".value = ";
                jsStr += "window.opener." + srcForm + "." + srcCtl + ".value = form1." + TextBox1.ClientID + ".value; ";
                jsStr += "window.close();";
                jsStr += "self.opener.location.reload();";
                ClientScript.RegisterStartupScript(this.GetType(), "ret", jsStr, true);
                break;
            case "3":
                jsStr += "window.opener." + srcForm + "." + srcCtl + ".value = ";
                jsStr += "window.opener." + srcForm + "." + srcCtl + ".value = form1." + TextBox1.ClientID + ".value; ";
                jsStr += "window.close();";
                jsStr += "self.opener." + srcForm + ".submit();";
                ClientScript.RegisterStartupScript(this.GetType(), "ret", jsStr, true);
                break;
            default:
                break;
        }
    }
}

子視窗說明:

當接收到主視窗URL時將參數取得 ,當子視窗按鈕觸發時註冊JavaScript關閉本頁將參數帶回主頁。

 

範例程式碼:


TOpenWinReturnParam.rar

 

 


以上文章敘述如有錯誤及觀念不正確,請不吝嗇指教
如有侵權內容也請您與我反應~謝謝您 :)