行動裝置網站開發與 ASP.NET

• 1-1 Web應用程式與Web服務• 1-2 Mobile應用程式與行動裝置網站• 1-3 客戶端相關網頁技術• 1-4 伺服端ASP.NET網頁技術• 1-5 使用WebMatrix整合開發工具• 1-6 使用VS Express for Web整合開發工具

1

1-1 Web 應用程式與 Web 服務• 1-1-1 Web 應用程式• 1-1-2 Web 服務 • 1-1-3 REST 與 RESTful

1-1 Web 應用程式與 Web 服務• 對於開發者來說，在建立 Internet 執行的 Web 應用程式或瀏覽的 Web 網站時，我們需要思考兩種不同的 Web 開發方式，如下所示：

– Web 應用程式（ Web Applications ）： Web 應用程式是透過 HTTP 請求來存取儲存在 Web 伺服器的網頁，或執行伺服端網頁技術的程式碼，例如： ASP 、 ASP.NET 、 PHP 和 JSP 等。

– Web 服務（ Web Services ）：透過 SOAP 通訊協定或 RESTful API 提供資料交換和工作分享，事實上，這也是一種 Web 應用程式，不過它是透過 Web 服務來執行的 Web 應用程式。

1-1-1 Web 應用程式 - 說明• Web 應用程式（ Web Applications ）簡單的說就是一組網頁（包含 HTML 網頁、圖片和相關伺服端網頁技術的程式檔案）的集合，其主要功能是回應使用者的 HTTP請求，並且與使用者進行互動。• 目前 Internet 擁有多種不同類型的 Web 應用程式，例如：網路銀行、電子商務網站、搜尋引擎、網路商店、拍賣網站和電子公共論壇等。

1-1-1 Web 應用程式 - 資訊傳遞模型• 資訊傳遞模型（ Information Delivery Model ）就是傳統 Web 網站，所有資訊內容都是使用 HTML語言撰寫的靜態 HTML 網頁，我們可以使用網頁編輯工具或 HTML 語言來建立網站內容，如下圖所示：

1-1-1 Web 應用程式 - 資訊處理模型• 資訊處理模型（ Information Processing Mode

l ）主要的目的是建立互動的 Web 網站， Web 伺服器的角色不單純只是傳遞資料，它是一個完整資訊處理系統的執行平台，我們需要使用伺服端網頁技術（程式碼是在 Web 伺服器執行的網頁技術），例如：使用 ASP.NET 技術建立的 Web 應用程式，如下圖所示：

1-1-2 Web 服務 - 說明• Web 服務（ Web Services ）是一種企業級的應用程式，可以透過 Internet 建立自動機制提供資料交換和工作分享等資源共享能力。 Web 服務是使用公開標準的通訊協定，提供低成本軟體整合和資料分享功能。

1-1-2 Web 服務 - 基礎• Web 服務提供一組通用服務，可以同時提供多個客戶端（ Clients ）使用，這是一組以 XML 標籤作為傳遞訊息的函數呼叫，客戶端透過 HTTP 傳送函數呼叫給伺服端，伺服端以 HTTP 將結果回傳客戶端，可以提供客戶端更多的彈性，因為只需傳遞函數呼叫的訊息，就可以取得所需的資訊。• Web 服務也是使用 HTTP 進行通訊，換句話說，連線 Int

ernet 的應用程式都可以使用這些服務，我們可以在不同作業系統和不同程式語言開發的應用程式之間，直接與位在不同位置的其他應用程式進行通訊和資料交換。總之，Web 服務就是提供一組通用的遠端函數呼叫（ RPC ， Remote Procedure Calls ），讓客戶端使用函數呼叫來執行所需服務。

1-1-2 Web 服務 - 應用程式架構• 傳統 Web 服務的客戶端和伺服端是使用「 SOA

P 」（ Simple Object Access Protocol ）通訊協定來進行通訊，它是一種結合 XML 標籤訊息和 HTTP 協定的通訊協定。 Web 服務的應用程式架構，如下圖所示：

1-1-3 REST 與 RESTful- 說明• REST （ REpresentational State Transfer ）代表一種分散式軟體系統架構樣式，目前已經取代 SO

AP 的 Web 服務，成為 WWW 上最常使用的 Web 服務模型。 REST 是使用 XML 或 JSON 等簡單介面的 Web 服務，而不是使用 SOAP 的傳統 Web 服務，基本上，符合 REST 原則的系統稱為 RESTful 。

• REST 最主要的觀念是資源（ Resources ），即一種特殊資訊，它是使用 HTTP 的 URI （即網址）來識別這些資源，以便客戶端可以請求這些資源來進行處理， REST 是使用標準 HTTP 介面在客戶端和伺服端之間交換這些資源。

1-1-3 REST 與 RESTful- 架構• RESTful Web 服務也稱為 RESTful Web API ，它是使用 REST 原則和 HTTP 實作的 Web 服務，

RESTful 對比傳統 Web 服務來說，屬於一種輕量級的 Web 服務，其架構是由客戶端和伺服端組成，在客戶端使用 HTTP 請求伺服端的資源，伺服端負責處理請求且回應資源（ Web 應用程式是回應HTML 網頁），其基本架構如下圖所示：

1-1-3 REST 與 RESTful- RESTful Web API

• 目前網路上各大網路公司都提供 RESTful Web API （或稱 RESTful API ）來存取提供的服務和資源，例如： Google 、 Facebook 、 Twitter 、 MySpace 、 Flickr 和 Picasa 等。在 programmableweb 網站可以查詢各種 Web API ，其網址為：– http://www.programmableweb.com/apis/direct

ory

1-2 Mobile 應用程式與行動裝置網站 • 1-2-1 原生應用程式 • 1-2-2 Mobile Web 應用程式

1-2 Mobile 應用程式與行動裝置網站• Mobile 應用程式（ Mobile Applications ）也稱為

Mobile Apps ，它是在智慧型手機或其他行動裝置上執行的應用程式，這些應用程式可能已經預設安裝在行動裝置，或需要使用者自行從網路下載來安裝。• Mobile 應用程式是針對行動使用者執行特定功能的精簡型應用程式，可以分成兩大類：原生應用程式和 Mobile Web 應用程式，事實上，行動裝置瀏覽的 Web 網站，就是一種 Mobile Web 應用程式。

1-2-1 原生應用程式 - 說明• 原生應用程式（ Native Apps ）是預設安裝在行動裝置，或使用者自行從網路的軟體商店下載安裝的應用程式，在 Android 作業系統是 Google Pl

ay； iOS 是 Apple Story 等軟體商店；微軟是微軟巿集。• 一般來說，這些原生應用程式都是使用各平台專屬的開發工具和程式語言來進行開發， Android是使用 Java 語言、 Eclipse IDE 和 Android SDK；

iOS 是 Objective-C 、 Xcode IDE 和 Cocoa 等。

1-2-1 原生應用程式 - 種類• 原生應用程式可以再細分成兩大類，如下所示：

–獨立的 Mobile 應用程式：這是一些不需要 Internet 連線就可以獨立執行的應用程式，例如：電話簿、撥號、計算機和離線遊戲等。

– Web 服務基礎的 Mobile 應用程式：這是一些需要 Internet 連線來存取 Web 服務的應用程式，例如：行事曆、電子郵件、 Facebook 、 Twitter 和連線遊戲等。

1-2-2 Mobile Web 應用程式 - 說明• 如同桌上型電腦的 Web 應用程式，針對行動裝置也有 Mobile Web 應用程式，這是指行動裝置啟動瀏覽器執行的 Web 應用程式，程式是儲存在 Web 伺服器，使用 HTML5 、

CSS3 和伺服端網頁技術來建立，我們需要透過 Internet才能執行 Mobile Web 應用程式，事實上，你也可以說，它就是一個針對行動裝置建立的 Mobile Web 網站，即本書主題的行動裝置網站。

1-2-2 Mobile Web 應用程式 -差異 1

• Mobile Web 應用程式和第 1-1-1節傳統 Web 應用程式的主要差異，如下所示：– Mobile Web 應用程式只是傳統 Web 應用程式的核心功能，除了行動裝置的螢幕尺寸比較小，沒有足夠空間放置選單、工具列和小工具來提供眾多功能外，智慧型手機和 Web 應用程式的使用者在需求上也有很大的不同，智慧型手機的使用者主要是在行動中使用應用程式，所以希望能夠在最短時間產生最大的效益，因此只有最有效益、核心或最常使用的功能才會出現在 Mobile Web 應用程式。

1-2-2 Mobile Web 應用程式 -差異 2– Mobile Web 應用程式和傳統 Web 應用程式採用完全不同的使用者互動方式，因為行動裝置擁有觸控螢幕，而且通常都沒有實體鍵盤，以資料輸入來說， Web 應用程式可以使用鍵盤和滑鼠；行動裝置的 Mobile Web應用程式是使用觸控螢幕、虛擬鍵盤、加速感測器和數位羅盤等，提供完全不同的使用者經驗。– Mobile Web 應用程式因為是在行動裝置上執行，再加上智慧型手機大都提供 GPS 功能，可以輕鬆結合 Goo

gle地圖（ Google Maps ）提供精準的定位服務；反之， Web 應用程式就算提供定位服務，也只能粗略定位，非常大的誤差造成並沒有實際的使用價值。

1-2-2 Mobile Web 應用程式 - 行動裝置網站開發的挑戰 1• 雖然目前行動裝置使用的作業系統，其內建瀏覽器都支援 HTML5 、 CSS3 和 JavaScript ，但是在開發行動裝置網站時，我們仍然需要面對多種挑戰，如下所示：

– 螢幕尺寸：行動裝置的螢幕尺寸遠小於桌上型電腦，而且擁有多種不同尺寸和解析度，所以，我們需要針對不同尺寸和解析度的螢幕建立專屬的版面配置。– 輸入方式：行動裝置的資料輸入可能是鍵盤、手勢和觸控等多種方式，在建立網站時，我們需要同時考量多種資料輸入方式和巡覽機制。

1-2-2 Mobile Web 應用程式 - 行動裝置網站開發的挑戰 2– 標準規格的相容性：雖然目前行動裝置內建瀏覽器都支援 HTML5 、 CSS3 和 JavaScript ，但是在最新規格的支援上仍然有少許差異，換句話說，對於跨行動裝置的網站來說，我們需要注意是否支援各種行動裝置的瀏覽器。–頻寬：行動裝置的網路頻寬會因位置的訊號而有所差異，再加上頻寬的穩定性比不上桌上型電腦，所以，在建立行動裝置網站時，網站檔案的尺寸也是考量重點。

1-3 客戶端相關網頁技術

• 1-3-1 客戶端網頁技術的基礎• 1-3-2 HTML5• 1-3-3 CSS3• 1-3-4 JavaScript• 1-3-5 DOM物件模型• 1-3-6 Ajax• 1-3-7 jQuery• 1-3-8 jQuery Mobile

1-3-1 客戶端網頁技術的基礎 - 說明• 客戶端網頁技術的程式碼或網頁是在使用者客戶端電腦的瀏覽器中執行，而不是 Web 伺服器，因為瀏覽器本身支援直譯程式，所以可以在瀏覽器執行客戶端網頁技術，如下圖所示：

1-3-1 客戶端網頁技術的基礎 - 瀏覽器種類• 目前巿面上的瀏覽器主要可以分為兩大類，其簡單說明如下所示：

– 個人電腦瀏覽器：在 PC 或筆記型電腦上執行的瀏覽器，目前桌上型電腦的主要瀏覽器有： Internet Explorer 、 Firefox 、 Safair 、 Opera和 Chrome 等。

– 行動網路瀏覽器：在 Mobile 平台執行的瀏覽器大部分都是 WebKit 瀏覽器引擎的行動網路瀏覽器（ Windows Phone除外），在第 3章有進一步的說明。

1-3-2 HTML5- 說明• HTML5 不只是一種編排內容的標記語言，更支援語意標籤和最新多媒體技術，可以讓我們建立更適合人類閱讀和電腦處理的文件。• HTML5仍然遵循 HTML4 標籤的語法，只是擴充、改進 HTML 標籤和 API （ Application Programmi

ng Interfaces ）來建立複雜的 Web 應用程式，和處理 DOM （ Document Object Model ）。不只如此， HTML5支援手機和平板電腦等低耗電的行動裝置，可以建立跨平台 Mobile 應用程式。目前 Internet Explorer 、 Firefox 、 Safari 、 Chrome 和 Opera 等瀏覽器都已經支援 HTML5 。 .

1-3-2 HTML5- 標籤• 在標籤部分， HTML5支援全新 <video> 、

<audio> 和 <canvas> 標籤來建立多媒體網頁，提供特殊規則來插入和格式化文字、圖形、視訊和音效，例如：使用 <section> 、<article> 和 <header> 語意標籤讓網頁設計者建立更有結構和人性化的網頁內容，而且，不需安裝 Flash外掛程式，就可以在網頁原生播放視訊和音效。

1-3-3 CSS3• 「 CSS 」（ Cascading Style Sheets ）層級式樣式表是一種樣式表語言，可以用來描述標示語言的顯示外觀和格式，例如：網頁的 HTML 或 XHTML 語言，也可以使用在

XML文件的 SVG 或 XUL 。• 對於網頁設計來說， CSS 能夠重新定義 HTML 標籤的顯示效果，因為 HTML 標籤擁有預設樣式，例如： <p> 標籤是段落； <ul> 為清單， CSS 能夠重新定義標籤的顯示樣式，以便符合網頁設計者的需求。• CSS 是在 1996年 12月公佈 CSS Level 1規格， Internet

Explorer 3.0 或以上的版本都支援此規格，接著 1998年 5月推出 Level 2規格， Level 3早在 1999年就已經開始制訂，直到 2011年 6月 7日才成為 W3C 的建議規格，在CSS3增加不少新的選擇器、多欄和特效功能。

1-3-4 JavaScript

• JavaScript 是 Netscape 開發的一種腳本語言，目前是甲骨文公司的註冊商標， JavaScript 使用淺顯的程式語法，只需初學程式設計者即可運用自如，輕鬆在網頁上建立互動效果； Jscript 為微軟推出相容 JavaScript 的腳本語言。• JavaScript 語言的定位是一種簡單的腳本語言，其目的是讓不懂程式設計的使用者也一樣可以撰寫 JavaScript 程式碼來產生互動的網頁內容。

1-3-5 DOM物件模型 -物件模型• 「物件模型」（ Object Model ）對於 HTML 網頁來說，就是一種規範如何存取 HTML元素、樣式或程式碼的機制，可以將 HTML元素、樣式和程式碼視為物件，和定義之間的關係，如下圖所示：

1-3-5 DOM物件模型 - 說明• DOM 提供 HTML 網頁一種存取方式，可以將 HT

ML元素轉換成一棵節點樹，每一個標籤和文字內容是一個一個節點（ Nodes ），讓我們可以走訪節點來存取 HTML元素。• DOM物件模型提供一組標準程式介面，可以讓我們透過這組介面來存取物件的屬性和方法，換句話說，程式設計者可以使用此程式介面來瀏覽 HT

ML 網頁或 XML文件，也可以新增、刪除和修改節點資料。對於 HTML 網頁來說。

1-3-5 DOM物件模型 - 組成• DOM 主要是由兩大部分組成，如下所示：

– DOM Core ：提供 HTML 網頁或 XML文件瀏覽、處理和維護階層架構，主要提供兩種功能，如下所示：• 瀏覽（ Navigator ）：能夠在網頁的樹狀結構中走訪節點。• 參考（ Reference ）：能夠存取節點的集合物件。

– DOM HTML ： HTML 網頁專屬的 DOM API 介面，其目的是將網頁元素都視為一個個物件，以便讓 JavaScript 等程式語言存取元素來建立動態網頁內容。

1-3-6 Ajax- 說明• Ajax 是 Asynchronous JavaScript And XML 的縮寫，即非同步 JavaScript 和 XML 技術。 Ajax 可以讓 Web 應用程式在瀏覽器建立出如同桌上型

Windows 應用程式一般的使用介面。• Ajax 是由 Jesse James Garrett 最早提出的名稱，事實上， Ajax 並不是全新的網頁技術，它是一種新方法來整合現存的多種網頁技術。不過，直到

Ajax被大量使用在 Google 網頁設計，例如： Gmail 、 Google Suggest 和 Google Maps後， Ajax 技術才受到大家的重視，並且快速成為目前網頁設計技術上的一顆耀眼明星。

1-3-6 Ajax- 相關技術• Ajax 技術是由多種網頁技術所組成，相關技術說明如下所示：

– HTML/XHTML 和 CSS ：在瀏覽器顯示使用者介面和呈現相關資料。– XML （ Extensible Markup Language ）：伺服端非同步傳遞的資料。 XML 可擴展標示語言也是一種標籤語言，其語法十分類似 HTML ，也屬於 SGML 的子集，在功能上主要是用來描述資料。– XML DOM ：當客戶端非同步取得 XML 資料後，可以進一步使用 JavaScript 程式碼和 XML DOM 取出所需的資訊。– XMLHttpRequest物件： JavaScript 程式碼是透過 XM

LHttpRequest物件建立非同步 HTTP 請求。

1-3-7 jQuery• jQuery 是一個 JavaScript 函數庫，提供網頁設計者另一種更簡潔方式來撰寫 JavaScript 程式碼和擴充 JavaScript的功能。 jQuery強調 JavaScript 與 HTML 之間的交互作用，可以使用簡潔程式碼來處理 DOM ，走訪網頁元素來更改外觀、新增特效、事件處理、動畫和支援 Ajax 來加速Web 應用程式的開發。• 當然 jQuery 的功能不只如此，其基本的設計精神就是以更彈性方式寫出最少程式碼來建立動態網頁。簡單的說，

jQuery 是在 JavaScript 和 HTML 之上新增一層程式介面，可以讓程式開發者使用簡潔程式碼來處理 DOM ，例如：事件處理、顯示與隱藏 HTML元素、更改元素屬性、新增CSS 樣式、加上動態效果或更改色彩。

1-3-8 jQuery Mobile• jQuery Mobile 是基於 jQuery 建立的框架（ Framework ），在 2010年 10月推出 1.0a1 的初期版本，可以幫助我們建立跨行動裝置的 Mobile 網頁應用程式（ Mobile HTML Ap

plications ）。• jQuery Mobile 是由 jQuery專案小組開發，在 2011年 11月推出 1.0正式版，它是一套建立在 jQuery 之上的使用介面系統（ User Interface System ， UI ），一個觸控最佳化的 Web框架，提供眾多最佳化觸控操作的使用介面元素。• 因為 Mobile 網頁應用程式最重要的部分是使用介面， jQu

ery Mobile 是一套用來建立 Mobile 網頁應用程式的使用介面框架（ Framework ），再加上它是使用宣告方式來建立使用介面，我們不用撰寫任何 JavaScript 程式碼，單純使用 HTML 標籤就可以建立一致外觀佈景的使用介面。

1-4 伺服端 ASP.NET 網頁技術 • 1-4-1 伺服端網頁技術的基礎 • 1-4-2 微軟的 .NET Framework • 1-4-3 ASP.NET 技術的三種開發模型• 1-4-4 ASP.NET 的 Mobile Web支援

1-4-1 伺服端網頁技術的基礎 - 說明• 伺服端網頁技術簡單的說是在 Web 伺服器上執行的應用程式，而不是在客戶端電腦的瀏覽器執行，如下圖所示：

1-4-1 伺服端網頁技術的基礎 - 常用技術 1• CGI （ Common Gateway Interface ）：共通匣道介面提供 Web 伺服器執行外部程式的管道， CGI 應用程式是一種外部程式的執行檔，能夠使用各種程式語言來開發，例如： Visual Basic 、 C 、 C++ 和 Perl ，程式需要編譯成執行檔案，以便在伺服端執行。• ASP （ Active Server Pages ）：直接從英文字面上解釋是一種讓網頁在伺服器上動起來的技術，能夠將 Script 語言直接內嵌 HTML 標籤的網頁，在伺服端產生動態的網頁內容，這是一種在伺服端以直譯方式執行的網頁技術。• ASP.NET ： ASP.NET 是繼 ASP 3.0後，微軟開發的伺服端網頁技術，以「 CLR 」（ Common Language Runti

me ）架構的 .NET 程式設計平台，可以讓我們使用 CLR語言在伺服端建立 Web 應用程式。

1-4-1 伺服端網頁技術的基礎 - 常用技術 2• PHP （ PHP: Hypertext Preprocessor ）：一種通用、開放原始碼（ Open Source ）的伺服端 S

cript 語言，可以直接內嵌於 HTML 網頁，特別適用在 Web 網站的開發，主要是使用在 Linux/Unix作業系統的伺服端網頁技術，目前也支援Windows 作業系統。

• JSP （ Java Server Pages ）： Java家族中和 ASP 一較長短的網頁技術，以 Java 語言來說， Java Applet 是下載到客戶端執行的程式檔； Java Servlet 是在伺服端執行； JSP 是結合 HTML 和 Java Servlet 的一種伺服端網頁技術。

1-4-2 微軟的 .NET Framework- 說明• .NET Framework 是微軟下一個世代的程式開發平台，它是由 CLR 和 .NET Framewor

k 類別函數庫所組成。當使用 .NET Framework支援的程式語言編寫程式碼檔案後，就可以使用 .NET 編譯程式進行編譯，不過，並不是編譯成 CPU 可執行的機器語言，而是一種中間程式語言稱為「 MSIL 」（ Microsoft Intermediate Language ）。

1-4-2 微軟的 .NET Framework- 圖例• 當需要執行程式時， CLR 使用「 JIT 」（ Just In Time ）編譯程式將 MSIL轉換成機器語言的程式碼來執行程式，如下圖所示：

1-4-3 ASP.NET 技術的三種開發模型 -圖例• ASP.NET 是架構在 .NET Framework 的 CLR 平台的網頁技術，其主要目的是建立 Web 應用程式。目前 ASP.NET 共有三種開發模型來建立 ASP.NE

T 應用程式，如下圖所示：

1-4-3 ASP.NET 技術的三種開發模型 - ASP.NET Web Forms 開發模型

• 傳統 ASP.NET 開發模型，這是一種事件驅動和伺服端控制項的開發模型，其目的是隱藏 HTTP 請求，以便讓我們如同建立桌上型 Windows 應用程式一般的建立 Web應用程式，不過，因為 ASP.NET Web Forms 是使用伺服端控制項來全權處理頁面的顯示，所以搭配客戶端網頁技術會有很多限制，除非你不使用伺服端控制項和 ViewState 。

1-4-3 ASP.NET 技術的三種開發模型 - ASP.NET Web Pages 開發模型

• ASP.NET 開發模型的最新成員，這是一種以頁面為中心的開發模型，類似 ASP 和 PHP 技術，可以讓開發者全權控制網頁的顯示，和整合客戶端網頁技術的各種套件，並且使用內建範本和幫助者類別來快速建立 Web 應用程式。

1-4-3 ASP.NET 技術的三種開發模型 - ASP.NET MVC 開發模型

• 使用著名的 MVC設計模式來建立 Web 應用程式，可以將 Web 應用程式分割成三大部分 Models 、 Views 和 Controllers ，分別是資料、顯示和處理請求，在顯示部分預設是和 Web Pages 開發模型使用相同的Razor 語法。

1-4-4 ASP.NET 的 Mobile Web支援 - 建立範本• 對於網站開發者來說，建立跨行動裝置網站可能需要建立多種不同的版面配置來套用在不同尺寸的行動裝置螢幕，基本上，我們有兩種方式來建立不同的範本，如下所示：

– 直接從伺服端傳回正確格式的頁面，我們需要在伺服端偵測行動裝置的平台和使用的瀏覽器，以便產生所需尺寸的頁面內容。– 在客戶端使用 CSS 樣式格式化不同裝置的網頁內容，即使用第 2章的 Media Queries ，依據不同螢幕尺寸來套用不同的 CSS 樣式。

1-4-4 ASP.NET 的 Mobile Web支援 -說明• 微軟 ASP.NET 技術雖然在舊版就已經支援Mobil

e Web 的開發，不過，當年Mobile Web 建立的Web控制項是輸出成 WAP ，並不是 HTML5 ，已經不符合目前巿場上網頁技術的潮流。

• 新版 ASP.NET 4.5支援Mobile Web 的跨行動裝置網站開發，並且全面擁抱 Open Source 的當紅網頁技術，例如： jQuery 函數庫和 jQuery Mobile框架，可以幫助我們建立跨行動裝置平台的網站。

1-4-4 ASP.NET 的 Mobile Web支援 - ASP.NET Web Forms 開發模型

• 因為 ASP.NET Web Forms 是使用伺服端控制項來處理頁面顯示，對於客戶端 jQuery Mobile元件的支援並不完整，只有部分伺服端控制項可以加上 data-role 屬性轉換成 jQuery Mobile元件，例如： ListView 、 DataList 和 Repeater控制項等；ListBox 和 DataGrid 等控制項的相容性並不佳，再加上 ViewState 不建議使用在 Mobile 網站（因為會造成檔案尺寸大幅增加），如果希望高度整合 Web Forms 和 jQuery Mobile框架，建議使用AMF （ ASP.NET Mobile Framework ），這是基於 jQuery Mobile 建立的伺服端控制項。

1-4-4 ASP.NET 的 Mobile Web支援 - ASP.NET Web Pages 開發模型

• 因為使用與 MVC 相同的 Razor 引擎，可以讓開發者全權控制網頁的顯示來整合 jQuery Mobile框架，對於中小型的跨行動裝置網站， Web Pages 開發模型是 ASP.NET技術的最佳選擇。

1-4-4 ASP.NET 的 Mobile Web支援 - ASP.NET MVC 開發模型

• 從MVC 3 開始， Views 的預設檢視引擎已經改為 Razor 引擎，可以讓使用者全權處理網頁的顯示，換句話說，我們可以完全整合 jQuery Mobile框架來建立企業級的跨行動裝置網站，事實上，新版 ASP.NET 4.5 的 Mobile支援，大部分是針對 MVC；並不是 Web Forms 開發模型。

1-5 使用 WebMatrix 整合開發工具 • 1-5-1 WebMatrix 開發工具的基礎 • 1-5-2 下載與安裝 WebMatrix 開發工具 • 1-5-3 啟動 WebMatrix 建立新站台• 1-5-4 在檔案工作區新增程式檔案• 1-5-5 更改預設的站台位置

1-5-1 WebMatrix 開發工具的基礎 - 說明• WebMatrix 是微軟開發的 Web 開發平台，這是一組免費的整合開發工具和完整 Web 開發環境，可以讓網站開發者快速和容易的建立動態和資料驅動的 Web 網站，而不用使用複雜的 Visual Studio 。• WebMatrix 不只支援 ASP.NET 技術的網站開發，也支援其他伺服端網頁技術，例如： PHP ，加上高度的擴充性，可以輕易整合其他廠商提供的功能，例如： Twitter 、 Facebook 、 Amazon 、 W

indows Azure 、 Groupon 和 Paypal 等。

1-5-1 WebMatrix 開發工具的基礎 -元件• WebMatrix 是一套免費和輕量的 Web 整合開發工具，提供簡單方式來快速建立和開發 Web 網站，其主要組成元件，如下所示：

– IIS Express ：簡易版 IIS 的 Web 伺服器，可供 WebMatrix 建立的網站來測試和部署。

– ASP.NET ： ASP.NET Framework 的 ASP.NET 伺服端網頁技術， WebMatrix支援的是 ASP.NET Web Pages 開發模型。

– SQL Server Compact ： SQL Server 資料庫系統的內嵌式版本，可以快速建立資料驅動的 Web 網站。– 行動瀏覽器模擬器： WebMatrix支援行動裝置的網站開發，提供 iPhone 和 Windows Phone 行動瀏覽器的模擬器，可以幫助我們測試Mobile Web 的執行結果。

1-5-2 下載與安裝 WebMatrix 開發工具 - 下載• WebMatrix 2 可以從網路上免費下載，其下載網址是： http://www.microsoft.com/web/

webmatrix/ 。在上方選擇中文語系，按右下角【 Free Download】鈕下載WebMatrix 2 。

1-5-2 下載與安裝 WebMatrix 開發工具 -安裝• WebMatrix 的安裝是使用微軟的 Web Platform In

staller ，這是一個免費的應用程式，可以幫助我們快速安裝和設定相關的 Web 開發工具或套件，目前的最新版本是 WebMatrix 2 。

1-5-3 啟動 WebMatrix 建立新站台 -步驟• 筆者準備使用 WebMatrix 2 建立名為 HelloWeb的站台， WebMatrix預設是使用範本來建立站台，其建立步驟如下所示：

– Step 1 ：請在 Windows 8 開始頁面，按一下【Microsoft WebMatrix】動態磚，稍等一下，可以啟動 WebMatrix 2 ，看到「快速入門」視窗。

– Step 2 ：選【範本】，可以看到預設提供的站台範本清單。– Step 3 ：在左邊選【 ASP.NET】，可以在右邊看到範本清單，請選【空白網站】後，在下方【站台名稱】欄輸入【 HelloWeb】，按【下一步】鈕，可以看到正在安裝 HelloWeb ，完成後，就可以進入開發工具的使用介面。

1-5-3 啟動 WebMatrix 建立新站台 - 圖例

1-5-4 在檔案工作區新增程式檔案• 在 WebMatrix 站台選【檔案】工作區，就可以讓我們新增程式檔案和資料夾，筆者準備新增名為

Page.cshtml 的 ASP.NET 程式， .cshtml 是 Web Pages 開發模型使用 C# 語言的副檔名； Visual Basic 語言是 .vbhtml ，如下圖所示：

1-5-5 更改預設的站台位置• WebMatrix 2預設新增的站台是位在「 C:\Users\< 使用者名稱 >\Documents\My

Web Sites\ 」資料夾，為了方便管理站台，我們可以更改預設的站台位置，以便將站台的檔案儲存在指定的資料夾，以本書為例是位在「 D:\ASP.NET_Mobile 」資料夾，如右圖所示：

1-6 使用 VS Express for Web 整合開發工具 • 1-6-1 下載與安裝 VS Express for Web • 1-6-2 啟動與建立 ASP.NET 網站• 1-6-3 開啟網站加入 ASP.NET 程式

1-6 使用 VS Express for Web 整合開發工具• 微軟程式語言的整合開發環境稱為 Visual Studio ，它是微軟公司開發 Windows 和 Web 應用程式的整合開發環境，能夠在同一套應用程式編輯、編譯、偵錯和測試 .NET 語言建立的應用程式。• Visual Studio Express 2012 for Web （簡稱 VS Express f

or Web ）是一套用來開發 ASP.NET 網站（即 Web 應用程式）的整合開發環境。 Express版是 Visual Studio產品線的擴充，微軟 Express 系列提供實用和最少負擔的程式開發工具，可以讓學生和初學者輕鬆進入 Visual Studio和 .NET Framework 開發平台，快速建立所需的 .NET 應用程式。

1-6-1 下載與安裝 VS Express for Web- 下載• VS Express for Web版可以在網路上免費下載，其下載網址為： http://www.microsoft.com/visual

studio/cht/downloads 。• 請選【 Visual Studio Express 2012 for Web】後，再選【中文】，就可以點選【立即下載】超連結，下載正體中文版的 ISO 檔，然後使用燒錄程式將

ISO 檔燒成安裝光碟。

1-6-1 下載與安裝 VS Express for Web-安裝• VS Express for Web中文版可以建立微軟 ASP.N

ET三種開發模型的開發環境，以下載燒錄的安裝光碟為例，如下圖所示：

1-6-2 啟動與建立 ASP.NET 網站 - 說明• 對於 ASP.NET Web Pages 開發模型來說，我們可以在 VS Express for Web 建立 ASP.

NET 網站來新增副檔名為 .cshtml 或 .vbhtml 的 ASP.NET 程式。–步驟一：啟動與註冊 VS Express for Web–步驟二：新增 ASP.NET 網站–步驟三：預覽 ASP.NET 網站的首頁

1-6-2 啟動與建立 ASP.NET 網站 -步驟一• 請在 Windows 8 開始頁面，按一下【 VS

Express for Web】動態磚，稍等一下，因為是第 1次啟動，可以看到產品註冊畫面（註冊是完全免費，如果沒有註冊只能使用 30天）。

1-6-2 啟動與建立 ASP.NET 網站 -步驟二• 在啟動 VS Express for Web後，我們可以新增 A

SP.NET 網站，請執行「檔案 >新網站」指令，可以看到「新網站」對話方塊。

1-6-2 啟動與建立 ASP.NET 網站 -步驟三• 執行「檔案 > 在瀏覽器中檢視」指令或在檔案上執行【右】鍵快顯功能表的【在瀏覽器中檢視】指令，可以看到瀏覽器顯示的執行結果。

1-6-3 開啟網站加入 ASP.NET 程式• VS Express for

Web 可以直接開啟WebMatrix 2建立的站台來新增 ASP.NET 程式，執行「檔案 > 開啟網站」指令，可以看到「開啟網站」對話方塊。