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

Slides:



Advertisements
Similar presentations
●公司簡介. ●公司組織 行銷 企劃部 行銷 企劃部 研發 設計部 研發 設計部 視覺 設計部 視覺 設計部 媒體 製作部 媒體 製作部 行動 裝置部 行動 裝置部 執行長 總經理 管理部 本公司組織人力配置除董事長、執行長、總經理外,共 有六大部門,分別為研發部 6 人、管理部 4 人、視覺設計部.
Advertisements

第 15 章 Mobile PHP 與 Ajax 15-1 Mobile PHP 15-2 Ajax 的基礎 15-2 Ajax 的基礎 15-3 jQuery 的 Ajax 方法 15-3 jQuery 的 Ajax 方法 15-4 應用實例:關鍵字建議清單 15-4 應用實例:關鍵字建議清單.
1 网站设计理念 大连理工大学创新实验学院 优秀网站展示 - LAMP 类网站
教育技术装备统计系统 使用培训 教育部基础教育司 教育部教育管理信息中心.
第15章 文件处理技术 变量和数组只能临时存储数据,且数据量很小, 当应用程序终止,数据就会丢失。如果需要将数 据长期存储或者存储大量数据,就需要用到文件。 文件维护的数据通常称为持久数据,存储在计算 机的辅助存储设备中,如磁盘、光盘等。许多程 序都要与外部数据进行交互,如数据库、XML,甚 至文本文件,因此文件操作是软件开发中必不可.
动态Web开发技术--JSP.
20 使用Dreamweaver构建HTML结构
网站如何定制建设???.
Web程序设计基础 太原理工大学 计算机科学与技术学院 林福平 求实创新
網頁技術簡介.
14 JavaScript语言基础 JavaScript是一种轻量级、解释型的Web开发语言。所谓轻量级,就是语言的体系结构不是很庞杂,例如,没有C、Java等语言中的类、内存管理、系统管理等高深的知识范畴;所谓解释型,就是语言在浏览器或服务器等环境中直接被解释执行,不需要对源代码进行编译操作。
第13章多项目设计与开发.
《ASP.NET数据库网站设计教程(C#版)》
DCWriter电子病历文档编辑器软件介绍
第6章 HTML控件和Web服务器控件 本章讲述的主要内容 6.1 ASP.NET控件概述 6.2 标准服务器端控件 6.3 数据验证控件
Microsoft Application Center Test
第8章 字串與陣列 8-1 字串處理 8-2 一維陣列的處理 8-3 建立多維陣列 8-4 不規則陣列與參數傳遞 8-5 陣列排序與搜尋.
《计算机网络技术》 asp.net 程序设计 文本类控件 笪静.
《ASP.NET数据库网站设计教程(C#版)》
C# 程式設計 第一部分 第1-4章 C# 程式設計 - 南華大學資管系.
《ASP.NET数据库网站设计教程(C#版)》
第13章 檔案與資料夾處理 13-1 System.IO類別的基礎 13-2 檔案與資料夾操作 13-3 文字檔案的讀寫
BLANK overview.
Chapter 4 基本伺服器控制項.
Chapter 5 進階伺服器控制項.
網路點名系統 致遠管理學院網路通訊學系 張逸中 2007/6/22.
Ajax编程技术 第一章 Ajax简介.
Ch11 檔案上傳及電子郵件 WEB程式設計.
ASP.NET 網頁製作教本 – 從基本語法學起
在 Web 应用中,导航是非常重要的。ASP
Chapter 12 T-SQL 語法與 ASP.NET.
第12章 伺服器的檔案處理 12-1 System.IO類別的基礎 12-2 檔案與資料夾操作 12-3 文字檔案的寫入
第14章 建立網路應用程式 14-1 瀏覽器的建立 14-2 檔案下載器 14-3 寄送電子郵件 14-4 檢查POP 3的電子郵件.
第十三章 文件和注册表操作.
C#程序设计 c# programming 网络编程 C#程序设计课程组.
Visual Studio IDE基本操作 建國科技大學 資管系 饒瑞佶.
基于 C# 的 .NET Framework 程序设计
ASP.NET 網頁製作教本 – 從基本語法學起
讲课人:王璞 浙江工商职业技术学院.
委派與執行緒 建國科技大學 資管系 饒瑞佶.
PHP 程式流程控制結構.
第三章 流程控制與例外處理 資訊教育研究室 製作 注意:本投影片僅供上課使用,非經同意,請勿散播或轉載。
第15章 豐富控制項.
form1 卡拉OK pictureBox1 fish1.bmp pictureBox2 fish2.bmp label1 卡拉OK字幕機
視窗程式設計簡介-VB、Visual Studio
GMAIL OUTLOOK 設定.
文件流. 文件流 文件流 Stream FileStream BufferedStream MemoryStream NetworkStream …… 所有流的抽象 Stream FileStream BufferedStream MemoryStream NetworkStream ……
第7章 Web伺服器檔案與XML文件的處理 7-1 System.IO名稱空間的基礎 7-2 伺服器的資料夾與檔案操作
第5章 .NET框架类 5.
例外處理與 物件序列化(Exception Handling and Serialization of Objects)
檔案讀寫與例外處理 (File IO and Exception Handling)
課程名稱:_____________ 指導教授:_____________
第 十二 章 C# 中的文件处理.
Visual Basic.NET 程序设计语言课程内容
P2P聊天工具.
第三章 C# 基础知识.
第18章 個人入口網站的建立 18-1入口網站的基礎 18-2 建立網站的搜尋引擎 18-3 網頁組件的個人化功能
Ch04 VB.NET的流程控制 網頁程式設計.
补充:c#语言基础.
一個基於Web Service的 洪氾預警系統
1 Session对象的特性 Session 状态对象 Session 对象常用的方法有: Session 对象常用的属性有:
第6章 運算式與運算子 [算術與多功能計算機]
第3章 JavaScript基本语句.
网 站 设 计 与 建 设 Website design and developments
本章要点: 了解ASP.NET 4.5的基础.NET Framework。
PHP程式設計 五、程式流程控制結構 建國科技大學 資訊管理學系 饒瑞佶.
W3C标准网页制作 主讲教师:张 涛.
第6章 PHP基本語法介紹.
C#快速導讀 流程控制.
openFileDialog1.ShowDialog() 對話匣
Presentation transcript:

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

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

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

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

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

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

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

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

14-1-3 顯示檔案資訊-屬性 FileInfo物件屬性的說明,如下表所示:

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

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

14-1-4 檔案處理-檔案處理方法 FileInfo物件關於檔案處理的方法,如下表所示:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

14-2-4 檔案上傳控制項-屬性 FileUpload控制項的常用屬性,如下表所示:

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

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

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

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(低)

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);

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

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

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

MailMessage myMail = new MailMessage(); myMail. To MailMessage myMail = new MailMessage(); myMail.To.Add(new MailAddress(txtMailTo.Text)); //收件者,以逗號分隔不同收件者 ex "test@gmail.com,test2@gmail.com" myMail.From = new MailAddress(“your_email”); //寄件者 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 System.Net.NetworkCredential(“XXX@gmail.com", “XXXXXX"); //設定你的帳號密碼 //Gmial 的 smtp 使用 SSL MySmtp.EnableSsl = true; MySmtp.Send(myMail); lblOutput.Text = "附檔電子郵件已經寄出.....<br/>";

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

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

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

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

14-4-2 非同步HTTP請求-同步HTTP請求 傳統HTTP請求的過程是同步HTTP請求(Synchronous HTTP Requests),如下圖所示:

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

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

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

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應用程式。

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

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

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

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

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

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

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

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

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: }

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

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

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

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: }

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