danny的學習世界

動機是學習的推手,分享是學習的調味

2009-02-02

showModalDialog 的使用

在專案開發中使用到 開窗查詢回傳值的功能,使用了 ShowModalDialog 的Method,在子視窗中回傳值到原查詢視窗遇到了一些狀況

在專案開發中使用到 開窗查詢回傳值的功能,使用了 ShowModalDialog 的Method,在子視窗中回傳值到原查詢視窗遇到了一些狀況

做法為：

1)將查詢視窗中要承接值的物件ID 傳給子視窗

2)在子視窗中將值assign 給查詢視窗,闗閉子視窗

PS、重點在於 GetQuery.aspx  中的 <base target="_self" /> ,避免子視窗按Button 時會再開另一視窗

主頁面

SendQuery.aspx

 


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SendQuery.aspx.cs" Inherits="SendQuery" %>

<!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">
    <title></title>
</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>

.CS檔

 


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class SendQuery : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string Js= @"function openWin(srcUrl)
            {
                //srcUrl  指定子視窗URL
                 var winFeatures = ""dialogHeight:550px; dialogLeft:450px;""; 

                window.showModalDialog(srcUrl, form1, winFeatures);
            }";

        Page.ClientScript.RegisterStartupScript(this.GetType(), "SendQueryJS", Js, true);
        Button1.Attributes["onclick"] = "openWin('GetQuery.aspx?ObjID="+ TextBox1.ClientID +"')";
    }
}

子視窗

GetQuery.aspx

 


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GetQuery.aspx.cs" Inherits="GetQuery" %>

<!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">
<base target="_self" />
   <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:Label ID="Label1" runat="server" Text="查詢視窗"></asp:Label>
        <br />
        <asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="回傳值" onclick="Button1_Click" />
        <br />
        <asp:Button ID="Button2" runat="server" Text="顯示母視窗物件" 
            onclick="Button2_Click" />
        <asp:Label ID="Label2" runat="server" Text=""></asp:Label>    
    </div>
    </form>
</body>
</html>

.cs檔

 


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class GetQuery : System.Web.UI.Page
{
    string SendObjID = string.Empty;
    string RunJS = string.Empty;

    protected void Page_Load(object sender, EventArgs e)
    {
        SendObjID = Request["ObjID"].ToString();
        Page.ClientScript.RegisterClientScriptInclude("SendQueryJS","Query.js");
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        RunJS = "<script type=\"text/javascript\" language=\"JavaScript\">setValue('" + SendObjID + "','" + TextBox1.Text + "');</script>";
    }

    protected void Page_PreRender(object sender, EventArgs e)
    {
        if (RunJS.Length > 0)
        {
            Page.ClientScript.RegisterStartupScript(Page.GetType(), "LoadScript", RunJS);
        }
    }

    protected void Button2_Click(object sender, EventArgs e)
    {
        RunJS = "<script type=\"text/javascript\" language=\"JavaScript\">ShowValue();</script>";
    }
}

Query.js


//開窗回傳值 直接給值
function setValue(SendID, ObjValue) {

    var pWindow = window.dialogArguments;
    pWindow.document.getElementById(SendID).value = ObjValue;
    window.close();
}

function ShowValue() {
    //取得前一頁傳來的物件，是一個Form 的ID
    var myObj = window.dialogArguments;
    var ltl = document.getElementById('Label2');
    var strOut;
    //ShowValue
    for (var obj in myObj) {
        strOut = strOut + 'window.' + obj + '<BR />';
    }
    ltl.innerHTML = strOut;
}

系列文章