第14章 伺服器檔案、電子郵件處理與Ajax 14-1 資料夾與檔案操作 14-2 文字檔案的讀寫 14-3 電子郵件與附檔處理

Presentation on theme: "第14章 伺服器檔案、電子郵件處理與Ajax 14-1 資料夾與檔案操作 14-2 文字檔案的讀寫 14-3 電子郵件與附檔處理"— Presentation transcript:

1 第14章 伺服器檔案、電子郵件處理與Ajax 14-1 資料夾與檔案操作 14-2 文字檔案的讀寫 14-3 電子郵件與附檔處理
14-5 ASP.NET Ajax 14-6 建立ASP.NET Ajax應用程式

2 14-1 資料夾與檔案操作 14-1-1 System.IO命名空間的基礎 14-1-2 顯示資料夾與檔案清單 14-1-3 顯示檔案資訊
檔案處理

3 14-1-1 System.IO命名空間的基礎- 說明
.NET Framework的檔案與資料夾處理屬於System.IO命名空間，在ASP.NET網頁只需匯入此命名空間，就可以存取檔案系統或處理文字檔案的「串流」（Streams）。

4 14-1-1 System.IO命名空間的基礎- 類別
說明 Directory 提供類別方法取得目前工作目錄、建立、移動和顯示資料夾與子資料夾清單 DirectoryInfo 一個資料夾是一個DirectoryInfo物件，可以建立、移動、刪除、檢查是否存在和顯示資料夾清單 File 提供類別方法來建立、複製、刪除、移動和開啟檔案，其主要目的是為了建立FileStream物件 FileInfo 一個檔案是一個FileInfo物件，提供相關方法可以建立、複製、刪除、移動和開啟檔案建立FileStream物件 StreamReader 使用位元組串流讀取文字檔案 StreamWriter 使用位元組串流寫入文字檔案 FileStream 建立檔案串流，支援同步與非同步讀取與寫入，可以用來處理二進位檔案

5 14-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/>";

6 顯示資料夾與檔案清單- 顯示檔案清單 DirectoryInfo物件的GetFiles()方法可以取得FileInfo檔案物件陣列，如下所示： FileInfo[] subFiles = dirInfo.GetFiles(); 上述程式碼取得FileInfo檔案物件陣列後，就可以使用foreach迴圈取得每一個FileInfo檔案物件，如下所示： foreach (FileInfo subFile in subFiles) { lblOutput.Text += subFile.Name + "<br/>"; }

7 14-1-2 顯示資料夾與檔案清單- 範例網站 ASP.NET網站：Ch14_1_2
在ASP.NET網頁使用DirectoryInfo物件方法取得伺服器「Test」目錄下的檔案和資料夾清單，如下圖所示：

8 14-1-3 顯示檔案資訊-說明 FileInfo類別屬性可以取得檔案資訊，首先建立FileInfo檔案物件fInfo，如下所示：
FileInfo fInfo = new FileInfo(path); 上述程式碼的建構子參數是檔案實際路徑，在建立物件後，就可以使用FileInfo物件屬性取得檔案資訊 。

9 顯示檔案資訊-屬性 FileInfo物件屬性的說明，如下表所示：

10 14-1-3 顯示檔案資訊-範例網站 ASP.NET網站：Ch14_1_3
在ASP.NET網頁使用FileInfo物件屬性來顯示Default.aspx的檔案資訊，如下圖所示：

11 檔案處理-說明 檔案處理是指刪除、複製、移動檔案和檢查檔案是否存在等操作。在System.IO名稱空間類別的檔案操作方法是使用FileInfo物件，如下所示： FileInfo fInfo = new FileInfo(path); 上述程式碼的參數path是檔案實際路徑，在建立FileInfo物件後，就可以使用相關方法執行檔案操作 。

12 檔案處理-檔案處理方法 FileInfo物件關於檔案處理的方法，如下表所示：

13 14-1-4 檔案處理-檔案處理屬性 FileInfo物件關於檔案處理的屬性，如下表所示：
上表Exists屬性可以檢查檔案是否存在，如下所示： if (fInfo.Exists) { ……… }

14 檔案處理-File類別的方法 在File類別提供相關類別方法，一樣可以執行檔案刪除、移動、複製和檢查檔案是否存在的操作，如下所示： File.Delete(path); File.Move(sourPath, destPath); File.Copy(sourPath, destPath, true); File.Exists(path);

15 14-2 文字檔案的讀寫 14-2-1 讀取與寫入文字檔案的步驟 14-2-2 文字檔案的寫入 14-2-3 文字檔案的讀取
檔案上傳控制項

16 讀取與寫入文字檔案的步驟-說明 在System.IO命名空間的StreamReader和StreamWriter串流類別是使用「串流」（Stream）模型來處理資料的輸入與輸出。 串流（Stream）觀念最早是使用在Unix作業系統，串流模型如同水管中的水流，當程式開啟檔案來源的輸入串流後，ASP.NET網頁可以從輸入串流依序讀取資料，如下圖所示：

17 14-2-1 讀取與寫入文字檔案的步驟- 步驟一：開啟或建立文字檔案
對於不存在的文字檔案，我們可以使用FileInfo物件的CreateText()方法來建立全新文字檔案，如下所示： StreamWriter sw = fileInfo.CreateText(); 上述程式碼建立StreamWriter文字串流寫入物件，這是新檔案。或是使用StreamReader或StreamWriter開啟存在的文字檔案，如下所示： StreamReader sr = new StreamReader(path);

18 14-2-1 讀取與寫入文字檔案的步驟- 步驟一：開啟或建立文字檔案
如果是寫入資料，請使用StreamWriter類別，如下所示： StreamWriter sw = new StreamWriter(path); 上述程式碼建立StreamWriter文字串流寫入物件，可以將文字內容寫入檔案。如果是在檔案最後新增文字內容，請使用FileInfo類別的AppendText()方法來開啟StreamWrite串流，如下所示： StreamWriter sw = fileInfo.AppendText();

19 14-2-1 讀取與寫入文字檔案的步驟- 步驟二：讀寫文字檔案串流(寫)
在建立StreamReader和StreamWriter串流物件後，就可以使用相關方法來執行文字檔案的讀寫。StreamWriter類別寫入文字檔案的相關方法，如下表所示：

20 14-2-1 讀取與寫入文字檔案的步驟- 步驟二：讀寫文字檔案串流(讀)
StreamReader類別讀取文字檔案內容的相關方法，如下表所示：

21 14-2-1 讀取與寫入文字檔案的步驟- 步驟三：關閉文字檔案串流
在處理完文字檔案讀寫後，請記得將緩衝區資料寫入和關閉檔案串流，如下所示： sw.Flush(); sw.Close();

22 文字檔案的寫入-說明 在ASP.NET網頁可以使用System.IO命名空間的StreamWriter串流類別來將資料寫入、覆寫或新增至文字檔案。 StreamWriter串流物件是使用Write()或WriteLine()方法，將字串內容寫入文字檔案。Write()方法的參數是寫入的字串，但不含換行符號；WriteLine()方法可以寫入含換行的字串。

23 文字檔案的寫入- 寫入資料到文字檔案 如果文字檔案不存在，我們可以使用FileInfo物件的CreateText()方法來建立StreamWriter串流物件，如下所示： StreamWriter sw = fileInfo.CreateText(); sw.Write(txtInput.Text + "\r\n"); 上述程式碼是建立全新文字檔案，因為Write()方法並不會換行，所以在後面加上"\r\n"來新增換行符號。

24 文字檔案的寫入- 覆寫文字檔案的資料 對於存在的文字檔案，我們可以使用StreamWrite串流物件開啟檔案來寫入資料，如下所示： StreamWriter sw = new StreamWriter(path); sw.WriteLine(txtInput.Text); 上述程式碼開啟存在的文字檔案，所以WriteLine()方法寫入的字串會覆寫原來檔案的內容。

25 文字檔案的寫入- 新增資料到文字檔案 如果我們準備將資料新增到目前存在檔案的檔尾，請使用FileInfo物件的AppendText()方法來開啟文字檔案，如下所示： StreamWriter sw = fileInfo.AppendText(); sw.Write(txtInput.Text + "\r\n"); 上述程式碼使用Write()或WriteLine()方法寫入資料時，就是新增至檔尾。

26 14-2-2 文字檔案的寫入-範例網站 ASP.NET網站：Ch14_2_2
在ASP.NET網頁將TextBox控制項輸入的字串寫入檔案Output.txt或新增到檔案最後，請直接使用記事本開啟檔案來檢視檔案內容，如下圖所示：

27 14-2-3 文字檔案的讀取-說明 System.IO命名空間的文字檔案讀取是使用StreamReader串流物件。
在本節範例的文字檔案是上一節建立的Output.txt文字檔案，目前檔案內容共有5列文字。

28 14-2-3 文字檔案的讀取-開啟檔案 在ASP.NET網頁可以使用StreamReader串流物件來開啟唯讀文字檔案，如下所示：
StreamReader sr = new StreamReader(path); 上述程式碼的建構子參數path是檔案實際路徑，開啟的是唯讀串流，內含檔案指標指向讀取位置，目前檔案指標是指向檔案開頭。

29 14-2-3 文字檔案的讀取- 讀取檔案的下一個字元
文字檔案的讀取可以選擇一列一列讀取或一字一字讀取。首先以一字一字為單位來讀取檔案，在開啟檔案後，檔案指標是指向檔案開頭，我們可以使用Read()方法讀取目前檔案指標位置的下一個字元，如下所示： ch = sr.Read();

30 文字檔案的讀取- 讀取檔案的多個字元 當再次呼叫Read()方法時，就是從目前檔案指標位置開始，讀取下一個字元。讀取多個字元可以使用for迴圈配合Read()方法來讀取，如下所示： for (i = 1; i <= 12; i++) { ch = sr.Read(); txtOutput.Text += (char)(ch) + " "; }

31 文字檔案的讀取- 讀取文字檔的一整行 StreamReader物件的ReadLine()方法可以一行一行讀取文字檔案內容，如下所示： str = sr.ReadLine(); 上述程式碼可以讀取一整行的文字內容，檔案指標一次移動一行，如下圖所示：

32 14-2-3 文字檔案的讀取- 讀取整個文字檔案(1)
StreamReader串流物件的ReadToEnd()方法可以讀取整個文字檔案的內容，如下所示： str = sr.ReadToEnd();

33 14-2-3 文字檔案的讀取- 讀取整個文字檔案(2)
我們可以使用ReadLine()方法配合do/while迴圈來讀取整個文字檔案內容，如下所示： do { textLine = sr.ReadLine(); count += 1; txtOutput.Text += count + ": " + textLine + "\r\n"; } while ( ! (sr.Peek() == -1));

34 14-2-3 文字檔案的讀取-範例網站 ASP.NET網站：Ch14_2_3
在ASP.NET網頁按下按鈕，可以讀取文字檔案Output.txt的幾個字元、幾行或整個檔案內容，並且將它顯示在唯讀的多行文字方塊，如下圖所示：

35 檔案上傳控制項-說明 FileUpload控制項可以選擇上傳檔案，然後使用控制項物件的SaveAs()方法儲存成伺服端檔案，即執行客戶端的檔案上傳。

36 14-2-4 檔案上傳控制項- 新增FileUpload控制項
在「工具箱」視窗展開【標準】區段，選【FileUpload】控制項，然後拖拉至<div>標籤中表格的第1列的第2欄即可插入FileUpload控制項。

37 檔案上傳控制項-屬性 FileUpload控制項的常用屬性，如下表所示：

38 14-2-4 檔案上傳控制項-方法 在FileUpload控制項選好上傳檔案後，就可以使用上表方法來上傳檔案，如下所示：
path += upImage.FileName; upImage.SaveAs(Server.MapPath(path)); 上述程式碼先使用FileName屬性建立伺服端檔案的相對路徑，然後使用Server.MapPath()方法取得實際路徑後，執行SaveAs()方法儲存成伺服端檔案。

39 14-2-4 檔案上傳控制項-範例網站 ASP.NET網站：Ch14_2_4
在ASP.NET網頁新增FileUpload控制項選擇上傳圖檔後，按下按鈕將它上傳至ASP.NET網站的「images」資料夾，如下圖所示：

40 14-3 電子郵件處理-匯入命名空間 ASP.NET網頁可以使用System.Net.Mail命名空間的類別來寄送電子郵件，在使用前需要匯入此命名空間，如下所示： using System.Net.Mail; 上述程式碼匯入System.Net.Mail命名空間後，就可以使用MailMessage和MailAddress類別建立電子郵件後，使用SmtpClient類別方法寄送電子郵件。 MailMessage類別建立的物件是一封電子郵件內容，如下所示： MailMessage myMail = new MailMessage();

41 14-3 電子郵件處理- MailMessage類別的屬性
說明 From 寄件者電子郵件地址的MailAddress物件 To 收件者電子郵件地址的MailAddress物件，如果不只一個，請使用Add()方法新增 CC 副本收件者，如果不只一個，請使用Add()方法新增 Bcc 密件副本收件者，如果不只一個，請使用Add()方法新增 Subject 電子郵件的主旨 Body 電子郵件的內容 IsBodyHtml 設定郵件格式是HTML或文字內容，true為HTML格式；false預設值是一般文字內容 Priority 電子郵件的優先等級，其值為MailPriority.Hight（高）、MailPriority.Normal（正常）和MailPriority.Low（低）

42 14-3 電子郵件處理- SmtpClient類別的屬性和方法(範例)
例如：使用HiNet的SMTP伺服器，如下所示： SmtpClient smtpServer = new SmtpClient(); smtpServer.Host = "ms2.hinet.net"; CredentialCache myCache = new CredentialCache(); myCache.Add("ms2.hinet.net", 25, "login", new NetworkCredential("hueyan", "1234")); smtpServer.Credentials = myCache; smtpServer.Send(myMail);

43 14-3 電子郵件處理- 附檔郵件的處理(上傳檔案)
電子郵件如果有附檔，檔案需要先上傳到伺服器後，才能新增成為電子郵件的Attachment附檔物件。ASP.NET網頁可以建立MailMessage物件新增上傳檔案成為附檔物件，如下所示： string uploadFile = "~/temp/"; if (fupFile.HasFile) { // 是否有上傳檔案 uploadFile += fupFile.FileName; // 建立路徑 uploadFile = Server.MapPath(uploadFile); fupFile.SaveAs(uploadFile);

44 14-3 電子郵件處理- 附檔郵件的處理(建立Attachment物件)
Attachment attachedFile = new Attachment(uploadFile); attachedFile.Name = fupFile.FileName; myMail.Attachments.Add(attachedFile); }

45 14-3 電子郵件處理-範例網站 ASP.NET網站：Ch14_3
在ASP.NET網頁使用TextBox控制項建立輸入郵件內容的表單，FileUpload控制項選擇上傳附檔，按下按鈕，即可使用System.Net.Mail命名空間的類別來寄送電子郵件，如右圖所示：

46 MailMessage myMail = new MailMessage(); myMail. To
MailMessage myMail = new MailMessage(); myMail.To.Add(new MailAddress(txtMailTo.Text)); //收件者，以逗號分隔不同收件者 ex myMail.From = new MailAddress(“your_ ”); //寄件者 myMail.Subject = txtSubject.Text; //郵件標題 myMail.SubjectEncoding = System.Text.Encoding.UTF8; //郵件標題編碼 myMail.BodyEncoding = System.Text.Encoding.UTF8; //郵件內容編碼 if (chkFormat.Checked) { myMail.IsBodyHtml = true; // HTML格式 myMail.Body = "<p>" + txtBody.Text + "</p>"; // 本文 } else myMail.Body = txtBody.Text; // 本文 // 處理郵件的附檔 string uploadFile = "~/temp/"; if (fupFile.HasFile) { // 是否有上傳檔案 uploadFile += fupFile.FileName; // 建立路徑 // 取得實際的路徑 uploadFile = Server.MapPath(uploadFile); fupFile.SaveAs(uploadFile); // 儲存上傳檔案 // 在電子郵件加上附檔 Attachment attachedFile = new Attachment(uploadFile); attachedFile.Name = fupFile.FileName; myMail.Attachments.Add(attachedFile); // 新增附檔 myMail.Priority = MailPriority.Normal; //郵件優先級 //建立 SmtpClient 物件 並設定 Gmail的smtp主機及Port // outlook.com smtp.live.com port:25; yahoo smtp.mail.yahoo.com.tw port:465 SmtpClient MySmtp = new SmtpClient("smtp.gmail.com", 587); MySmtp.Credentials = new “XXXXXX"); //設定你的帳號密碼 //Gmial 的 smtp 使用 SSL MySmtp.EnableSsl = true; MySmtp.Send(myMail); lblOutput.Text = "附檔電子郵件已經寄出.....<br/>";

47 14-4 Ajax的基礎 Ajax簡介 非同步HTTP請求 Ajax應用程式架構

48 Ajax簡介-說明 Ajax是Asynchronous JavaScript And XML的縮寫，譯成中文就是非同步JavaScript和XML技術。Ajax可以讓Web應用程式如同Windows應用程式一般，在瀏覽器建立快速、更佳和容易使用的操作介面。 Ajax是由Jesse James Garrett最早提出的名稱，事實上，Ajax是以一種新方法來整合現存的多種網頁技術。不過，直到Ajax被大量使用在Google網頁設計後，Ajax技術才受到大家的重視，並且快速成為目前網頁設計技術上的一顆耀眼新星。

49 14-4-1 Ajax簡介-組成元素 HTML/XHTML和CSS：在瀏覽器顯示使用者介面和呈現相關資料。 XML：伺服端非同步傳遞的資料。
XML DOM：當瀏覽端非同步取得XML資料後，可以進一步使用JavaScript程式碼和XML DOM來取出所需資訊。 XMLHttpRequest物件：JavaScript程式碼是透過XMLHttpRequest物件來建立非同步的HTTP請求。

50 非同步HTTP請求-說明 Ajax技術的核心是非同步HTTP請求（Asynchronous HTTP Requests），此種HTTP請求可以不用等待伺服端回應，即可讓使用者執行其他互動操作，例如：更改購物車的購買商品數量後，不需等待重新載入整個網頁，或自行按下按鈕來更新網頁，就可以接著輸入送貨的相關資訊。 簡單的說，非同步HTTP請求可以讓網頁使用介面，不會因為HTTP請求的等待回應而中斷。

51 14-4-2 非同步HTTP請求-同步HTTP請求
傳統HTTP請求的過程是同步HTTP請求（Synchronous HTTP Requests），如下圖所示：

52 14-4-2 非同步HTTP請求-非同步HTTP請求
非同步HTTP請求除了第1次載入網頁外，HTTP請求是在背景以XMLHttpRequest物件來送出的HTTP請求，送出後不需等待回應，所以不會影響到使用者在瀏覽器進行的互動，如下圖所示：

53 Ajax應用程式架構 Ajax應用程式架構的最大差異是在客戶端，新增JavaScript撰寫的Ajax引擎來處理HTTP請求，和取得伺服端回應的XML資料，如下圖所示：

54 14-5 ASP.NET Ajax-簡介 ASP.NET Ajax是微軟開發的Ajax技術解決方案，可以讓ASP.NET的Web應用程式，使用Ajax技術來建立更快速、更佳和容易使用的Web使用介面。 ASP.NET Ajax是一套完整Ajax技術解決方案，包含客戶端和伺服端元件，可以讓開發者輕鬆建立ASP.NET版的Ajax應用程式。

55 14-5 ASP.NET Ajax-三大元件 ASP.NET Ajax擴充功能：這是ASP.NET Ajax最主要的元件，提供一組擴充的控制項，能夠與ASP.NET技術緊密的結合來建立支援Ajax技術的ASP.NET應用程式。 Microsoft Ajax函式庫：這是Ajax技術瀏覽端的JavaScript函式庫，可以提供瀏覽器遠端存取XML資料的能力。 Microsoft Ajax Control Toolkit：提供數十種現成的伺服端控制項，可以建立高互動性和動畫效果的Web應用程式。

56 14-5 ASP.NET Ajax- ASP.NET Ajax擴充功能控制項
ScriptManager：管理瀏覽端腳本程式、部分網頁內容更新、本土化、全球化設定和使用者自訂腳本程式碼的控制項。 UpdatePanel：這是一種容器控制項，可以在網頁建立指定區域來套用Ajax功能。 UpdateProgess：此控制項可以顯示UpdatePanel控制項更新部分網頁內容時的進度狀態。 Timer：能夠指定間隔時間來自動執行表單送回功能的控制項，只需搭配UpdatePanel控制項，就可以定時更新特定部分的網頁內容。

57 14-5 ASP.NET Ajax- AJAX擴充功能區段
在Visual Studio Community開啟「工具箱」視窗，展開【AJAX擴充功能】區段，就可以看到上述ASP.NET Ajax控制項，如下圖所示：

58 14-5 ASP.NET Ajax- 建立步驟 Step 1：在ASP.NET網頁新增ScriptManager控制項，此控制項在執行時並不會顯示，而且需在其他ASP.NET Ajax控制項之前，它是在幕後管理所有Ajax功能的執行。 Step 2：新增UpdatePanel控制項來建立需要部分更新的編輯區域。 Step 3：將控制項拖拉至UpdatePanel控制項中建立網頁內容，換句話說，這些控制項就是需要部分更新的網頁內容。

59 14-6 建立ASP.NET Ajax應用程式 第一個ASP.NET Ajax範例網頁 ASP.NET Ajax與GridView控制項

60 14-6-1 第一個ASP.NET Ajax範例網頁-說明
在本節的第一個ASP.NET Ajax範例網頁是一個非常簡單的範例網頁，當使用者按下按鈕，網頁只會更新Label控制項的部分網頁內容來顯示日期/時間資料，而不會重新載入整頁的網頁內容。 使用ASP.NET Ajax

61 14-6-1 第一個ASP.NET Ajax範例網頁-1
新增ScriptManager控制項 在「工具箱」視窗展開【AJAX擴充功能】區段，拖拉【ScriptManager】控制項至<div>標籤，如下圖所示：

62 14-6-1 第一個ASP.NET Ajax範例網頁-2
新增UpdatePanel控制項 在「工具箱」視窗展開【AJAX擴充功能】區段，拖拉【UpdatePanel】控制項至表格第1列的第1個儲存格，如下圖所示：

63 14-6-1 第一個ASP.NET Ajax範例網頁-3
新增控制項至UpdatePanel控制項 在「工具箱」視窗展開【標準】區段，拖拉Label控制項至UpdatePanel控制項中，然後再拖拉Button控制項至UpdatePanel控制項中的Label控制項下方，如下圖所示：

64 14-6-1 第一個ASP.NET Ajax範例網頁-4
新增事件處理程序 01: protected void Button1_Click(object sender, EventArgs e) 02: { 03: lblOutput1.Text = DateTime.Now.ToString(); 04: } 05: 06: protected void Button2_Click(object sender, EventArgs e) 07: { 08: lblOutput2.Text = DateTime.Now.ToString(); 09: }

65 14-6-1 第一個ASP.NET Ajax範例網頁-範例網站
ASP.NET網站：Ch14_6_1 在ASP.NET網頁新增ScriptManager和UpdatePanel控制項，然後新增Label控制項的部分網頁內容來顯示日期/時間資料，如下圖所示：

66 14-6-2 ASP.NET Ajax與GridView控制項-說明
同樣的，如果將GridView控制項置於UpdatePanel控制項中，當切換顯示不同分頁的記錄資料時，就只會更新GridView控制項的部分網頁內容，而不會更新網頁其他部分的內容。

67 14-6-2 ASP.NET Ajax與GridView控制項-UpdateProgress控制項
在「工具箱」視窗的【AJAX擴充功能】區段，拖拉【UpdateProgress】控制項至網頁的最後，如下圖所示：

68 14-6-2 ASP.NET Ajax與GridView控制項-事件處理程序
因為資料量很少執行速度太快，事實上，我們並無法看到UpdateProgress控制項的內容，請在「屬性」視窗，新增GridView1控制項的GridView1_PageIndexChanged()事件處理程序。 01: protected void GridView1_PageIndexChanged(object sender, EventArgs e) 02: { 03: System.Threading.Thread.Sleep(3000); 04: }

69 14-6-2 ASP.NET Ajax與GridView控制項- 範例網站
ASP.NET網站：Ch14_6_2 在ASP.NET網頁的UpdatePanel控制項中新增GridView控制項，以便在切換分頁時，只更新GridView控制項的部分網頁內容，如右圖所示：