.NET同一个页面父容器与子容器通信方案

主界面:

关键主页面代码:

    <div id="EditDiv">
        <iframe src="javascript:void(0)" id="editFrame" width="100%" height="100%" frameborder="0"></iframe>
    </div>

---------------以下js脚本(关键代码)-----------
        //绑定修改的超链接
        function bindEditLinkClickEvent() {
            $(".editLink").click(function () {
                var newsId = $(this).attr("newsId");                
                //getNews2EditForm(newsId); //从后台加载数据然后把数据放到修改文本框上去
                //弹出对话框之前,把iframe标签的src属性设置成修改页面地址
                $("#editFrame").attr("src", "EditNews.aspx?id="+newsId);
                showEditDialog(); //弹出编辑div
            });
        };

        //弹出编辑div
        function showEditDialog() {
            $("#EditDiv").css("display", "block");
            $("#EditDiv").dialog({
                title: "修改对话框",
                width: 500,
                height: 500,
                modal: true,
                collapsible: true,
                minimizable: true,
                maximizable: true,
                resizable: true,
                buttons: [{
                    text: "修改",
                    iconCls: "icon-add",
                    handler: submitChildEditFrm
                }, {
                    text: "关闭",
                    iconCls: "icon-cancel",
                    handler: function () {
                        $("#EditDiv").dialog("close");
                    }
                }]
            });
        }

        //异步提交子页面的表单
        function submitChildEditFrm() {
            //先拿到子容器的windows对象,并调用子容器的js函数
            var domFrame = $("#editFrame")[0];
            domFrame.contentWindow.submitFrm();
        };

 子容器代码:

    <form id="form1" runat="server">
    <div>
        <input type="hidden" name="id" value="<%=News.id %>" id="id" />
        <table>
            <tr>
                <td>新闻标题</td>
                <td><input type="text" name="title" id="txtTitle" value="<%=News.title %>" /></td>                    
            </tr>
            <tr>
                <td>新闻内容</td>
                <td><input type="text" name="contents" id="txtContent" value="<%=News.contents %>" /></td>
            </tr>
        </table>
    </div>
    </form>

//-----以下JS脚本-------
    <script src="../Script/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        function submitFrm() {
            //让表单整体异步的提交后台。
            var postData = $("#form1").serializeArray();
            $.ajax({
                url: "EditNews.aspx",
                type: "post",
                dataType: "json",
                data: postData,
                success: function (data) {
                    if (data.success == "ok") {
                        alert("修改成功!");
                        //关闭父容器的对话框,刷新父容器的表格
                        window.parent.window.afterEditSuccess();
                    } else {
                        alert("修改失败!")
                    }
                },
                error: function (err)
                {
                    alert(err);
                }
            });
        }
    </script>

搞定~~

posted @ 2019-07-10 20:29  陈彦斌  阅读(273)  评论(0编辑  收藏  举报