您的当前位置：首页正文

父子頁面交互操作

2024-11-09 来源：个人技术集锦

一、在父界面寫一個JS方法打開並獲取子界面的信息顯示到父界面中：

function OpenNewWindow() {

//TestBack指要打開的子界面

var obj = window.showModalDialog("TestBack", window, "dialogHeight =350px;dialogWidth =400px;help=no;status=no;");

document.getElementById("Productno").value = obj["c1"]["Productno"];

document.getElementById("Seqno").value = obj["c1"]["Seqno"];

//以下是子界面傳一個值的情況下用

// document.getElementById("Seqno").value = obj;

}

</script>

單擊某個按鈕調用以上函數：
<input type="button" id="Test" οnclick="OpenNewWindow()" value="Test" runat="server"/>

二、在子界面中寫一個JS方法傳信息給父界面並關閉窗口：

function closeD() {

//返回一個值

// window.returnValue = document.getElementById("Productno").value;

// 返回多個值

var Productno = document.getElementById("Productno").value;

var Seqno = document.getElementById("Seqno").value;

var ht =

{

"c1":

{

"Productno": Productno,

"Seqno": Seqno

}

};

window.returnValue = ht;

window.close();

}

</script>

子界面中單擊某個按鈕調用以上函數：

參考網站：

：

http://www.blogjava.net/xlth2006/archive/2009/12/15/306065.html

showModalDialog的用法：

http://baike.baidu.com/view/2813452.htm

http:///wcfboy1/article/details/2842678

以下是在MVC3從父窗口單擊表格中的文本框後跳出一個子窗口，並將文本中的內容傳到子窗口被使用（如：多選框時，默認被選中），然後在子窗口做完動作後再將值傳到父窗口的文本中的例子：
1、父窗口：
JS腳本：
    function OpenNewWindow(i) {
        var myObject=document.getElementById(i).value;
        var obj = window.showModalDialog("http://localhost:61981/VendorGrid/docList", myObject, "dialogHeight =350px;dialogWidth =400px;help=no;status=no;");
        if (obj != undefined || obj!=null) {
            document.getElementById(i).value = obj;
        }
    }

文本框：

2、子窗口：

@model QP.Model.DataWindow.VendorGridArgumentViewModel

           @using QP.Web.Render
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>docList</title>
    <base target="_self">
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
     <script type="text/javascript">
         $(function () {
             $("#OK").click(function () {
                 var docAll = null;
                 $("input[name=check]").each(function () {
                     if ($(this).attr("checked")) {
                         var doc = $(this).val();
                         if (doc != null) {
                             if (docAll == null)
                                 docAll = doc;
                             else
                                 docAll = docAll + "," + doc;
                         }
                     }

                 });
                 window.returnValue = docAll;
                 window.close();
             });
         });

         function onLoads() {
             var a = window.parent.dialogArguments;
             if (a.length > 0) {
                 var docList = a.split(",");
                 for (var i = 0; i < docList.length ; i++) {
                     docValue(docList[i]);
                 }
             }

         }
         //將已被選擇的信息在此默認勾上
         function docValue(docList) {
             //獲得界面中多選框的個數
             var count = document.getElementById("count").value;
             for (var i = 1; i <= count; i++) {
                 if (document.getElementById(i).checked == false) {
                     var doc = document.getElementById(i).value;
                     if (doc == docList) {
                         document.getElementById(i).checked = true;
                     }
                 }
             }
         }
         function Cancel() {
             window.close();

         }

         /*
        function isOk() {
            //返回一個值
            var docAll = null;
            var count = document.getElementById("count").value;
            for (var i = 1; i <= count; i++)
            {
                //將被選中的內容用,分開放到一個變量中傳到父窗口中
                if (document.getElementById(i).checked == true)
                {
                    var doc = document.getElementById(i).value;
                    if (doc != null)
                    {
                        if (docAll == null)
                            docAll = doc;
                        else
                            docAll = docAll + "," + doc;
                    }
                }
            }

            window.returnValue =docAll;
            window.close();
        }
        */
    </script>

</head>
<body οnlοad="onLoads()">
    <div>
        <p>請選擇：</p>

        @{
            IEnumerable<QP.Model.DataWindow.VendorGridEntity> list = ViewData["_docList_"] as IEnumerable<QP.Model.DataWindow.VendorGridEntity>;
            if (list != null)
            {

                <input type="hidden" id="count" name="count" value=@list.Count() />
            var i = 1;
                foreach (var doc in list)
                {

                   <input type="checkbox" name="check" id=@i value=@doc.Venno >@doc.Venno</input><br/>
                    i=i+1;
                }
            }
        }
    </div>
    <div>
        <input type="submit" id="OK" value="確定" style="width: 40px; height: 20px; font-size: 11px;" />  
        <input type="button" value="取消" style="width: 40px; height: 20px; font-size: 11px;" οnclick="Cancel()" />
    </div>
</body>
</html>

3、在對應的Controller中打開子窗口的方法

  public ActionResult docList()
        {
            QP.Utils.Web.DalHelper.SafeBox(db =>
            {

                IEnumerable<VendorGridEntity> docList = (from v in db.Load<VendorGridEntity>()
                                                            orderby v.Venno
                                                            select v).Distinct();

               // IEnumerable<VendorGridEntity> docList = db.Load<VendorGridEntity>();此方法一樣可以實現，但是此方法的效率比上面的方法低。
                ViewData["_docList_"] = docList;
                return db.DBI.LastResult;
            });
            return View();
        }