在商業應用逐步趨向行動化的今天,業務人員終日在外奔波的狀況已經愈來愈多,當使用者能連線使用系統的機會不高,但又希望他能將資料輸入到系統中,怎麼辦?許多的系統便發展出透過Excel或純文字檔讓業務人員可先在行動裝置如NB、PDA上先輸入完資料,一旦可連線上網路便可將離線輸入的那些資料匯入系統中,達到資料管制的目的,本篇文章簡單說明一下如何透過Excel的離線登打,並上傳回系統。
在商業應用逐步趨向行動化的今天,業務人員終日在外奔波的狀況已經愈來愈多,當使用者能連線使用系統的機會不高,但又希望他能將資料輸入到系統中,怎麼辦?許多的系統便發展出透過Excel或純文字檔讓業務人員可先在行動裝置如NB、PDA上先輸入完資料,一旦可連線上網路便可將離線輸入的那些資料匯入系統中,達到資料管制的目的,本篇文章簡單說明一下如何透過Excel的離線登打,並上傳回系統。
【前置作業】
首先我們先建立一個專案,內容如下:
OfflineDown:裡頭放了我們要讓使用者下載的Excel範本
OfflineUp:用來暫存使用者上傳的Excel檔案
Old:(不管他)
OfflineExcel.aspx:做為使用者下載及上傳的操作介面
預計的操作步驟是這樣的:使用者連上系統下載Excel範本-->進行離線的資料登打-->上傳Excel
既然提到Excel範本,我們先來看看我們的範本內容,裡頭只有四個欄位,這四個欄位是依北風資料庫的Customers資料表截取前四的欄位而來,所以最後我們的資料也是被存到北風資料庫的Customers資料表囉,
接著看一下系統的實際使用介面,非常陽春,只有一個FileUpload跟兩個Button控制項:
【實際操作】
下載範本檔,要離線登打第一件事情當然是先下載範本檔案囉:
輸入要上傳的資料,這邊我們通常會再搭配巨集讓使用者輸入資料時能比較方便,順便做一些格式檢查:
選擇好要上傳的檔案路徑,按下上傳:
出現新增資料成功:
接著到資料庫中查看資料是否有成功被insert進去囉,資料果然成功被insert了,成功囉!!
【程式撰寫】
下載的部分:將Server上準備好的那份excel檔透過Binarywrite輸出到client端
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/None.gif)
02
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedBlockStart.gif)
03
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
04
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
05
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
06
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
07
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
08
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
09
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
10
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
11
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
12
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedBlockEnd.gif)
上傳的部分分為三階段:上傳檔案到Server、從Excel中讀出資料、將Excel讀出的資料insert到北風資料庫
上傳檔案部分:FileUpload元件的標準寫法達成:
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/None.gif)
02
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedBlockStart.gif)
03
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
04
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
05
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
06
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
07
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
08
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
09
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
10
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
11
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
12
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
13
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
14
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedBlockEnd.gif)
從Excel讀取資料部分,這邊是透過OleDb的方式取讀取所要的excel檔案,並將資料轉存到DataTable中,這邊這樣寫純粹是個人習慣,沒有什麼特別原因。
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/None.gif)
02
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedBlockStart.gif)
03
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
04
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
05
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
06
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
07
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedSubBlockStart.gif)
08
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
09
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
10
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
11
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
12
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
13
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
14
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
15
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedSubBlockEnd.gif)
16
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
17
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedSubBlockStart.gif)
18
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
19
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
20
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
21
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
22
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
23
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedSubBlockEnd.gif)
24
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
25
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedSubBlockStart.gif)
26
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
27
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedSubBlockEnd.gif)
28
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedBlockEnd.gif)
將Excel讀出的資料insert到資料庫部分,
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/None.gif)
02
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedBlockStart.gif)
03
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
04
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
05
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
06
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedSubBlockStart.gif)
07
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
08
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
09
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedSubBlockStart.gif)
10
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
11
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
12
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
13
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
14
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
15
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
16
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
17
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
18
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
19
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedSubBlockEnd.gif)
20
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
21
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
22
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedSubBlockEnd.gif)
23
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
24
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedSubBlockStart.gif)
25
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
26
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
27
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedSubBlockEnd.gif)
28
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
29
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedSubBlockStart.gif)
30
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
31
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedSubBlockEnd.gif)
32
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedBlockEnd.gif)
如此就完成了Excel離線輸入後上傳回系統的功能囉,對使用者方便,又不會太難寫,。
![]() |
游舒帆 (gipi) 探索原力Co-founder,曾任TutorABC協理與鼎新電腦總監,並曾獲選兩屆微軟最有價值專家 ( MVP ),離開職場後創辦探索原力,致力於協助青少年培養面對未來的能力。認為教育與組織育才其實息息相關,都是在為未來儲備能量,2018年起成立為期一年的專題課程《職涯躍升的關鍵24堂課》,為培養台灣未來的領袖而努力。 |