Transcript 伺服器檔案處理與Ajax

第15章 伺服器檔案處理
與Ajax
第15章 伺服器檔案處理與Ajax
資料夾與檔案操作
 15-2 文字檔案的讀寫
 15-3 Ajax的基礎
 15-4 ASP.NET Ajax
 15-5 建立ASP.NET Ajax應用程式
 15-1
15-1 資料夾與檔案操作
 15-1-1
System.IO名稱空間的基礎
 15-1-2 顯示資料夾與檔案清單
 15-1-3 顯示檔案資訊
 15-1-4 檔案處理
15-1-1 System.IO名稱空間的基礎說明
 .NET
Framework的檔案與資料夾處理屬於
System.IO名稱空間，在ASP.NET網頁只需
匯入此名稱空間，就可以存取檔案系統或
處理文字檔案的「串流」（Streams）。
15-1-1 System.IO名稱空間的基礎類別

System.IO名稱空間關於檔案和資料夾處理的類
別，如下表所示：
類別
Directory
說明
提供類別方法來取得目前的工作目錄、建立、移動和顯示資
料夾與子資料夾清單
DirectoryInfo 一個資料夾就是一個 DirectoryInfo 物件，可以建立、移動、
刪除、檢查是否存在和顯示資料夾清單
File
提供類別方法來建立、複製、刪除、移動和開啟檔案，其目
的主要是為了建立 FileStream 物件
FileInfo
一個檔案就是一個 FileInfo 物件，提供相關方法可以建立、
複製、刪除、移動和開啟檔案建立 FileStream 物件
StreamReader
使用位元組串流來讀取文字檔案
StreamWriter
使用位元組串流來寫入文字檔案
FileStream
建立檔案串流，支援同步與非同步讀取與寫入，可以用來處
理二進位檔案
15-1-2 顯示資料夾與檔案清單顯示資料夾清單

DirectoryInfo物件的GetDirectories()方法可以取
得指定資料夾的清單，如下所示：
DirectoryInfo dirInfo = new DirectoryInfo(path);
try {
DirectoryInfo[] subDirs = dirInfo.GetDirectories();
for (i = 0; i < subDirs.Length; i++) {
lblOutput.Text += subDirs[i].Name + "<br/>";
}
}
catch (DirectoryNotFoundException ex) {
lblOutput.Text += ex.Message + "<br/>";
}
15-1-2 顯示資料夾與檔案清單顯示檔案清單
 DirectoryInfo物件的GetFiles()方法可以取
得FileInfo檔案物件陣列，如下所示：
FileInfo[] subFiles = dirInfo.GetFiles();
 上述程式碼取得FileInfo檔案物件陣列後，
就可以使用foreach迴圈取得每一個FileInfo
檔案物件，如下所示：
foreach (FileInfo subFile in subFiles) {
lblOutput.Text += subFile.Name + "<br/>";
}
15-1-2 顯示資料夾與檔案清單-範例
網站
ASP.NET網站：Ch15-1-2
 在ASP.NET網頁使用DirectoryInfo物件方法
取得伺服器「Test」目錄下的檔案和資料夾
清單，如下圖所示：
15-1-3 顯示檔案資訊-說明
 FileInfo類別屬性可以取得檔案資訊，首先
建立FileInfo檔案物件fInfo，如下所示：
FileInfo fInfo = new FileInfo(path);
 上述程式碼的建構子參數是檔案實際路徑，
在建立好物件後，就可以使用FileInfo物件
屬性取得檔案資訊。
15-1-3 顯示檔案資訊-屬性
 FileInfo物件屬性的說明，如下表所示：
屬性
Name
FullName
Extension
Directory
DirectoryName
CreationTime
LastAccessTime
LastWriteTime
Length
說明
檔案名稱
檔案全名，包含檔案路徑
檔案副檔名
取得父資料夾的 DirectoryInfo 物件
父資料夾的完整路徑
建立日期
存取日期
修改日期
檔案大小
15-1-3 顯示檔案資訊-範例網站
ASP.NET網站：Ch15-1-3
 在ASP.NET網頁使用FileInfo物件屬性顯示
Default.aspx的檔案資訊，如下圖所示：
15-1-4 檔案處理-說明
 檔案處理是指刪除、複製、移動檔案和檢
查檔案是否存在等操作。在System.IO名稱
空間類別的檔案操作方法是使用FileInfo物
件，如下所示：
FileInfo fInfo = new FileInfo(path);
 上述程式碼的參數path是檔案的實際路徑，
在建立好FileInfo物件後，就可以使用相關
方法執行檔案操作。
15-1-4 檔案處理-檔案處理方法
 FileInfo物件關於檔案處理的方法，如下表
所示：
方法
CreateText()
Delete()
MoveTo(string)
CopyTo(string, true)
說明
建立文字檔案
刪除檔案
移動檔案至參數 string 字串的完整檔案路徑，檔案
名稱可以不同
複製檔案到參數 string 字串的完整檔案路徑，第 2
個參數為 true，表示覆寫存在檔案，false 為不覆寫
15-1-4 檔案處理-檔案處理屬性

FileInfo物件關於檔案處理的屬性，如下表所示：
屬性
Exists

說明
檢查檔案是否存在
Exists屬性可以檢查檔案是否存在，如下所示：
if (fInfo.Exists) {
………
}
 上述if條件使用Exists屬性檢查檔案是否存在，如
果檔案存在傳回true，否則為false。
15-1-4 檔案處理-File類別的方法
在File類別提供相關類別方法，一樣可以執行檔案
刪除、移動、複製和檢查檔案是否存在的操作，
如下所示：
File.Delete(path);
File.Move(sourPath, destPath);
File.Copy(sourPath, destPath, true);
File.Exists(path);
 上述程式碼是File類別的類別方法，參數path、
sourPath和destPath是實際路徑（包括檔案全
名），如果擁有2個參數分別為來源和目的的檔案
路徑，true表示覆寫檔案。

15-2 文字檔案的讀寫
讀取與寫入文字檔案的步驟
 15-2-2 文字檔案的寫入
 15-2-3 文字檔案的讀取
 15-2-1
15-2-1 讀取與寫入文字檔案的步
驟-說明
在System.IO名稱空間的StreamReader和
StreamWriter串流類別是使用「串流」（Stream）
模型來處理資料的輸入與輸出。
 串流（Stream）觀念最早是使用在Unix作業系統，
串流模型如同水管中的水流，當程式開啟檔案來
源的輸入串流後，ASP.NET網頁可以從輸入串流
依序讀取資料，如下圖所示：

15-2-1 讀取與寫入文字檔案的步驟步驟一：開啟或建立文字檔案

FileInfo類別的CreateText()方法可以建立全新文
字檔案，如下所示：
StreamWriter sw = fileInfo.CreateText();
 使用StreamReader或StreamWriter開啟存在的文
字檔案，如下所示：
StreamReader sr = new StreamReader(path);
StreamWriter sw = new StreamWriter(path);
 如果是在檔案最後新增文字內容，請使用FileInfo
類別的AppendText()方法來開啟StreamWrite串流，
如下所示：
StreamWriter sw = fileInfo.AppendText();
15-2-1 讀取與寫入文字檔案的步驟步驟二：讀寫文字檔案串流(寫)
 在建立StreamReader和StreamWriter串流
物件後，就可以使用相關方法來執行文字
檔案的讀寫。StreamWriter類別寫入文字檔
案的相關方法，如下表所示：
寫入方法
Write(string)
WriteLine(string)
說明
寫入參數字串至檔案串流
寫入參數字串且在最後加上換行字元至檔案串流
15-2-1 讀取與寫入文字檔案的步驟步驟二：讀寫文字檔案串流(讀)
 StreamReader類別讀取文字檔案內容的相
關方法，如下表所示：
讀取方法
Read()
ReadLine()
ReadToEnd()
Peek()
說明
從檔案串流讀取下一個字元，或一個中文字
從檔案串流讀取一行，但不含換行字元
從目前串流位置讀取到檔尾，即讀取剩下的文字檔內容
檢查下一個字元什麼，但是並不會讀取，值-1 表示到達檔案
串流的結尾
15-2-1 讀取與寫入文字檔案的步驟步驟三：關閉文字檔案串流
 在處理完文字檔案讀寫後，請記得將緩衝
區資料寫入和關閉檔案串流，如下所示：
sw.Flush();
sw.Close();
 上述程式碼的Close()方法可以關閉
StreamWriter或StreamReader串流物件。
StreamWriter串流物件需要額外使用Flush()
方法清除緩衝區資料，也就是強迫將資料
寫入檔案。
15-2-2 文字檔案的寫入-說明
 在ASP.NET網頁可以使用System.IO名稱空
間的StreamWriter串流類別來將資料寫入、
覆寫或新增至文字檔案。
 StreamWriter串流物件是使用Write()或
WriteLine()方法，將字串內容寫入文字檔案。
Write()方法的參數是寫入的字串，但不含
換行符號；WriteLine()方法可以寫入含換行
的字串。
15-2-2 文字檔案的寫入-寫入資料到
文字檔案
 如果文字檔案不存在，我們可以使用
FileInfo物件的CreateText()方法來建立
StreamWriter串流物件，如下所示：
StreamWriter sw = fileInfo.CreateText();
sw.Write(txtInput.Text + "\r\n");
 上述程式碼是建立全新文字檔案，因為
Write()方法並不會換行，所以在後面加上
"\r\n"來新增換行符號。
15-2-2 文字檔案的寫入-覆寫文字檔
案的資料
 對於存在的文字檔案，我們可以使用
StreamWrite串流物件開啟檔案來寫入資料，
如下所示：
StreamWriter sw = new StreamWriter(path);
sw.WriteLine(txtInput.Text);
 上述程式碼開啟存在的文字檔案，所以
WriteLine()方法寫入的字串會覆寫原來檔案
的內容。
15-2-2 文字檔案的寫入-新增資料到
文字檔案
 如果我們準備將資料新增到目前存在檔案
的檔尾，請使用FileInfo物件的AppendText()
方法來開啟文字檔案，如下所示：
StreamWriter sw = fileInfo.AppendText();
sw.Write(txtInput.Text + "\r\n");
 上述程式碼使用Write()或WriteLine()方法寫
入資料時，就是新增至檔尾。
15-2-2 文字檔案的寫入-範例網站
ASP.NET網站：Ch15-2-2
 在ASP.NET網頁將TextBox控制項輸入的字
串寫入檔案Output.txt或新增到檔案最後，
請直接使用記事本開啟檔案來檢視檔案內
容，如下圖所示：
15-2-3 文字檔案的讀取-說明
 System.IO名稱空間的文字檔案讀取是使用
StreamReader串流物件。在本節的範例文
字檔案就是上一節建立的Output.txt文字檔
案，目前檔案內容共有5列文字，如下圖所
示：
15-2-3 文字檔案的讀取-開啟檔案
 在ASP.NET網頁可以使用StreamReader串
流物件來開啟唯讀文字檔案，如下所示：
StreamReader sr = new StreamReader(path);
 上述程式碼的建構子參數path是檔案實際路
徑，開啟的是唯讀串流，內含檔案指標指
向讀取位置，目前檔案指標是指向檔案開
頭。
15-2-3 文字檔案的讀取-讀取檔案的
下一個字元
文字檔案的讀取可以選擇一列一列讀取或一字一
字讀取。首先以一字一字為單位來讀取檔案，在
開啟檔案後，檔案指標是指向檔案開頭，我們可
以使用Read()方法讀取目前檔案指標位置的下一
個字元，如下所示：
ch = sr.Read();
 上述程式碼讀取下一個字元，即檔案內容的第一
個字，傳回整數的內碼值，英文為字母內碼，中
文為一個字二個位元組的中文內碼。

15-2-3 文字檔案的讀取-讀取檔案的
多個字元

當再次呼叫Read()方法時，就是從目前檔案指標
位置開始，讀取下一個字元。換句話說，讀取多
個字元可以使用for迴圈配合Read()方法來讀取，
如下所示：
for (i = 1; i <= 12; i++) {
ch = sr.Read();
txtOutput.Text += (char)(ch) + " ";
}
15-2-3 文字檔案的讀取-讀取文字檔
的一整行
 StreamReader串流物件的ReadLine()方法
可以一行一行讀取文字檔案，如下所示：
str = sr.ReadLine();
 上述程式碼可以讀取一整行的文字內容，
檔案指標一次移動一行，如下圖所示：
15-2-3 文字檔案的讀取-讀取整個文
字檔案(1)
 StreamReader串流物件提供方法可以讀取
整個文字檔案內容，如下所示：
str = sr.ReadToEnd();
 上述ReadToEnd()方法能夠從目前檔案位置
讀取到檔尾的全部內容。如果是剛開啟的
檔案，就是讀取整個檔案的內容。
15-2-3 文字檔案的讀取-讀取整個文
字檔案(2)
換一個方式，我們可以使用ReadLine()方法配合
do/while迴圈來讀取整個文字檔案內容，如下所
示：
do {
textLine = sr.ReadLine();
count += 1;
txtOutput.Text += count + ": " + textLine +
"\r\n";
} while ( ! (sr.Peek() == -1));
 上述do/while迴圈可以讀取整個文字檔案內容，
使用Peek()方法檢查檔案指標是否已經讀到檔尾，
傳回-1，表示檔案已經讀完。

15-2-3 文字檔案的讀取-範例網站
ASP.NET網站：Ch15-2-3

在ASP.NET網頁按下按鈕，就可以讀取文字檔案
Output.txt的幾個字元、幾行或整個檔案內容，並
且將它顯示在唯讀的多行文字方塊，如下圖所示：
15-3 Ajax的基礎
 15-3-1 Ajax簡介
非同步HTTP請求
 15-3-3 Ajax應用程式架構
 15-3-2
15-3-1 Ajax簡介-說明

Ajax是Asynchronous JavaScript And XML的縮寫，
譯成中文就是非同步JavaScript和XML技術。
Ajax可以讓Web應用程式如同Windows應用程式
一般，在瀏覽程式建立快速、更佳和容易使用的
操作介面。
 Ajax是由Jesse James Garrett最早提出的名稱，
事實上，Ajax並不是全新的網頁技術，它是以一
種新方法來整合現存的多種網頁技術。不過，直
到Ajax被大量使用在Google網頁設計，例如：
Gmail、Google Suggest和Google Maps後，
Ajax技術才受到大家的重視，並且快速成為目前
網頁設計技術上的一顆耀眼新星。
15-3-1 Ajax簡介-圖例
 例如：Google
Suggest，如下圖所示：
15-3-1 Ajax簡介-組成元素
 Ajax技術是由多種網頁技術所組成，相關技
術說明如下所示：




HTML/XHTML和CSS：在瀏覽程式顯示使用者
介面和呈現相關資料。
XML：伺服端非同步傳遞的資料。
XML DOM：當瀏覽端非同步取得XML資料後，
可以進一步使用JavaScript程式碼和XML DOM
來取出所需資訊。
XMLHttpRequest物件：JavaScript程式碼是透
過XMLHttpRequest物件來建立非同步的HTTP
請求。
15-3-2 非同步HTTP請求-說明

Ajax技術的核心是非同步HTTP請求
（Asynchronous HTTP Requests），此種HTTP
請求可以不用等待伺服端回應，即可讓使用者執
行其他互動操作，例如：更改購物車的購買商品
數量後，不需等待重新載入整個網頁，或自行按
下按鈕來更新網頁，就可以接著輸入送貨的相關
資訊。
 簡單的說，非同步HTTP請求可以讓網頁使用介面，
不會因為HTTP請求的等待回應而中斷，因為同步
HTTP請求需要重新載入整頁網頁內容，如果網路
稍慢，可能看見空白頁和網頁逐漸載入的過程，
這是和Windows應用程式使用者介面間的最大差
異。
15-3-2 非同步HTTP請求-同步
HTTP請求
 傳統HTTP請求的過程是同步HTTP請求
（Synchronous HTTP Requests），如下
圖所示：
15-3-2 非同步HTTP請求-非同步
HTTP請求

Ajax技術是使用非同步HTTP請求，除了第1次載
入網頁外，HTTP請求是在背景以
XMLHttpRequest物件來送出的HTTP請求，送出
後，並不需要等待回應，所以不會影響到使用者
在瀏覽程式進行的互動，如下圖所示：
15-3-3 Ajax應用程式架構
 Ajax應用程式架構的最大差異是在客戶端，
新增JavaScript撰寫的Ajax引擎來處理
HTTP請求，和取得伺服端回應的XML資料，
如下圖所示：
15-4 ASP.NET Ajax-簡介

ASP.NET Ajax原來的開發代碼是Atlas，在2007
年1月推出的ASP.NET Ajax 1.0版是一套以
ASP.NET 2.0版為基礎的擴充套件，可以讓
ASP.NET網頁透過新增的伺服端控制項來實作
Ajax功能。
 在VWD 2008版已經內建ASP.NET AJAX擴充功
能，我們可以直接使用擴充功能的控制項，輕鬆
在ASP.NET網頁建立功能強大和高互動性的Web
使用介面。
 ASP.NET Ajax是一套完整的Ajax技術解決方案，
包含客戶端和伺服端元件，可以讓開發者輕鬆建
立ASP.NET版的Ajax應用程式。
15-4 ASP.NET Ajax-三大元件

ASP.NET Ajax擴充功能：這是ASP.NET Ajax最主
要的元件，提供一組擴充的控制項，能夠與
ASP.NET技術緊密的結合來建立支援Ajax技術的
Web應用程式。
 Microsoft Ajax函式庫：這是Ajax技術瀏覽端的
JavaScript函式庫，即第15-2-3節所謂的Ajax引擎，
可以提供瀏覽程式遠端存取XML資料的能力。事
實上，JavaScript函式庫就是透過
XMLHttpRequest物件來建立非同步的HTTP請求，
支援Internet Explorer、Mozilla、Firefox和Apple
Safari等瀏覽程式。
 Microsoft Ajax Control Toolkit：提供數十種現成
的伺服端控制項，可以建立高互動性和動畫效果
的Web應用程式。
15-4 ASP.NET Ajax-ASP.NET
Ajax擴充功能控制項-1
 ASP.NET Ajax擴充功能新增的伺服端控制
項中，最常使用的控制項有四個，其說明
如下所示：


ScriptManager：管理瀏覽端腳本程式、部分網
頁內容更新、本土化、全球化設定和使用者自
訂腳本程式碼的控制項，簡單的說，其功能就
是控制和管理ASP.NET網頁的Ajax功能。
UpdatePanel：這是一種容器控制項，可以在
網頁建立指定區域來套用Ajax功能，換句話說，
需要部分更新網頁內容的使用介面，就是置於
此控制項之中。
15-4 ASP.NET Ajax-ASP.NET
Ajax擴充功能控制項-2


UpdateProgress：此控制項可以顯示
UpdatePanel控制項更新部分網頁內容時的進
度狀態。
Timer：能夠指定間隔時間來自動執行表單送回
功能的控制項，只需搭配UpdatePanel控制項，
就可以定時更新特定部分的網頁內容。
15-4 ASP.NET Ajax建立步驟(說明)
 在VWD開啟「工具箱」視窗，展開【AJAX
擴充功能】區段，就可以看到前述的
ASP.NET Ajax控制項，如下圖所示：
15-4 ASP.NET Ajax建立步驟(步驟)
在VWD建立ASP.NET Ajax應用程式的基本步驟，
如下所示：
 Step 1：在ASP.NET網頁新增ScriptManager控制
項，此控制項在執行時並不會顯示，它是在幕後
管理所有Ajax功能的執行。
 Step 2：新增UpdatePanel控制項來建立需要部
分更新的編輯區域。
 Step 3：將其他控制項拖拉至UpdatePanel控制
項中來建立網頁內容，換句話說，這些控制項就
是需要部分更新的網頁內容。

15-5 建立ASP.NET Ajax應用程式
第一個ASP.NET Ajax範例程式
 15-5-2 ASP.NET Ajax與GridView控制項
 15-5-1
15-5-1 第一個ASP.NET Ajax範
例程式-說明

在本節的第一個ASP.NET Ajax範例程式是一個非
常簡單的範例程式，當使用者按下按鈕，程式只
會更新Label控制項的部分網頁內容來顯示日期/
時間資料，而不會重新載入整頁的網頁內容。
使用ASP.NET
Ajax
15-5-1 第一個ASP.NET Ajax範
例程式-1
新增ScriptManager控制項

在「工具箱」視窗展開【AJAX擴充功能】區段，
拖拉【ScriptManager】控制項至<div>標籤，如
下圖所示：
15-5-1 第一個ASP.NET Ajax範
例程式-2
新增UpdatePanel控制項

在「工具箱」視窗展開【AJAX擴充功能】區段，
拖拉【UpdatePanel】控制項至表格第1列的第1
個儲存格，如下圖所示：
15-5-1 第一個ASP.NET Ajax範
例程式-3
新增控制項至UpdatePanel控制項

在「工具箱」視窗展開【標準】區段，拖拉Label
控制項至UpdatePanel控制項中，然後再拖拉
Button控制項至UpdatePanel控制項中的Label控
制項下方，如下圖所示：
15-5-1 第一個ASP.NET Ajax範
例程式-4
新增事件處理程序
protected void Button1_Click(object sender, EventArgs e)
{
lblOutput1.Text = DateTime.Now.ToString();
}
protected void Button2_Click(object sender, EventArgs e)
{
lblOutput2.Text = DateTime.Now.ToString();
}
15-5-1 第一個ASP.NET Ajax範例程
式-範例網站
ASP.NET網站：Ch15-5-1

在ASP.NET網頁新增ScriptManager和
UpdatePanel控制項，然後新增Label控制項的部
分網頁內容來顯示日期/時間資料，如下圖所示：
15-5-2 ASP.NET Ajax與
GridView控制項-說明
 同樣的，如果我們將GridView控制項置於
UpdatePanel控制項中，當切換顯示不同分
頁的記錄資料時，就只會更新GridView控
制項的部分網頁內容，而不會更新網頁其
他部分的內容。
15-5-2 ASP.NET Ajax與GridView控
制項-UpdateProgress控制項
 在「工具箱」視窗的【AJAX擴充功能】區
段，拖拉【UpdateProgress】控制項至網
頁的最後，如下圖所示：
15-5-2 ASP.NET Ajax與GridView控
制項-事件處理程序
因為資料量少執行太快，我們並無法看到
UpdateProgress控制項的內容，所以請切換至
【原始檔】，新增GridView控制項的
PageIndexChanged事件處理程序。
protected void
GridView1_PageIndexChanged(object sender,
EventArgs e)
{
System.Threading.Thread.Sleep(3000);
}

15-5-2 ASP.NET Ajax與
GridView控制項-範例網站
ASP.NET網站：Ch15-5-2

在ASP.NET網頁的UpdatePanel控制項中新增
GridView控制項，以便在切換分頁時，只更新
GridView控制項的部分網頁內容，如下圖所示：