asp.net 文件上傳與刷新與asp.net頁面與iframe之間的數(shù)據(jù)傳輸
更新時(shí)間:2009年12月15日 21:46:42 作者:
眾所周知微軟所提供的updatepanel不能支持文件上傳的異步刷新,但是往往當(dāng)你在項(xiàng)目中的其他頁面實(shí)現(xiàn)了異步刷新之后,客戶就會(huì)問你為什么有文件上傳的頁面就不能實(shí)現(xiàn)異步刷新呢?這時(shí)我們可能說一堆理由,但是最后大部分還是會(huì)妥協(xié)于客戶。
具體我們?nèi)绾螌?shí)現(xiàn)文件的異步刷新,目前網(wǎng)上已經(jīng)有了很多文章來解決這個(gè)問題,但是會(huì)用到大量的javascript,由于本人編碼功力尚淺,所以之今沒有高清其中的所以然,但是在解決的方案中他們貌似都用到了iframe,這讓我茅塞頓開,所以我就說說用這個(gè)處理刷新的思路。
首先一個(gè)實(shí)際的頁面中往往是會(huì)有較多的內(nèi)容,我們暫時(shí)把它分為A,B兩個(gè)區(qū)域,A區(qū)域是內(nèi)容區(qū)域,我們可以用updatepanel來實(shí)現(xiàn)異步刷新,B區(qū)域是上傳區(qū)域,我們用div已經(jīng)ifame占位,其中上傳的具體功能實(shí)現(xiàn)我們可以放到C頁面中,這樣當(dāng)點(diǎn)擊按鈕刷新B區(qū)域的時(shí)候,我們可以向C頁面?zhèn)髦祦砀吕锩娴膬?nèi)容,同樣當(dāng)我們點(diǎn)擊按鈕刪除或者保存內(nèi)容時(shí),也可以獲取C頁面中的內(nèi)容,這樣就基本上滿足了無刷新的感覺。
其實(shí)這種方式并不能稱之為異步刷新,因?yàn)槲覀冎皇怯胕frame來實(shí)現(xiàn)頁面的局部刷新從而滿足一種無刷新的感覺而已。
如果這樣處理的話,asp.net頁面與iframe之間的傳值就會(huì)成為另一個(gè)問題,其實(shí)這個(gè)問題如果你知道,就會(huì)比較簡單,但是不知道的話,就有點(diǎn)無從下手。
網(wǎng)上可能也提供了很多方案處理傳值,我使用的是使用javascript來獲取控件從而取到他里面所包含的值。
這個(gè)是獲取iframe f1,以及頁面C中的 img控件
var objFrame = document.getElementById("f1");
var objPicture = objFrame.contentWindow.document.getElementById("imgPicture");
當(dāng)然你也可以在頁面C中去獲取父頁面的控件,從而獲取值
var objHid = this.parent.document.getElementById("")
這個(gè)是包含ifrmae的div
<div id="iconpicture">
<iframe id="f1" style="width: 300px; height: 300px" src="UploadImage.aspx" scrolling="no"
frameborder="0" border="0" frameborder="no"></iframe>
</div>
這個(gè)實(shí)現(xiàn)方式我已經(jīng)在項(xiàng)目中成功的使用了,其實(shí)如果這樣處理主要的難點(diǎn)已經(jīng)不再于具體功能的實(shí)現(xiàn),而在于頁面的布局在多瀏覽器下的適應(yīng)了。當(dāng)然我提供的這些javascript 是滿足多瀏覽器的。
首先一個(gè)實(shí)際的頁面中往往是會(huì)有較多的內(nèi)容,我們暫時(shí)把它分為A,B兩個(gè)區(qū)域,A區(qū)域是內(nèi)容區(qū)域,我們可以用updatepanel來實(shí)現(xiàn)異步刷新,B區(qū)域是上傳區(qū)域,我們用div已經(jīng)ifame占位,其中上傳的具體功能實(shí)現(xiàn)我們可以放到C頁面中,這樣當(dāng)點(diǎn)擊按鈕刷新B區(qū)域的時(shí)候,我們可以向C頁面?zhèn)髦祦砀吕锩娴膬?nèi)容,同樣當(dāng)我們點(diǎn)擊按鈕刪除或者保存內(nèi)容時(shí),也可以獲取C頁面中的內(nèi)容,這樣就基本上滿足了無刷新的感覺。
其實(shí)這種方式并不能稱之為異步刷新,因?yàn)槲覀冎皇怯胕frame來實(shí)現(xiàn)頁面的局部刷新從而滿足一種無刷新的感覺而已。
如果這樣處理的話,asp.net頁面與iframe之間的傳值就會(huì)成為另一個(gè)問題,其實(shí)這個(gè)問題如果你知道,就會(huì)比較簡單,但是不知道的話,就有點(diǎn)無從下手。
網(wǎng)上可能也提供了很多方案處理傳值,我使用的是使用javascript來獲取控件從而取到他里面所包含的值。
這個(gè)是獲取iframe f1,以及頁面C中的 img控件
var objFrame = document.getElementById("f1");
var objPicture = objFrame.contentWindow.document.getElementById("imgPicture");
當(dāng)然你也可以在頁面C中去獲取父頁面的控件,從而獲取值
var objHid = this.parent.document.getElementById("")
這個(gè)是包含ifrmae的div
<div id="iconpicture">
<iframe id="f1" style="width: 300px; height: 300px" src="UploadImage.aspx" scrolling="no"
frameborder="0" border="0" frameborder="no"></iframe>
</div>
這個(gè)實(shí)現(xiàn)方式我已經(jīng)在項(xiàng)目中成功的使用了,其實(shí)如果這樣處理主要的難點(diǎn)已經(jīng)不再于具體功能的實(shí)現(xiàn),而在于頁面的布局在多瀏覽器下的適應(yīng)了。當(dāng)然我提供的這些javascript 是滿足多瀏覽器的。
相關(guān)文章
asp.net 數(shù)據(jù)庫的連接和datatable類
asp.net下數(shù)據(jù)庫的連接與數(shù)據(jù)庫datatable類實(shí)現(xiàn)代碼。2009-05-05
12小時(shí)制和24小時(shí)制獲取當(dāng)天零點(diǎn)的問題探討
這篇文章介紹了12小時(shí)制和24小時(shí)制獲取當(dāng)天零點(diǎn)的問題探討,有需要的朋友可以參考一下2013-09-09
深入解讀ASP.NET Core身份認(rèn)證過程實(shí)現(xiàn)
這篇文章主要介紹了深入解讀ASP.NET Core身份認(rèn)證過程實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
ASP.NET中利用WebClient上傳圖片到遠(yuǎn)程服務(wù)的方法
這篇文章主要介紹了ASP.NET中利用WebClient上傳圖片到遠(yuǎn)程服務(wù)的方法,包括客戶端和服務(wù)端,代碼附有注釋,需要的的朋友參考下吧2017-01-01
使用ASP.NET模板生成HTML靜態(tài)頁面的五種方案
使用ASP.NET模版生成HTML靜態(tài)頁面并不是難事,主要是使各個(gè)靜態(tài)頁面間的關(guān)聯(lián)和鏈接如何保持完整。本文介紹了使用ASP.NET模版生成HTML靜態(tài)頁面的五種方案2011-11-11
asp.net中javascript與后臺(tái)c#交互
這篇文章主要介紹了asp.net中javascript與后臺(tái)c#交互,需要的朋友可以參考下2015-10-10

