ASP.NET基礎與開發環境的建立

Size: px

Start display at page:

Download "ASP.NET基礎與開發環境的建立"

箭茂霍
5 years ago
Views:

第 1 章 ASP.NET 基礎與開發環境的建立第 1 章 ASP.NET 基礎與開發環境的建立 1-1 Web 應用程式的基礎 1-2 網頁設計技術 1-3 ASP.NET 與.NET Framework 1-4 建立 ASP.NET 開發環境 1-5 VS Express for Web 的基本使用 1-6 建立第一頁 ASP.NET 網頁 http://www1.chihlee.edu.

2 1-1 Web 應用程式的基礎 - WWW 與主從架構系統 ( 說明 ) WWW (World Wide Web, 簡稱 Web) 全球資訊網是 1989 年歐洲高能粒子協會一個研究小組開發的 Internet 服務,Web 能夠在網路上傳送圖片文字影像和聲音等多媒體資料, 這是由 Tim Berners Lee 領導的小組開發的主從架構和分散式網路服務系統 WWW

1 第 1 章 ASP.NET 基礎與開發環境的建立第 1 章 ASP.NET 基礎與開發環境的建立 1-1 Web 應用程式的基礎 1-2 網頁設計技術 1-3 ASP.NET 與.NET Framework 1-4 建立 ASP.NET 開發環境 1-5 VS Express for Web 的基本使用 1-6 建立第一頁 ASP.NET 網頁 Note: Some slides and/or pictures in the following are adapted from slides 2015 旗標出版股份有限公司 Web 應用程式的基礎 - WWW 與主從架構系統 ( 說明 ) WWW (World Wide Web, 簡稱 Web) 全球資訊網是 1989 年歐洲高能粒子協會一個研究小組開發的 Internet 服務,Web 能夠在網路上傳送圖片文字影像和聲音等多媒體資料, 這是由 Tim Berners Lee 領導的小組開發的主從架構和分散式網路服務系統 WWW 全球資訊網是一種主從架構系統, 在主從架構的主端是指伺服端 (Server) 的 Web 伺服器, 儲存 HTML 網頁圖片和相關檔案, 從端是客戶端 (Client), 也就是使用者執行瀏覽器的電腦, 負責和伺服器溝通和讀取伺服器的資料, 其傳送的是 HTML 網頁圖檔和相關檔案 1-1 Web 應用程式的基礎 - WWW 與主從架構系統 ( 圖例 ) 在 Web 伺服器儲存資料, 以微軟來說就是 IIS (Internet Information Services), 從端使用瀏覽器取得與顯示伺服端的資料, 例如 :Internet Explorer 瀏覽器 3 4 1

1-1 Web 應用程式的基礎 - HTTP 通訊協定 HTTP 通訊協定 (Hypertext Transfer Protocol) 是一種在伺服端 (Server) 和客戶端 (Client) 之間傳送資料的通訊協定, 如下圖所示 : 1-1 Web 應用程式的基礎 - HTTP 通訊協定的特性 HTTP 通訊協定並不會持續保持連線 :

( 說明 ) Web 應用程式 (Web Applications) 簡單的說是一組網頁 ( 包含 HTML 網頁圖片和相關伺服端網頁技術的程式檔案 ) 的集合, 請注意!Web 應用程式是在 Web 伺服器執行, 並不是在客戶端電腦的瀏覽器執行 Web 應用程式主要的功能是回應使用者的請求, 並且與使用者進行互動, 以 ASP.NET 技術來說, 就是建立 ASP.

2 1-1 Web 應用程式的基礎 - HTTP 通訊協定 HTTP 通訊協定 (Hypertext Transfer Protocol) 是一種在伺服端 (Server) 和客戶端 (Client) 之間傳送資料的通訊協定, 如下圖所示 : 1-1 Web 應用程式的基礎 - HTTP 通訊協定的特性 HTTP 通訊協定並不會持續保持連線 : 只有當瀏覽器提出請求時才建立連線, 在請求後就斷線等待回應, 每一次請求和回應都需要事先建立連線 HTTP 通訊協定並不會保留狀態 : 因為 HTTP 通訊協定並不會保持連線, 所以在連線時, 伺服端和客戶端互相知道對方, 一旦請求結束, 就互不相干, 所以使用者狀態並不會保留, 每一次連線都如同是一位新使用者 Web 應用程式的基礎 - Web 應用程式 ( 說明 ) Web 應用程式 (Web Applications) 簡單的說是一組網頁 ( 包含 HTML 網頁圖片和相關伺服端網頁技術的程式檔案 ) 的集合, 請注意!Web 應用程式是在 Web 伺服器執行, 並不是在客戶端電腦的瀏覽器執行 Web 應用程式主要的功能是回應使用者的請求, 並且與使用者進行互動, 以 ASP.NET 技術來說, 就是建立 ASP.NET 網站的 Web 應用程式目前 Internet 擁有多種不同類型的 Web 應用程式, 例如 : 網路銀行電子商務網站搜尋引擎網路商店拍賣網站和電子公共論壇等 1-1 Web 應用程式的基礎 - Web 應用程式 ( 圖例 ) Web 應用程式就是一種 Web 基礎 (Web-Based) 的資訊處理系統 (Information Processing Systems), 如下圖所示 : 7 8 2

3 1-2 網頁設計技術客戶端網頁技術伺服端網頁技術客戶端網頁技術 - 說明客戶端網頁技術是指程式碼或網頁是在使用者客戶端電腦的瀏覽器中執行, 因為瀏覽器本身支援直譯程式, 所以可以執行客戶端網頁技術, 如下圖所示 : 客戶端網頁技術 - 種類 1 Java Applet: 使用 Java 語言撰寫一種 Java 應用程式, 我們需要使用編譯程式將原始程式碼編譯成位元組碼, 即 Java Applet, 瀏覽器需要使用 Java 直譯程式 JVM (Java Virtual Machine) 來執行 JavaScript(Jscript):JavaScript 是 Netscape 開發的一種 Script 腳本語言, 淺顯的程式語法, 就算初學程式設計者也可以運用自如, 輕鬆在網頁上建立互動效果 ;Jscript 為微軟推出相容 JavaScript 的 Script 語言, 簡單的說,Netscape 或 Mozilla Firefox 支援 JavaScript;Internet Explorer 支援 Jscript 客戶端網頁技術 - 種類 2 ActionScript 與 Flash:ActionScript 是 Macromedia 公司開發的一種 Script 腳本語言, 可以讓 Flash 動畫電影檔產生互動效果, 這是一種類似 JavaScript 語法的腳本語言 Flash 是 Macromedia 公司的軟體名稱, 可以用來建立動畫效果, 瀏覽器只需安裝 Flash 播放程式, 就可以在網頁顯示 Flash 檔案建立的動畫效果我們可以使用 Flash 和 ActionScript 來輕鬆建立動畫效果的網頁應用程式 VBScript:VBScript 是 Visual Basic 語言家族的成員, 全名 Microsoft Visual Basic Scripting Edition, 簡稱 VBScript VBScript 是一種完全免費的直譯程式語言, 它也是一種在瀏覽器執行的網頁語言, 能夠讓網頁設計者開發互動多媒體的網頁內容, 目前只有微軟 Internet Explorer 瀏覽器支援 VBScript

4 1-2-1 客戶端網頁技術 - 種類 3 DHTML: DHTML (Dynamic HTML) 是一種在瀏覽器建立 HTML 動態效果的技術, 主要是由三種元素所組成 :HTML CSS 和 Script 語言 Ajax:Ajax 是 Asynchronous JavaScript And XML 的縮寫, 譯成中文就是非同步 JavaScript 和 XML 技術,Ajax 技術是由 HTML 和 CSS XML XML DOM 和 XMLHttpRequest 物件所組成 Silverlight:Silverlight 是一套用來開發豐富網際網路應用程式 (Rich Internet Application,RIAs) 的工具程式, 其定位和 Macromedia 公司的 Flash 相同, 這是微軟開發的 RIA 工具, 提供網頁設計師另一種建立豐富網頁內容的選擇伺服端網頁技術 - 說明伺服端網頁技術是在 Web 伺服器上執行的應用程式, 而不是在客戶端電腦的瀏覽器執行, 如下圖所示 : 伺服端網頁技術 - 種類 1 CGI(Common Gateway Interface): 共通匣道介面提供 Web 伺服器執行外部程式的管道,CGI 應用程式是一種外部程式的執行檔, 能夠使用各種程式語言來開發, 例如 :Visual Basic C C++ 和 Perl, 程式需要編譯成執行檔案, 以便在伺服端執行 ASP(Active Server Pages): 英文字面上是一種讓網頁在伺服器上動起來的技術, 能夠將 Script 語言內嵌 HTML 標籤的網頁, 在伺服端產生動態網頁內容, 這是一種在伺服端以直譯方式執行的網頁技術伺服端網頁技術 - 種類 2 ASP.NET:ASP.NET 是繼 ASP 3.0 後, 微軟開發的伺服端網頁技術, 以 CLR (Common Language Runtime) 架構的.NET 程式設計平台, 可以讓我們使用 CLR 語言在伺服端建立 Web 應用程式 PHP(PHP: Hypertext Preprocessor): 一種通用和開放原始碼 (Open Source) 的伺服端 Script 語言, 可以直接內嵌於 HTML 網頁, 特別適用在 Web 網站的開發, 主要是使用在 Linux/Unix 作業系統的伺服端網頁技術, 目前也支援 Windows 作業系統

5 1-2-2 伺服端網頁技術 - 種類 3 JSP(Java Server Pages):Java 家族中和 ASP 一較長短的網頁技術, 以 Java 語言來說,Java Applet 是下載到客戶端執行的程式檔 ;Java Servlet 是在伺服端執行 ; JSP 是結合 HTML 和 Java Servlet 的一種伺服端網頁技術 1-3 ASP.NET 與.NET Framework NET Framework ASP.NET 技術的三種開發模型 NET Framework- 說明.NET Framework 是微軟下一個世代的程式開發平台, 它是由 CLR 和.NET Framework 類別函數庫所組成當我們使用.NET Framework 支援的程式語言編寫程式碼檔案後, 就可以使用.NET 編譯程式進行編譯, 不過,.NET Framework 不是編譯成 CPU 可執行的機器語言, 而是一種中間程式語言稱為 MSIL (Microsoft Intermediate Language) NET Framework- 圖例當需要執行程式時,CLR 是使用 JIT (Just In Time) 編譯程式將 MSIL 轉換成機器語言來執行程式, 如下圖所示 :

1-3-1.NET Framework- 類別函數庫.NET Framework 類別函數庫 (.NET Framework Class Library, 簡稱.NET FCL) 提供龐大的類別物件, 幫助我們建立各種應用程式, 只需支援.NET Framework 的程式語言都可以使用類別函數庫的物件和方法 1-3-2 ASP.NET 技術的三種開發模型 - 說明 ASP.NET 是一種架構在.

6 1-3-1.NET Framework- 類別函數庫.NET Framework 類別函數庫 (.NET Framework Class Library, 簡稱.NET FCL) 提供龐大的類別物件, 幫助我們建立各種應用程式, 只需支援.NET Framework 的程式語言都可以使用類別函數庫的物件和方法 ASP.NET 技術的三種開發模型 - 說明 ASP.NET 是一種架構在.NET Framework 的 CLR 平台的網頁技術, 其主要目的是建立 Web 應用程式目前 ASP.NET 共有三種開發模型來建立 ASP.NET 應用程式, 如下圖所示 : ASP.NET 技術的三種開發模型 - ASP.NET Web Forms 開發模型 ASP.NET Web Forms 開發模型傳統 ASP.NET 開發模型, 這是一種事件驅動和伺服端控制項的開發模型, 其目的是隱藏 HTTP 請求, 使用伺服端控制項來全權處理頁面顯示, 以便讓我們如同建立桌上型 Windows Form 應用程式一般的建立 Web 應用程式 ASP.NET 技術的三種開發模型 - ASP.NET Web Pages 開發模型 ASP.NET Web Pages 開發模型 ASP.NET 開發模型的最新成員, 這是一種以頁面為中心的開發模型, 類似 ASP 和 PHP 技術, 可以讓開發者全權控制網頁的顯示, 和整合客戶端網頁技術的各種套件, 並且使用內建範本和幫助者類別來快速建立 Web 應用程式

1-3-2 ASP.NET 技術的三種開發模型 - ASP.NET MVC 開發模型 ASP.NET MVC 開發模型使用著名 MVC 設計模式來建立 Web 應用程式, 可以將 Web 應用程式分割成三大部分 Models Views 和 Controllers, 分別是資料顯示和處理請求, 在顯示部分預設是和 Web Pages 開發模型使用相同的 Razor 語法 1-4 建立 ASP.

7 1-3-2 ASP.NET 技術的三種開發模型 - ASP.NET MVC 開發模型 ASP.NET MVC 開發模型使用著名 MVC 設計模式來建立 Web 應用程式, 可以將 Web 應用程式分割成三大部分 Models Views 和 Controllers, 分別是資料顯示和處理請求, 在顯示部分預設是和 Web Pages 開發模型使用相同的 Razor 語法 1-4 建立 ASP.NET 開發環境微軟的 Visual Studio 下載與安裝 VS Express for Web 微軟的 Visual Studio- 說明微軟程式語言的整合開發環境稱為 Visual Studio, 它是微軟公司開發的應用程式整合開發環境, 能夠在同一套應用程式編輯編譯除錯和測試.NET 語言所建立的應用程式 Visual Studio 是一套支援.NET Framework 的整合開發環境, 可以使用 C# Visual Basic C++ 和 J# 等語言來建立 Windows ASP.NET 主控台和 Web Services 等各種不同的應用程式微軟的 Visual Studio- 圖例在 Visual Studio 整合開發環境建立的應用程式是在.NET Framework 的 CLR 平台上執行, 如下圖所示 :

1-4-2 下載與安裝 VS Express for Web- 說明 ASP.NET 的開發環境 (Development Environment) 是一組工具程式, 可以幫助網頁設計或程式設計者建立測試和維護 ASP.NET 技術建立的 Web 應用程式在本書是使用 Visual Studio Express 2012 for Web 來建立 ASP.

NET 網站 ( 即 Web 應用程式 ) 的整合開發環境 1-4-2 下載與安裝 VS Express for Web- 下載 VS Express for Web 版可以在網路上免費下載, 其下載網址為 : http://www.microsoft.

8 1-4-2 下載與安裝 VS Express for Web- 說明 ASP.NET 的開發環境 (Development Environment) 是一組工具程式, 可以幫助網頁設計或程式設計者建立測試和維護 ASP.NET 技術建立的 Web 應用程式在本書是使用 Visual Studio Express 2012 for Web 來建立 ASP.NET 開發環境 Visual Studio Express 2012 for Web( 簡稱 VS Express for Web) 是一套用來開發 ASP.NET 網站 ( 即 Web 應用程式 ) 的整合開發環境下載與安裝 VS Express for Web- 下載 VS Express for Web 版可以在網路上免費下載, 其下載網址為 : downloads 請選 Visual Studio Express 2012 for Web 後, 再選中文, 就可以點選立即下載超連結, 下載繁體中文版的 ISO 檔, 然後使用燒錄程式將 ISO 檔燒錄成安裝光碟下載與安裝 VS Express for Web- 安裝請將 VS Express for Web 光碟置入光碟機後, 稍等一下, 可以看到啟動安裝程式 1-5 VS Express for Web 的基本使用啟動與關閉 VS Express for Web 建立 ASP.NET 技術的 Web 網站加入 ASP.NET 網頁 ASP.NET 網站的無專案開發

Web 請執行檔案 / 結束指令 1-5-2 建立 ASP.NET 技術的 Web 網站 - 說明 VS Express for Web 支援建立 ASP.

9 1-5-1 啟動與關閉 VS Express for Web- 註冊 VS Express for Web 如果是第一次啟動, 就會要求註冊產品來取得使用權 ( 註冊過程是完全免費, 沒有註冊只能使用 30 天 ), 在啟動後, 就可以著手建立第一個 ASP.NET 網站, 如右圖所示 : 啟動與關閉 VS Express for Web- 啟動按關閉鈕啟動 VS Express for Web, 在成功註冊之後, 就可以直接進入執行畫面啟動與關閉 VS Express for Web- 關閉離開 VS Express for Web 請執行檔案 / 結束指令建立 ASP.NET 技術的 Web 網站 - 說明 VS Express for Web 支援建立 ASP.NET 技術的 Web 網站 (Web Site), 依儲存位置可以建立三種 Web 網站, 其說明如下所示 : HTTP 網站 : 建立位在 Web 伺服器上的 Web 網站, 我們需要在 Internet 擁有 Web 伺服器支援 ASP.NET 技術的網頁空間, 或在 Windows 作業系統自行安裝 IIS, 才能建立 HTTP 網站 FTP 網站 : 建立可以使用 FTP 伺服器部署的網站, 也就是透過 FTP 伺服器來存取 ASP.NET 網站的內容檔案系統網站 : 儲存在本機硬碟資料夾的 Web 網站

NET 空網站, 在下方 Web 位置欄選檔案系統, 按確定鈕 37 1-5-3 加入 ASP.NET 網頁 - 說明在建立空白 ASP.NET 網站後, 我們可以在網站加入 ASP.NET 網頁來編輯網頁內容一般來說, 在 ASP.

$NET 網站例如 : 開啟 C:\ 範例網站 \Ch01\Ch1-5-3 路徑的檔案系統網站來加入 ASP.$

10 1-5-2 建立 ASP.NET 技術的 Web 網站 - 建立請啟動 VS Express for Web 看到起始頁後, 執行檔案 / 新網站指令, 可以看到新網站對話方塊選已安裝的項目下的 Visual Basic 後, 中間選 ASP.NET 空網站, 在下方 Web 位置欄選檔案系統, 按確定鈕加入 ASP.NET 網頁 - 說明在建立空白 ASP.NET 網站後, 我們可以在網站加入 ASP.NET 網頁來編輯網頁內容一般來說, 在 ASP.NET 網站主要可以加入兩種網頁, 其說明如下所示 : Web Forms 表單 : 包含 HTML 標籤和伺服端控制項的網頁, 即 ASP.NET 網頁, 其副檔名為.aspx, 詳見第 1-6 節的說明 HTML 網頁 : 內含 HTML 標籤的網頁, 並不含任何 ASP.NET 控制項, 其副檔名是.html, 詳見第 2 章的說明加入 ASP.NET 網頁 - 開啟 ASP.NET 網站例如 : 開啟 C:\ 範例網站 \Ch01\Ch1-5-3 路徑的檔案系統網站來加入 ASP.NET 網頁, 請執行檔案 / 開啟網站指令, 可以看到開啟網站對話方塊開啟範例網站 \Ch01\Ch1-5-3 路徑的檔案系統網站加入 ASP.NET 網頁 - 加入網頁在方案總管視窗的網站根目錄上, 執行右鍵快顯功能表的加入 / 加入新項目指令, 可以看到加入新項目對話方塊選 Web Form, 名稱欄的預設檔案名稱是 Default.aspx, 不用更改, 取消勾選將程式碼置於個別檔案中, 按新增鈕

1-5-3 加入 ASP.NET 網頁 - 介面說明工具箱標籤編輯視窗方案總管屬性視窗 1-5-3 加入 ASP.

11 1-5-3 加入 ASP.NET 網頁 - 介面說明工具箱標籤編輯視窗方案總管屬性視窗加入 ASP.NET 網頁 - 編輯視窗 VS Express for Web 開發環境的最主要部分是中間標籤頁的編輯視窗, 選取視窗下方的三個標籤, 可以切換三種不同的檢視方式, 如下所示 : 設計檢視 :VS Express for Web 視覺化設計工具, 只需從工具箱視窗選取控制項, 就可以拖拉建立 ASP.NET 網頁內容分割檢視 : 將編輯視窗分割成上下兩部分, 上方是原始程式碼 ; 下方是設計檢視, 在下方選取控制項, 可以在上方顯示對應的標籤程式碼原始檔檢視 :ASP.NET 網頁的程式碼編輯視窗, 可以顯示 Visual Basic 和控制項標籤的程式碼加入 ASP.NET 網頁 - 方案總管視窗 VS Express for Web 的方案總管視窗是 ASP.NET 網站檔案和資料夾的管理視窗, 可以顯示目前開啟 ASP.NET 網站的檔案和資料夾清單, 按二下檔案名稱就可以開啟指定檔案加入 ASP.NET 網頁 - 屬性視窗在屬性視窗可以檢視 ASP.NET 網頁或控制項等物件的相關屬性, 在上方欄位顯示的是選取物件 ; 下方可以顯示此物件的屬性清單

12 1-5-4 ASP.NET 網站的無專案開發無專案開發 (Projectless Development) 不同於 Visual Studio 開發其他類型應用程式的方式, 例如 :Windows Form 應用程式, 因為我們建立的 Web 網站並沒有專案檔案, 即副檔名.vbproj 的檔案無專案開發的優點在於 Web 網站架構簡潔, 沒有多餘檔案, 而且可以直接對應部署至 Web 伺服器的網站架構, 換句話說, 在部署 Web 網站時, 只需將整個資料夾複製至 Web 伺服器即可, 不用考量是否複製多餘的開發資訊, 不只如此, 因為沒有專案, 我們可以輕鬆分配工作讓小組成員來分工合作完成整個 ASP.NET 網站 1-6 建立第一頁 ASP.NET 網頁 ASP.NET 網頁的基本架構建立第一頁 ASP.NET 網頁 Web Form 表單的程式架構 ASP.NET 網頁的基本架構 - 說明 ASP.NET 網頁的副檔名是.aspx, 在實作上, 我們可以使用三種程式架構來建立 ASP.NET 網頁 : 內嵌於 HTML 標籤內嵌程式碼分割隱藏程式碼模型 ASP.NET 網頁的基本架構 - 內嵌於 HTML 標籤 ASP.NET 網頁的架構是使用 <% %> 符號, 將程式碼內嵌於 HTML 標籤中, 這種架構屬於傳統 ASP 技術 (Class ASP) 的寫法, 其主要目的是與舊版 ASP 技術相容, ASP.NET 並不建議使用此架構, 如下所示 : <% Balance = 1000 Interest = Balance * Rate %>

1-6-1 ASP.NET 網頁的基本架構 - 內嵌程式碼分割內嵌程式碼分割 (Inline Code Separation) 的程式檔架構分成兩大部分 : 伺服端控制項的 Web Form 表單和事件處理程序 VS Express for Web 是使用 Web Form 範本, 並且取消勾選將程式碼置於個別檔案中來建立此種類型的 ASP.

13 1-6-1 ASP.NET 網頁的基本架構 - 內嵌程式碼分割內嵌程式碼分割 (Inline Code Separation) 的程式檔架構分成兩大部分 : 伺服端控制項的 Web Form 表單和事件處理程序 VS Express for Web 是使用 Web Form 範本, 並且取消勾選將程式碼置於個別檔案中來建立此種類型的 ASP.NET 網頁雖然事件處理程序和伺服端控制項的標籤程式碼位在同一個檔案, 但是分割成不同區塊, 事件處理程序是位在開頭的 <script> 標籤 ; 控制項是位在 <body> 標籤的 <form> 子標籤 ASP.NET 網頁的基本架構 - 隱藏程式碼模型隱藏程式碼模型 (Code Behind Model) 可以將前述內嵌程式碼分割架構的控制項和事件處理程序都獨立成檔案, 換句話說, 完整 ASP.NET 網頁是由兩個檔案組成, 例如 :Default.aspx 和 Default.aspx.vb, 一個是標籤的使用介面 ; 另一個是事件處理程序的類別檔 VS Express for Web 預設建立的 ASP.NET 網頁屬於此架構, 本書範例的 ASP.NET 網頁也是使用此架構, 它是和 Windows Form 使用相同的 Partial 部分類別來實作建立第一頁 ASP.NET 網頁 - 事件驅動程式設計在 VS Express for Web 建立 ASP.NET 網頁是使用事件驅動程式設計, 其執行順序需視使用者的操作而定, 也就是依觸發的事件來執行適當的處理例如 : 當在網頁表單輸入註冊資料後, 按註冊鈕, 就會觸發 Click 事件, 程式依觸發事件執行對應的事件處理程序來進行處理, 關於事件的進一步說明請參閱第 4 章建立第一頁 ASP.NET 網頁 - 步驟一步驟一 : 加入與開啟 ASP.NET 網頁在 VS Express for Web 開啟 ASP.NET 網站且加入隱藏程式碼模型的 ASP.NET 網頁 Default.aspx 後, 就可以開啟 ASP.NET 網頁來新增控制項, 如下圖所示 :

檢視是一種隨看即所得的視覺化編輯工具, 我們只需在工具箱視窗選取控制項, 就可以在 Web Form 表單上新增控制項的元件,

屬性視窗設定控制項屬性, 如下圖所示 : Label1 控制項屬性值屬性 53 54 NET 網頁 - 步驟四步驟四 :

TextBox NET 網頁 - 步驟五步驟五 : 在 Button 控制項新增事件處理程序在 Web Form 表單共新增

14 1-6-2 建立第一頁 ASP.NET 網頁 - 步驟二步驟二 : 在 Web Form 表單新增控制項 VS Express for Web 編輯視窗的設計檢視是一種隨看即所得的視覺化編輯工具, 我們只需在工具箱視窗選取控制項, 就可以在 Web Form 表單上新增控制項的元件, 如下圖所示 : 建立第一頁 ASP.NET 網頁 - 步驟三步驟三 : 設定控制項屬性在 Web Form 表單新增控制項後, 就可以在右下方屬性視窗設定控制項屬性, 如下圖所示 : Label1 控制項屬性值屬性建立第一頁 ASP.NET 網頁 - 步驟四步驟四 : 新增其他控制項接著請重複步驟二和三新增 TextBox 和 Button 按鈕控制項, 並且設定相關屬性, 如下圖所示 : TextBox 建立第一頁 ASP.NET 網頁 - 步驟五步驟五 : 在 Button 控制項新增事件處理程序在 Web Form 表單共新增 Label1 TextBox1 和 Button1 三個控制項接著新增按鈕控制項的事件處理程序, 如下所示 : Button

15 1-6-2 建立第一頁 ASP.NET 網頁 - 步驟六步驟六 : 預覽 ASP.NET 網頁內容在完成 Web Form 表單設計和輸入程式碼後, 我們就可以預覽 ASP.NET 網頁內容, 請執行檔案 / 在瀏覽器中檢視指令或右鍵快顯功能表的在瀏覽器中檢視指令, 可以看到瀏覽器顯示的執行結果 Web Form 表單的程式架構 - 說明 Web Form 表單可以建立跨平台和跨瀏覽器 Web 應用程式的輸入介面, 其架構是一種事件驅動程式設計模型 (Event-driven Programming Model), 使用伺服端控制項建立 Web Form 表單的使用介面當產生事件時, 呼叫對應的事件處理程序來處理事件隱藏程式碼模型的 ASP.NET 網頁是由兩個檔案所組成 :Default.aspx( 使用介面 ) 和 Default.aspx.vb( 事件處理 ) Web Form 表單的程式架構 - 使用介面 :Default.aspx( 說明 ) Web Form 表單的程式架構 - 使用介面 :Default.aspx(HTML 標籤 ) Web Form 表單程式本身是一份 HTML 網頁, 它是 HTML 標籤與伺服端控制項建立的使用介面 HTML Page 指示指令開始, 再來是 HTML5 的 DOCTYPE( 詳見第 2 章 ), 然後是 <html> 根元素, 我們是在 <form runat="server"> 子標籤建立 Web Form 表單, 在 <div> 標籤中新增伺服端控制項 (Server Controls), 以此例有 Label TextBox 和 Button 共 3 個控制項 59 <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> <!DOCTYPE html> <html xmlns=" <head runat="server"> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title></title> </head> <body> <form id="form1" runat="server"> <div> <asp:label ID="Label1" runat="server" Font-Bold="True" Font-Names=" 微軟正黑體 " Font-Size="Large" Text=" 我的 ASP.NET 網頁 "> </asp:label> <br /> <br /> <asp:textbox ID="TextBox1" runat="server" Height="42px" Width="142px"></asp:TextBox> <asp:button ID="Button1" runat="server" Height="43px" Text=" 交換 " Width="91px" /> </div> </form> </body> </html> 60 15

16 1-6-3 Web Form 表單的程式架構 - 使用介面 :Default.aspx( 標籤說明 Page 指示指令 :@ Page 是 ASP.NET 指示 (Directive) 指令 <form> 標籤 :<form> 標籤是位在 <body> 標籤中, 因為指定 runat 屬性值 server, 表示是一個 HTML 控制項, 即 HtmlForm 控制項物件, 其他的伺服端控制項是置於 <form> 標籤之中, 如下所示 : <form runat="server"> </form> Web Form 表單的程式架構 - 使用介面 :Default.aspx( 標籤說明 2) <div> 標籤 : 基於編排所需,VS Express for Web 預設將伺服端控制項的標籤程式碼置於此 HTML 標籤中, 換句話說,<div> 標籤可以視為 Web Form 表單的編輯區域 ( 如同 Windows Form 應用程式的視窗範圍 ), 我們就是在此範圍內新增控制項, 格式化編輯區域請使用 CSS(Cascading Style Sheets) 層級式樣式表伺服端控制項 :Web Form 表單是由伺服端控制項 (Server Controls) 組成, 它是一種伺服端的可程式化物件在 ASP.NET 網頁可以使用 HTML 或 Web 控制項來建立使用介面 Web Form 表單的程式架構 - 事件處理 :Default.aspx.vb( 說明 ) Default.aspx.vb 是事件處理程序的類別檔 ( 請在方案總管視窗的 Default.aspx 上, 執行右鍵快顯功能表的檢視程式碼指令來開啟 ), 在 Default.aspx Page 指示指令的 CodeFile 屬性指定對應的類別檔名稱 Web Form 表單的程式架構 - 事件處理 :Default.aspx.vb( 類別宣告 ) Partial Class _Default Inherits System.Web.UI.Page Protected Sub Button1_Click(sender As Object, _ e As EventArgs) Handles Button1.Click Dim temp As String temp = Label1.Text Label1.Text = TextBox1.Text TextBox1.Text = temp End Sub End Class

Reading Assignment Recitation Problems Chapter 1 of ASP.NET 4.5 網頁製作徹底研究, 陳會安 1. HTML 的英文全名為何? 2. ASP 的英文全名為何? 3. CLR 的英文全名為何? 4. WWW 伺服器與用戶端之間使用何種協定進行連線與傳送資料?

17 Reading Assignment Recitation Problems Chapter 1 of ASP.NET 4.5 網頁製作徹底研究, 陳會安 1. HTML 的英文全名為何? 2. ASP 的英文全名為何? 3. CLR 的英文全名為何? 4. WWW 伺服器與用戶端之間使用何種協定進行連線與傳送資料? 5. 動態網頁與靜態網頁差別? 6. 用戶端與伺服器端動態網頁技術各有那些? Slides developed by Chien-Hua Tsai 65 Slides developed by Chien-Hua Tsai 66 17

(Microsoft PowerPoint - PHP_Ch01 [\254\333\256e\274\322\246\241])

$(Microsoft PowerPoint - PHP_Ch01 [\254\333\256e\274\322\246\241])$ 第 1 章 PHP 基礎與開發環境的建立 1-1 Web 應用程式的基礎 1-2 網頁設計技術 1-3 建立 Windows 的 PHP 開發環境 1-4 PHP 程式碼編輯器 1-1 Web 應用程式的基礎 1-1-1 WWW 與主從架構系統 1-2-1 網頁設計技術 1-1-1 WWW 與主從架構系統 -WWW WWW (World Wide Web) 全球資訊網簡稱 Web, 這是在 1989