zoukankan      html  css  js  c++  java
  • .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: "修改对话框",
                     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>

    搞定~~

  • 相关阅读:
    多级联动系列——数组二级联动
    WebSocket初探
    8大最有气质的网络公司
    Quartz中时间表达式的设置-----corn表达式
    Servlet页面间对象传递的方法
    LSPCI具体解释分析
    CREATE PROCEDURE
    php实现工厂模式
    sql语法:inner join on, left join on, right join on具体用法
    C++虚函数表调用学习
  • 原文地址:https://www.cnblogs.com/chenyanbin/p/11166294.html
Copyright © 2011-2022 走看看