ASP.NET頁面借助IFrame提交表單數(shù)據(jù)所遇到問題的解決方法分享
更新時間：2011年10月25日 16:11:41 作者：
ASP.NET頁面借助IFrame提交表單數(shù)據(jù)所遇到問題的解決方法分享，碰到同樣問題的朋友可以參考下。
首先看下面的代碼片段，我們希望用戶在點擊頁面上的Button時首先將數(shù)據(jù)提交到指定的第三方頁面，然后再執(zhí)行后臺的Page_Load事件。
<body>
<iframe id="WebGatewaySubmissionProcessor_IFrame" name="WebGatewaySubmissionProcessor_IFrame" style="display: none;"></iframe>
<form onsubmit="javascript:if (typeof WebGatewayDoubleSubmission != 'undefined') {WebGatewayDoubleSubmission(this);}" id="Form1" runat="server">
<div id="page">
<asp:Button ID="BtnClientSend" runat="server" />
</div>
<script type="text/javascript" id="WebGatewayScript">
WebGatewayDoubleSubmission = function(o) {
var oldAction = o.action;
var oldOnSubmit = o.onsubmit;
var oldTarget = o.target;
var oldMethod = o.method;
var iframeSubmisionTarget = document.getElementById("WebGatewaySubmissionProcessor_IFrame");
var submitPostIframeSubmission = function() {
o.action = oldAction;
o.target = oldTarget;
o.method = oldMethod;
o.onsubmit = oldOnSubmit;
o.submit();
};
/*iframeSubmisionTarget.onload = submitPostIframeSubmission;*/
eventPush(iframeSubmisionTarget, 'load', submitPostIframeSubmission);
o.action = "http://webgateway.hostedmscrm.com/V2/formprocessor.aspx";
o.target = "WebGatewaySubmissionProcessor_IFrame";
o.onsubmit = null;
o.method = "POST";
o.submit();
};
WebGatewaySubmission = function(o) {
o.action = "http://webgateway.hostedmscrm.com/V2/formprocessor.aspx";
o.method = "POST";
};
function eventPush(obj, event, handler) {
if (obj.addEventListener) {
obj.addEventListener(event, handler, false);
} else if (obj.attachEvent) {
obj.attachEvent('on' + event, handler);
}
}
</script>
</form>
</body>
Form中的onsubmit事件在頁面被提交時觸發(fā)，此時首先執(zhí)行WebGatewayDoubleSubmission腳本方法，在該方法中，將當(dāng)前Form的action，onsubmit，target，method緩存到指定的變量中，然后將Form的action和target指向另一個頁面進(jìn)行提交，此時頁面上的數(shù)據(jù)被Post到第三方頁面。然后再使用頁面上隱藏的IFrame來調(diào)用submitPostIframeSubmission方法，并將原先的Form進(jìn)行提交。這里有一個問題，在上面的代碼中有一行被注釋掉了，原因就是直接使用IFrame的onload方法并不能觸發(fā)該事件，從而導(dǎo)致submitPostIframeSubmission方法不能執(zhí)行，頁面的第二次提交不成功！使用eventPush方法可以有效地解決該問題。
同時，在服務(wù)端的Page_Load事件中，需要使用IsPostBack來判斷頁面是否被提交了：
protected void Page_Load(object sender, EventArgs e)
{
if (Page.IsPostBack)
{
//TODO:
}
}
復(fù)制代碼 代碼如下:
<body>
<iframe id="WebGatewaySubmissionProcessor_IFrame" name="WebGatewaySubmissionProcessor_IFrame" style="display: none;"></iframe>
<form onsubmit="javascript:if (typeof WebGatewayDoubleSubmission != 'undefined') {WebGatewayDoubleSubmission(this);}" id="Form1" runat="server">
<div id="page">
<asp:Button ID="BtnClientSend" runat="server" />
</div>
<script type="text/javascript" id="WebGatewayScript">
WebGatewayDoubleSubmission = function(o) {
var oldAction = o.action;
var oldOnSubmit = o.onsubmit;
var oldTarget = o.target;
var oldMethod = o.method;
var iframeSubmisionTarget = document.getElementById("WebGatewaySubmissionProcessor_IFrame");
var submitPostIframeSubmission = function() {
o.action = oldAction;
o.target = oldTarget;
o.method = oldMethod;
o.onsubmit = oldOnSubmit;
o.submit();
};
/*iframeSubmisionTarget.onload = submitPostIframeSubmission;*/
eventPush(iframeSubmisionTarget, 'load', submitPostIframeSubmission);
o.action = "http://webgateway.hostedmscrm.com/V2/formprocessor.aspx";
o.target = "WebGatewaySubmissionProcessor_IFrame";
o.onsubmit = null;
o.method = "POST";
o.submit();
};
WebGatewaySubmission = function(o) {
o.action = "http://webgateway.hostedmscrm.com/V2/formprocessor.aspx";
o.method = "POST";
};
function eventPush(obj, event, handler) {
if (obj.addEventListener) {
obj.addEventListener(event, handler, false);
} else if (obj.attachEvent) {
obj.attachEvent('on' + event, handler);
}
}
</script>
</form>
</body>
Form中的onsubmit事件在頁面被提交時觸發(fā)，此時首先執(zhí)行WebGatewayDoubleSubmission腳本方法，在該方法中，將當(dāng)前Form的action，onsubmit，target，method緩存到指定的變量中，然后將Form的action和target指向另一個頁面進(jìn)行提交，此時頁面上的數(shù)據(jù)被Post到第三方頁面。然后再使用頁面上隱藏的IFrame來調(diào)用submitPostIframeSubmission方法，并將原先的Form進(jìn)行提交。這里有一個問題，在上面的代碼中有一行被注釋掉了，原因就是直接使用IFrame的onload方法并不能觸發(fā)該事件，從而導(dǎo)致submitPostIframeSubmission方法不能執(zhí)行，頁面的第二次提交不成功！使用eventPush方法可以有效地解決該問題。
同時，在服務(wù)端的Page_Load事件中，需要使用IsPostBack來判斷頁面是否被提交了：
復(fù)制代碼 代碼如下:
protected void Page_Load(object sender, EventArgs e)
{
if (Page.IsPostBack)
{
//TODO:
}
}
相關(guān)資料：
http://www.4ucode.com/Study/Topic/1087401
http://wiki.operamasks.org/pages/viewpage.action?pageId=1835020
您可能感興趣的文章:
- asp.net中MVC借助Iframe實現(xiàn)無刷新上傳文件實例
- asp.net在iframe中彈出信息并執(zhí)行跳轉(zhuǎn)問題探討
- asp.net 文件上傳與刷新與asp.net頁面與iframe之間的數(shù)據(jù)傳輸
- ASP.NET中使用IFRAME建立類Modal窗口
- asp.net省市三級聯(lián)動的DropDownList+Ajax的三種框架(aspnet/Jquery/ExtJs)示例
- asp.net 學(xué)習(xí)之路 項目整體框架簡單的搭建
- asp.net GridView中超鏈接的使用（帶參數(shù)）
- ASP.NET 鏈接 Access 數(shù)據(jù)庫路徑問題最終解決方案
- asp.net實現(xiàn)生成靜態(tài)頁并添加鏈接的方法
- ASP.NET中iframe框架點擊左邊頁面鏈接 右邊顯示鏈接頁面內(nèi)容
相關(guān)文章
ASP.NET下備份還原數(shù)據(jù)庫的實現(xiàn)代碼，需要的朋友可以參考下。2010-03-03
ASP.NET WebAPI2復(fù)雜請求跨域設(shè)置的方法介紹
這篇文章主要給大家介紹了關(guān)于ASP.NET WebAPI2復(fù)雜請求跨域設(shè)置的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者使用ASP.NET具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
最近跟著公司做了一個小項目，雖然不是很好，卻也有點心得，在此和大家分享一下，希望高手能不吝賜教啊。。。還有很多得更加努力學(xué)習(xí)啊2015-06-06
動態(tài)組合SQL語句方式實現(xiàn)批量更新的實例
動態(tài)組合SQL語句方式實現(xiàn)批量更新的實例，需要的朋友可以參考一下2013-03-03
Asp.net使用SignalR實現(xiàn)酷炫端對端聊天功能
這篇文章主要為大家詳細(xì)介紹了Asp.net使用SignalR實現(xiàn)酷炫端對端聊天功能，感興趣的小伙伴們可以參考一下2016-04-04
AspNetPager控件是一個基于.net的第三方免費(fèi)開源控件，具有開發(fā)高效、使用方便、功能完整等優(yōu)點2012-01-01
輕量級ORM框架Dapper應(yīng)用之返回多個結(jié)果集
這篇文章介紹了使用Dapper返回多個結(jié)果集的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
這篇文章總結(jié)了可能節(jié)省你大量時間的11個visual studio的調(diào)試技巧和方法，感興趣的小伙伴們可以參考一下2015-11-11
.net 動態(tài)標(biāo)題實現(xiàn)方法
.net 實現(xiàn)動態(tài)標(biāo)題方法,需要的朋友可以參考下。2009-11-11
面?zhèn)髦凳菍W(xué)習(xí)asp.net初期都會面臨的一個問題，總的來說有頁面?zhèn)髦?、存儲對象傳值、ajax、類、model、表單等。但是一般來說，常用的較簡單有QueryString，Session，Cookies，Application，Server.Transfer。2012-12-12