<div id="EditDiv">
<iframe src="javascript:void(0)" id="editFrame" width="100%" height="100%" frameborder="0"></iframe>
</div>
--------------- The following js script (key codes) -----------
// Bind modify hyperlinks
function bindEditLinkClickEvent() {
$(".editLink").click(function () {
var newsId = $(this).attr("newsId");
// getNews2EditForm (newsId); // data from the background and loading the data into the text box up modifications
// before the dialog box, the tag iframe src attribute is set to modify the page address
. $ ( "# editFrame") attr ( "src", "? EditNews.aspx the above mentioned id =" + newsid);
showEditDialog (); // pop edit div
});
};
// pop edit div
function showEditDialog() {
$("#EditDiv").css("display", "block");
$("#EditDiv").dialog({
title: "Modify dialog"
width: 500,
height: 500,
modal: true,
collapsible: true,
minimizable: true,
maximizable: true,
resizable: true,
buttons: [{
text: "Edit"
iconCls: "icon-add",
handler: submitChildEditFrm
}, {
text: "closed"
iconCls: "icon-cancel",
handler: function () {
$("#EditDiv").dialog("close");
}
}]
});
}
// asynchronous sub-page form is submitted
function submitChildEditFrm() {
// get the first child container objects windows and call the child container js function
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>
The following JS script // ----- -------
< Script src = "../ Script / jQuery-3.4.1.js" > </ Script >
< Script of the type = "text / JavaScript" >
function submitFrm () {
// let the whole asynchronous form submission background.
var postData = $ ( " # Form1 " ) .serializeArray ();
$.ajax({
url: "EditNews.aspx",
type: "post",
dataType: "json",
data: postData,
success: function (data) {
if (data.success == "ok") {
Alert ( " modified successfully! " );
// close the dialog box's parent container, refresh the parent container table
window.parent.window.afterEditSuccess ();
} else {
Alert ( " modification failed! " )
}
},
error: function (err)
{
alert(err);
}
});
}
</script>