<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>
原文:https://www.cnblogs.com/chenyanbin/p/11166294.html