與安裝及功能介紹 - epaper.gotop.com.twepaper.gotop.com.tw/PDFSample/AEL018300.pdf · ASP.NET完美入門 ─ 使用C# 1-2 本章介紹 .NET平台、.NET ... 的Windows視窗程式

ASP.NET 4.6與 VS 2015安裝及功能介紹

1-1 .NET 平台定義

1-2 .NET Framework 4.6 概觀

1-3 ASP.NET 4.6 網頁開發技術簡介

1-4 VS 2015 安裝與介紹

1-5 建立第一個 ASP.NET 網站

1-6 Visual Studio 與 ASP.NET 開發環境簡介

1-7 ASP.NET Web Form 簡介

1-8 擴充 Visual Studio 及 ASP.NET 功能

1-9 各章範例專案名稱列表及使用方式

光碟內含教學影片

1. 主題：建立第一個 ASP.NET 網站

內容：與範例 1-1 相關

2. 主題：建立空的網站及加入網頁表單

內容：與範例 1-1、範例 3-1 相關

3. 主題：將 ASP.NET 專案程式匯入到 Visual Studio 開發工具

內容：與範例 1-2 相關

4. 主題：線上說明文件的安裝及使用

內容：與 1-4 小節的 Visual Studio 線上技術說明文件相關

5. 主題：將 ASPNET 應用程式部署到 IIS

內容：說明如何將 ASPNET 應用程式部署到 IIS

ASP.NET 完美入門 ─ 使用 C#

1-2

本章介紹 .NET平台、.NET Framework及 ASP.NET之意義，說明 Visual

Studio與 ASP.NET環境與重要功能，讓您對 ASP.NET技術有初步的瞭解。

1-1 .NET平台定義

微軟對 .NET 1.0所下的定義：「.NET就是 Microsoft為 XML Web Service

所提供的平台。」並將 .NET 1.0平台分成五大範圍：工具、伺服器、XML Web

服務、用戶端和 .NET操作環境。

圖 1-1 .NET 1.0 平台

隨著時間與需求演進，到了行動裝置及雲端世代，.NET 4.6與 VS 2015也

推出相對應的解決方案與技術架構，例如 Windows Azure、Windows Phone、

iOS、Android及 Windows 10。

而 ASP.NET 4.6 乃至目前 beta 版的 ASP.NET 5.0 正朝著.NET 創新、

開放原始碼、跨平台三大方向邁進，企圖提供前所未有的更高價值予開發

人員及企業。

Chapter 1 ASP.NET 4.6 與 VS 2015 安裝及功能介紹

1-3

圖 1-2 .NET 發展方向

簡言之，.NET 就是泛指與 .NET 程式開發相關的一切微軟產品與技術總合。

1-2 .NET Framework 4.6概觀

什麼是 .NET Framework？簡單地講就是 .NET程式所需的環境，有了 .NET

Framework才能建置、部署及執行 .NET應用程式。

.NET Framework安裝方式有兩種：

隨 Visual Studio 一起安裝：安裝 VS 2015 時，會一併安裝 .NET

Framework 4.6。

獨立安裝：.NET Framework 也可以單獨下載，安裝在公司眾多的 PC

及 Server伺服器。

獨立安裝 .NET Framework 又分兩種方式：Web 啟動器下載，離線安

裝程式。


1-4

Web 啟動器下載（即時網路下載器，1.4MB）

https://www.microsoft.com/zh-TW/download/details.aspx?id=48130

離線安裝程式（獨立完整套件，64MB）


1. 單獨安裝 .NET Framework 的時機，通常是用戶端個人 PC 要執行 .NET

的 Windows 視窗程式，或 IIS Web Server 要執行 ASP.NET 程式，這時就

會單獨安裝。

2. .NET Framework 安裝目錄是在 C:\Windows\Microsoft.NET\Framework

下，一台電腦中同時會有好幾個不同版本存在。

.NET Framework 4.6 技術堆疊

下圖是 .NET Framework 4.6 技術概要全貌，但實際上第一列的技術與

ASP.NET開發者關係較為密切，使用也較頻繁。初學者先將 ASP.NET + C# +

ADO.NET + LINQ基礎打好就十分足夠了，其他屬於進階範圍。

圖 1-3 .NET Framework 4.6 技術堆疊

大尺寸彩色 .NET Framework 4.5 總體技術堆疊詳圖

http://tinyurl.com/ce48m9w


1-5

1-3 ASP.NET 4.6網頁開發技術簡介

ASP.NET為編譯式的架構，可用多種 .NET相容語言（包括 C#、VB等）

來開發 ASP.NET網頁程式。且整個 .NET Framework都可供提給 ASP.NET程

式存取應用，開發人員可以輕易地獲得這些技術的好處，包括 Managed Common

Language Runtime環境、型別安全、繼承…等等。

ASP.NET 4.6 技術區塊

ASP.NET 4.6 在既有的基礎上，添加新世代技術，一方面維持適當幅度創

新，另一方面也可維持對舊版本技術的相容與延續性。

圖 1-4 ASP.NET 4.６技術堆疊架構

而 ASP.NET 4.6是在 ASP.NET 4.5主體上微幅增加了幾個新功能：

可非同步清除回應且以工作為基礎的 API（Task-based API for

Asynchronous Response Flushing）

Web Forms 模型繫結支援 Task 回傳方法（Model Binding Support

Task-Returning Methods）

HTTP/2的支援（限 Windows 10）


1-6

支援 Token繫結通訊協定（Support for the token binding protocol）

隨機字串雜湊演算法規（Randomized string hash algorithms）

驗證與授權的更新（Identity and Authentication Updates）

詳細說明可參考：

https://msdn.microsoft.com/zh-tw/library/ms171868(v=vs.110).aspx#v452

圖 1-5 入門聚焦技術

.NET Framework 與 ASP.NET 有何不同？

曾有不少 ASP.NET初學者（含程式設計師及學生）問我：「我分不清 .NET

Framework與 ASP.NET有什麼不同？」，以下是解釋：

.NET Framework

.NET Framework 主要包含兩大部分：CLR（Common Language

Runtime），它是 .NET程式執行環境及引擎，Class Library類別庫，

它是一堆現成的 API 類別，提供眾多現成的功能讓程式設計師叫用，

而不必凡事得從零寫起。例如要開發 TCP/IP 網路程式，就直接引用

TCP/IP 相關的類別，若要處理檔案目錄的工作，就可呼叫 I/O 相關的

類別。


1-7

ASP.NET網頁技術

ASP.NET 是眾多 .NET 應用程式類型的一種，它是專注於網頁程式開

發。ASP.NET 會用使 .NET Framework 提供的類別庫，因為 .NET

Framework 類別庫是所有類型應用程式所共用的基礎設施，其他如：

Console、視窗程式、Mobile行動裝置程式，所有類型的應用程式也都

使用 .NET Framework提供的功能。

所以應清楚二者的分野了吧！.NET Framework是所有程式的基礎設施，而

ASP.NET則是一種網頁開發的技術，只不過 ASP.NET會使用 .NET Framework

提供的類別庫，呼叫使用一堆現成的 API功能。

伺服端 vs.客戶端的網頁技術

ASP.NET 主體是伺服端的技術，運用到的有：IIS、.NET Framewrok、

ASP.NET基礎架構、ASP.NET控制項等全部都是在伺服端處理好後，再 Render

生成瀏覽器可以接受的 HTML、JavaScript及 CSS格式檔，然後傳送到使用者

瀏覽器，進行瀏覽與互動。

為何會有伺服端及客戶端網頁技術？最早出現的是純客戶端 Web技術，以

HTML、JavaScript 及 CSS 產業標準為代表，但因為它們功能過弱及缺乏，所

以不得不衍生出伺服端的網頁技術，如 ASP.NET、JSP、PHP。一旦變成伺服

端的技術，廠商就可以無限擴充所需功能，不必受到 W3C產業標準的框限，自

然十分強大。

1-4 VS 2015安裝與介紹

多數人開發 ASP.NET程式都會使用 Visual Studio，因為它可以提供最佳的

輔助與整合。

VS 2015 版本

VS 2015有商業版及免費版兩大類，其中程式開發工具是個人用，而 ALM

是應用程式生命週期管理，團隊用 Team Foundation Server來管理程式碼、測

試、專案管理及軟體工程類的用途。


1-9

免費版 VS 2015 安裝

免費版 Express 2015 for Web 是專門用來開發 ASP.NET 網頁程式。而

Community 2015 社群版除了開發 ASP.NET 網頁外，還可以開發 Windows /

Cloud / iOS /Android等應用程式。

圖 1-8 Visual Studio 下載

Visual Studio Community 201５下載網址

https://www.visualstudio.com/downloads/download-visual-studio-vs

Visual Studio Express 201５ for Web 下載網址

https://www.visualstudio.com/downloads/download-visual-studio-vs

Visual Studio Express 201３ for Web 下載網址


Visual Studio Express 201２ for Web 下載網址

http://www.microsoft.com/zh-tw/download/details.aspx?id=30669


1-12

1-5 建立第一個 ASP.NET網站

現在練習建立第一個 ASP.NET網站專案，以熟悉相關過程及細節。

範例 1-1 建立第一個 ASP.NET 網站

請開啟 Visual Studio，建立第一個 ASP.NET新網站：

建立新網站

在【新網站】Visual C#【ASP.NET Web Form 網站】於

Web位置選擇【檔案系統】命名「VS2015IDE」，按下【確定】即可

建立一個 ASP.NET網站專案。

圖 1-10 建立 ASP.NET Web Form 新網站

在【檢視】【方案總管】，它是用來管理 ASP.NET網站程式及圖片檔。

在【檢視】【伺服器總管】，可是用來連接管理 SQL Server資料庫。

在【檢視】【工具箱】，工具箱中包含大量 ASP.NET控制項，讓您拖

曳建立網頁功能。


1-13

網頁檢視模式的變化

在網頁設計畫面下方，有三種檢視模式可切換：設計、分割、原始檔。

圖 1-11 ASP.NET 網頁開發環境

設定字型

在【工具】【選項】【環境】【字型和色彩】字型選擇「Consolas」，

大小改為 12，可讓 Visual Studio有較漂亮的字型。

變換佈景主題

在【工具】【選項】【環境】【色彩佈景主題】有深色、淺色和藍

色可變換。

執行 ASP.NET 網站

最後，若要執行 ASP.NET網站，可按 F5或工具列的執行網頁按鈕。


1-14

1-6 Visual Studio與 ASP.NET開發環境簡介

以下概要說明 Visual Studio及 ASP.NET專案環境。

重要輔助工具

伺服器總管

伺服器總管可用來連接管理 SQL Server、Oracle、Access及 ODBC等

資料庫的連線。

工具箱

工具箱之中包含了設計網頁所需的 ASP.NET控制項，共分為標準、資

料、驗證、巡覽、登入、WebParts、AJAX擴充功能、動態資料、報告

及 HTML十大類，每大類之中又包含許多個別控制項。

網頁設計畫面

Web網頁設計畫面是作 ASP.NET控制項的建立與配置用途，可將各種

網頁組成的視覺化元素加到這個設計畫面，包括：伺服器控制項、HTML

物件及文字等都可以加入。

方案總管

方案總管是用於檢視與管理 ASP.NET專案檔案，包括：.aspx、.aspx.cs、

Web.config、Global.asax、圖片檔等。

屬性視窗

屬性視窗是用來檢視和設定 Web Form表單、文件或控制項的屬性。

新網站預設資料夾功用介紹

當新建 ASP.NET網站時，Visual Studio會自動建立一個網站樣板，裡面加

入許多檔案及目錄，讓您直接套用。或是當成您學習參考的樣板，揣摩 ASP.NET

網站應該怎麼設計。


1-15

圖 1-12 ASP.NET 網站樣板檔及目錄

但以上除 Web.config檔外，其餘並非是絕對必要（也可全數刪除）。如果

您有自己一套的網站建立方法，可在【檔案】【新網站】【Visual C#】

建立【ASP.NET空網站】，系統只加入必要的Web.config檔，後續您再自行添

加 ASP.NET網頁程式、圖片、CSS及目錄。

網站位置類型

建立 ASP.NET 新網站時，可將專案存放到不同的位置，在【Web 位置】

有三種模式：檔案系統、HTTP及 FTP。

圖 1-13 網站專案位置類型


1-16

按下【瀏覽】會出現三種類型：

檔案系統：使用檔案系統模式，Visual Studio會使用「IIS Express」來

執行 ASP.NET網頁程式，以省掉開發者電腦需安裝 IIS的麻煩。多數

時候採用這個模式就行了。

本機 IIS：它是使用 IIS伺服器來執行 ASP.NET程式，所以開發者電腦

需安裝 IIS伺服器才能使用這模式。

FTP 站台：可讓在本機或在遠端伺服器上開啟執行於 FTP 伺服器上的

網站。您可以從 Visual Studio內連接到具有讀取/寫入權限的任何 FTP

伺服器，接著就可以在該伺服器上建立及編輯Web網頁。

IIS Express

IIS Express可視為精簡版的 IIS，在安裝 Visual Studio時，會一併安裝 IIS

Express。它有的好處有：開發者電腦不需安裝 IIS、執行 IIS Express不需管理

者權限等方便性。

IIS Express 概觀及與 IIS 差異比較

http://www.iis.net/learn/extensions/introduction-to-iis-express/iis-express-overview

如何看見 IIS Express？首先按 F5隨便執行一個 ASP.NET程式在作業系

統右下角的 IIS Express圖示按滑鼠右鍵選擇【顯示所有應用程式】，就會顯

示出目前執行中的 ASP.NET網站。

圖 1-14 IIS Expres 畫面


1-17

IIS Express 預設限制只能在本機執行網站，不能遠端瀏覽（需特殊設定才能

開啟），若需進行跨網路的 ASP.NET 網頁瀏覽測試，請使用 IIS 模式建立

專案。

ASP.NET 圖表控制項

ASP.NET 網頁如需製作長條圖、圓餅圖、折線圖，不論 2D 或 3D 圖形，

微軟提供了數十種免費的圖表控制項。於第 16章會教您如何建立 ASP.NET圖

表及報表程式。

圖 1-15 ASP.NET 圖表控制項

Chart 圖表控制項 – MSDN Library 技術文件說明

http://msdn.microsoft.com/zh-tw/library/dd456632.aspx

Chart 圖表控制項類型 – MSDN Library 技術文件說明

http://msdn.microsoft.com/zh-tw/library/dd489233.aspx

圖表控制項範例程式下載

http://archive.msdn.microsoft.com/mschart


1-18

報表製作

除圖表外，ASP.NET亦提供報表的解決方案。

Microsoft 報表

http://msdn.microsoft.com/zh-tw/library/bb885185.aspx

HTML5 與 CSS3 支援

HTML5與 CSS3是目前及未來網頁標準的熱門技術，而 Visual Studio已內

建支援 HTML5及 CSS3，並提供 IntelliSense及驗證方面的輔助。

jQuery 支援

jQuery 是十分熱門的 JavaScript 函式庫，可以簡化網頁 JavaScript 程式開

發，製作高互動性的效果，同時提高生產力。目前已 jQuery整合進 Visual Studio

及 ASP.NET中，使 jQuery得到良好支援，讓您輕鬆撰寫 jQuery。

jQuery 官方網站

http://jquery.com/

微軟 CDN 提供 jQuery 支援

http://www.asp.net/ajax/cdn

1-7 ASP.NET Web Form簡介

本書 ASP.NET的網頁程式是以 Web Form為中心，在 Web Form網頁中可

建立 ASP.NET控制項及程式邏輯。

1-7-1 Web Form網頁之兩大組成要素

Web Form網頁包含兩部份：視覺化項目（HTML、伺服器控制項和靜態

文字）、網頁的程式邏輯（C# 及 VB），且二者分別儲存在不同檔案中。


1-19

視覺化項目是建立在 .aspx檔案中。

圖 1-16 Web Form 檔案結構圖

C# 程式碼則儲存於獨立的 .aspx.cs類別檔案中，這種模式又稱為程式

碼後置（Code-Behind）。

圖 1-17 網頁設計畫面與 C# 程式分離

Web Form 網頁的.aspx、.aspx.cs 兩部份，就是今後 ASP.NET 程式開

發所使用的模式。


1-20

1-7-2 新一代的 ASP.NET程式開發方式～Code-Behind

前面提到 ASP.NET Web Form程式開發方式，已經分離成網頁視覺設計

與C# 程式邏輯兩部份，透過 .aspx與 .aspx.cs二者的分離，可讓 ASP.NET網

頁開發像傳統視窗程式開發般容易，同時也支援完整的視覺化控制項拖曳、版

面配置、程式偵錯等諸多功能。這樣的分離技術在網頁設計上實為一大進步，

使得程式清晰明瞭、簡單易懂，亦可讓程式的結構更為良好等說不盡好處。

雖然您還是可以用傳統 ASP 程式手法來撰寫 ASP.NET 程式，將視覺化

項目和程式邏輯混雜寫在同一個 .aspx檔案中，這種方式也稱為「單一檔案網

頁模型（Single-File Page Model）」，但不建議使用這種方式撰寫 ASP.NET程

式，理由如下：

不良的程式結構。如果將程式或商業邏輯與 HTML 標籤或伺服器控制

項混雜在一起，基本上很難寫出結構清楚、明瞭易懂的程式。

程式難以維護。由於程式碼與 HTML 標籤混雜在一起，往往很難追蹤

原來程式的邏輯，且隨著程式愈來愈大，如此問題會顯得更嚴重，最後

終成程式設計師頭痛的難題。

難以專業分工。在許多大型的程式設計專案，版面視覺化設計工作是由

美工人員負責，而程式碼商業邏輯工作則由程式設計師來設計，倘若將

所有東西寫在同一個檔案當中，會造成許多問題，如美工人員可能會不

小心刪掉或修改到程式碼；或者程式設計師基於安全性理由，不願程式

碼曝光，讓美工人員看到，所以這些都是伴隨的缺點。

使用 Visual Studio開發時，是在 HTML檢視中寫入程式碼，而不是在

程式碼編輯器中。

必須手動將事件繫結至事件處理常式。針對單一檔案 Web Form網頁，

Visual Studio不支援連續按兩下（Double Click）建立控制項預設事件

的事件處理常式，也不支援在程式碼編輯器中提供類別和事件的下拉

式清單。

部份偵錯功能是不支援的，例如：無法藉由將滑鼠指向變數值的方式來

加以檢視。


1-21

由於網頁中的程式碼不會編譯為專案組件，因此要到網頁執行時才能

夠攔截編譯時期錯誤。

故由衷地建議，盡可能採用程式碼後置的 Code-Behind模式才是上上之策。

1-8 擴充 Visual Studio及 ASP.NET功能

有三種方式可擴充Visual Studio及ASP.NET，使得相關功能更豐富與便利：

安裝 Web元件（Web Platform Installer）

擴充功能和更新（Extensions and Updates）

程式庫套件管理員（Library Package Manager）

分述如下：

安裝 Web元件

【Web Platform Installer】有精選、產品及應用程式三大類可選擇安裝。

圖 1-18 安裝 Web 元件


1-22

擴充功能和更新

在【工具】【擴充功能和更新】,它是針對 Visual Studio進行擴充／

更新，線上有各種擴充套件可下載安裝，例如 NuGet Package Manager、

VS Command for Visual Studio、Productivity Power Tools等知名套件，

安裝後就能擴充 Visual Studio功能與威力。

圖 1-19 Visual Studio 線上擴充套件

程式庫套件管理員

它是針對每個 Web專案所需的 Package提供安裝管理，例如你的專案

需要最新版 jQuery 或 Entity Framework，就可透過它來進行安裝，要

移除也可透過它。在【工具】【程式庫套件管理員】【管理方案

的 NuGet 套件】中，於線上搜尋「jQuery」，安裝後，Web 專案就會

加入 jQuery相關參考。


1-23

圖 1-20 安裝 Web 專案程式庫套件

1-9 各章範例專案名稱列表及使用方式

下表為每章所對應的 ASP.NET專案程式名稱。

表 1-1 各章專案程式名稱對照應表

章節名稱 ASP.NET 網站（專案）

第一章 VS2015IDE

第二章無範例專案

第三章 CSharp

第四章 AspControls

第五章 FlowControl

第六章無範例專案

第七章 ClassMethod

第八章 GridViewSource

第九章 DetailsViewForm

第十章 Navigation


1-24

章節名稱 ASP.NET 網站（專案）

第十一章 WebAdmin

第十二章 LoginControls

第十三章 ADONET

第十四章 LINQ

第十五章 PageRedirect

第十六章 ChartsReporting

第十七章 Students

第十八章 Albums

附錄 A Arrays

附錄 B PropertyMethod

附錄 C Validation

專案範例程式使用方式

本書光碟的 ASP.NET專案程式，開啟執行使用方式有兩種：檔案模式、

IIS模式，前者以檔案型式開啟就能執行，後者需以 IIS執行 ASP.NET程式。

範例 1-2 以檔案模式開啟 ASP.NET 專案程式

直接將光碟的 ASP.NET 專案程式複製到硬碟目錄中，用 VS 2015 的檔案

模式開啟，這種方式完全不需要 IIS就能執行 ASP.NET程式。以第三章的專案

程式「CSharp」為例：

將光碟的 ASP.NET 專案程式複製到電腦

從光碟的「C# 範例程式」目錄中，將「03 CSharp」目錄複製到你電腦的

「C:\Tmp\03 CSharp」路徑。

以檔案模式開啟

在【開啟】【網站】【檔案系統】開啟「03 CSharp」專案。按下

F5即可執行 ASP.NET程式。


1-25

圖 1-21 VS 2015 以檔案模式開啟 ASP.NET 專案程式

圖 1-22 VS 2015 Express 以檔案模式開啟 ASP.NET 專案程式


1-26

範例 1-3 以 IIS 模式開啟 ASP.NET 專案程式

欲以 IIS模式開啟專案程式，開發者 Windows必須先安裝 IIS，然後將專案

檔複製到 IIS預設目錄，並轉換為應用程式。以「WebAdmin」專案程式為例：

將專案資料夾複製到 IIS

將「WebAdmin」資料夾複製到 IIS的預設路徑「C:\inetpub\wwwroot\」下。

將專案資料夾轉換為 ASP.NET 應用程式

在 IIS 管理工具中，將「WebAdmin」資料夾【轉換為應用程式】。此

時 WebAdmin就會從資料夾變成 ASP.NET的網站。

圖 1-23 將資料夾轉換為 ASP.NET 網站


1-27

以 IIS 模式開啟

在 Visual Studio中以【本機 IIS】模式開啟「WebAdmin」網站。

圖 1-24 VS 2015 Express 以 IIS 模式開啟 ASP.NET 專案程式

ASP.NET 網頁程式在正式上線時，一律得部署到 Windows Server 的 IIS 上，

才能以網站的型式服務眾多使用者。

結論

學習完本章後，對於 .NET 平台之意義應有初步了解，同時對於 .NET

Framework及 ASP.NET應可清楚區分，以及對二者之基本組成元素也有初步的

認識，後續章節將會利用本章所談的 Visual Studio、ASP.NET及 .NET Framework

三者之功能，透過漸進學習的方式，引導進行 ASP.NET網頁程式設計。


1-28

1. 微軟 .NET 平台的定義為何？

2. 簡述 .NET Framework 與 ASP.NET 二者的區別。

3. 練習 Visual Studio Express 2015 for Web／.NET Framework 4.6 的安裝。

4. 使用 VS 2015 建立 ASP.NET 網站，於網頁中輸入一些文字訊息，並執行。

5. ASP.NET 的 Web Form 網頁的兩大組成要素為何？

6. Code-Behind 程式碼後置是將 C#程式寫在何種類型檔案中？

(1) .aspx (2) .css

(3) .html (4) .aspx.cs

7. 以下何者不是 Visual Studio 支援的 ASP.NET 網站位置？

(1) 檔案系統 (2) 本機 IIS

(3) FTP (4) BT

8. 有哪三種途徑可以擴充 ASP.NET 及 Visual Studio 功能？

9. 檔案系統模式是用何種服務來執行 ASP.NET 程式？

(1) IIS (2) IIS Express

(3) Apache (4) SQL Server

10. ASP.NET 4.6 及 VS 2015 支援哪些開發功能？

(1) 網頁圖表控制項 (2) 網頁報表

(3) HTML5 及 CSS3 (4) jQuery

Documents

與 安裝及 功能介紹 - epaper.gotop.com.twepaper.gotop.com.tw/PDFSample/AEL018300.pdf · ASP.NET完美入門 ─ 使用C# 1-2 本章介紹 .NET平台、.NET ... 的Windows視窗程式

與安裝及功能介紹 - epaper.gotop.com.twepaper.gotop.com.tw/PDFSample/AEL018300.pdf · ASP.NET完美入門 ─ 使用C# 1-2 本章介紹 .NET平台、.NET ... 的Windows視窗程式