asp.net 文件上傳與刷新與asp.net頁(yè)面與iframe之間的數(shù)據(jù)傳輸
更新時(shí)間:2009年12月15日 21:46:42 作者:
眾所周知微軟所提供的updatepanel不能支持文件上傳的異步刷新,但是往往當(dāng)你在項(xiàng)目中的其他頁(yè)面實(shí)現(xiàn)了異步刷新之后,客戶(hù)就會(huì)問(wèn)你為什么有文件上傳的頁(yè)面就不能實(shí)現(xiàn)異步刷新呢?這時(shí)我們可能說(shuō)一堆理由,但是最后大部分還是會(huì)妥協(xié)于客戶(hù)。
具體我們?nèi)绾螌?shí)現(xiàn)文件的異步刷新,目前網(wǎng)上已經(jīng)有了很多文章來(lái)解決這個(gè)問(wèn)題,但是會(huì)用到大量的javascript,由于本人編碼功力尚淺,所以之今沒(méi)有高清其中的所以然,但是在解決的方案中他們貌似都用到了iframe,這讓我茅塞頓開(kāi),所以我就說(shuō)說(shuō)用這個(gè)處理刷新的思路。
首先一個(gè)實(shí)際的頁(yè)面中往往是會(huì)有較多的內(nèi)容,我們暫時(shí)把它分為A,B兩個(gè)區(qū)域,A區(qū)域是內(nèi)容區(qū)域,我們可以用updatepanel來(lái)實(shí)現(xiàn)異步刷新,B區(qū)域是上傳區(qū)域,我們用div已經(jīng)ifame占位,其中上傳的具體功能實(shí)現(xiàn)我們可以放到C頁(yè)面中,這樣當(dāng)點(diǎn)擊按鈕刷新B區(qū)域的時(shí)候,我們可以向C頁(yè)面?zhèn)髦祦?lái)更新里面的內(nèi)容,同樣當(dāng)我們點(diǎn)擊按鈕刪除或者保存內(nèi)容時(shí),也可以獲取C頁(yè)面中的內(nèi)容,這樣就基本上滿(mǎn)足了無(wú)刷新的感覺(jué)。
其實(shí)這種方式并不能稱(chēng)之為異步刷新,因?yàn)槲覀冎皇怯胕frame來(lái)實(shí)現(xiàn)頁(yè)面的局部刷新從而滿(mǎn)足一種無(wú)刷新的感覺(jué)而已。
如果這樣處理的話(huà),asp.net頁(yè)面與iframe之間的傳值就會(huì)成為另一個(gè)問(wèn)題,其實(shí)這個(gè)問(wèn)題如果你知道,就會(huì)比較簡(jiǎn)單,但是不知道的話(huà),就有點(diǎn)無(wú)從下手。
網(wǎng)上可能也提供了很多方案處理傳值,我使用的是使用javascript來(lái)獲取控件從而取到他里面所包含的值。
這個(gè)是獲取iframe f1,以及頁(yè)面C中的 img控件
var objFrame = document.getElementById("f1");
var objPicture = objFrame.contentWindow.document.getElementById("imgPicture");
當(dāng)然你也可以在頁(yè)面C中去獲取父頁(yè)面的控件,從而獲取值
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è)面的布局在多瀏覽器下的適應(yīng)了。當(dāng)然我提供的這些javascript 是滿(mǎn)足多瀏覽器的。
首先一個(gè)實(shí)際的頁(yè)面中往往是會(huì)有較多的內(nèi)容,我們暫時(shí)把它分為A,B兩個(gè)區(qū)域,A區(qū)域是內(nèi)容區(qū)域,我們可以用updatepanel來(lái)實(shí)現(xiàn)異步刷新,B區(qū)域是上傳區(qū)域,我們用div已經(jīng)ifame占位,其中上傳的具體功能實(shí)現(xiàn)我們可以放到C頁(yè)面中,這樣當(dāng)點(diǎn)擊按鈕刷新B區(qū)域的時(shí)候,我們可以向C頁(yè)面?zhèn)髦祦?lái)更新里面的內(nèi)容,同樣當(dāng)我們點(diǎn)擊按鈕刪除或者保存內(nèi)容時(shí),也可以獲取C頁(yè)面中的內(nèi)容,這樣就基本上滿(mǎn)足了無(wú)刷新的感覺(jué)。
其實(shí)這種方式并不能稱(chēng)之為異步刷新,因?yàn)槲覀冎皇怯胕frame來(lái)實(shí)現(xiàn)頁(yè)面的局部刷新從而滿(mǎn)足一種無(wú)刷新的感覺(jué)而已。
如果這樣處理的話(huà),asp.net頁(yè)面與iframe之間的傳值就會(huì)成為另一個(gè)問(wèn)題,其實(shí)這個(gè)問(wèn)題如果你知道,就會(huì)比較簡(jiǎn)單,但是不知道的話(huà),就有點(diǎn)無(wú)從下手。
網(wǎng)上可能也提供了很多方案處理傳值,我使用的是使用javascript來(lái)獲取控件從而取到他里面所包含的值。
這個(gè)是獲取iframe f1,以及頁(yè)面C中的 img控件
var objFrame = document.getElementById("f1");
var objPicture = objFrame.contentWindow.document.getElementById("imgPicture");
當(dāng)然你也可以在頁(yè)面C中去獲取父頁(yè)面的控件,從而獲取值
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è)面的布局在多瀏覽器下的適應(yīng)了。當(dāng)然我提供的這些javascript 是滿(mǎn)足多瀏覽器的。
相關(guān)文章
.net Core連接MongoDB數(shù)據(jù)庫(kù)的步驟詳解
這篇文章主要給大家介紹了關(guān)于.net Core連接MongoDB數(shù)據(jù)庫(kù)步驟的相關(guān)資料,文中將實(shí)現(xiàn)的步驟一步步介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-02-02.Net Core中使用Autofac替換自帶的DI容器的示例
Autofac比Core中自帶的DI功能強(qiáng)大的多,比如:屬性注入、基于名稱(chēng)注入、子容器、自定生存期管理、遲緩初始化,本文就詳細(xì)的來(lái)介紹一下.Net Core Autofac替換DI容器,感興趣的可以了解一下2021-06-06ASP.NET Core 2.0 WebApi全局配置及日志實(shí)例
下面小編就為大家分享一篇ASP.NET Core 2.0 WebApi全局配置及日志實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12ASP.NET網(wǎng)站使用Kindeditor富文本編輯器配置步驟
首先下載編輯器然后部署編輯器最后在網(wǎng)頁(yè)中加入(ValidateRequest="false")引入腳本文件,具體配置步驟如下,有需求的朋友可以了解下哈2013-06-06asp.net 水晶報(bào)表隔行換色實(shí)現(xiàn)方法
水晶報(bào)表隔行換色實(shí)現(xiàn)方法,需要的朋友可以參考下。2009-11-11ASP.NET Core跨站登錄重定向的實(shí)現(xiàn)新姿勢(shì)
這篇文章主要給大家介紹了關(guān)于ASP.NET Core實(shí)現(xiàn)跨站登錄重定向的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07實(shí)例講解.NET中資源文件的創(chuàng)建與使用
資源文件顧名思義就是存放資源的文件。資源文件在程序設(shè)計(jì)中有著自身獨(dú)特的優(yōu)勢(shì),他獨(dú)立于源程序,這樣資源文件就可以被多個(gè)程序使用2011-12-12