Visual Studio 2012 中的 ASP.NET 和網頁程式開發的新功能

發行項
07/13/2023

新版本的 Visual Studio 引進了一些增強功能，著重于改善使用 Web 技術時的體驗和效能。適用于 CSS、JavaScript 和 HTML 的 Visual Studio 編輯器已完全修改，以包含許多最需要的程式碼輔助工具，例如 IntelliSense 和自動縮排。關於效能，統合和縮小現在會整合為內建功能，以輕鬆減少頁面載入時間。

Visual Studio 可讓您使用最新的網站技術。您可以使用跨瀏覽器的 CSS3 程式碼片段來確保不論用戶端平臺為何，您的網站都能運作，同時利用新的 HTML5 元素和功能。

撰寫和分析 JavaScript 程式碼應該更容易使用此 Visual Studio 版本。 IntelliSense 清單、整合式 XML 檔和流覽功能現在適用于 JavaScript 程式碼。您現在有 JavaScript 目錄，可指尖。此外，您可以檢查 ECMAScript5 與腳本的合規性，並在早期偵測語法錯誤。

最後，此 Visual Studio 版本實作內建統合和縮小。腳本檔案和樣式表單會封裝並壓縮，讓網站執行速度更快。

此實驗室會逐步引導您完成先前所描述的增強功能和新功能，方法是將次要變更套用至 Source 資料夾中提供的範例 Web 應用程式。

目標

在此實作實驗室中，您將瞭解如何：

在 CSS 編輯器中使用新功能和改善
在 HTML 編輯器中使用新功能和改善
在 JavaScript 編輯器中使用新功能和改善
設定和使用統合和縮小

必要條件

Microsoft Visual Studio Express 2012 for Web或更上層 (請參閱附錄 A，以取得如何安裝) 的指示。
適用于安裝腳本的Windows PowerShell (- 已安裝在 Windows 8 和 Windows Server 2008 R2)
Internet Explorer 10 - 或符合 HTML5 規範的瀏覽器

Exercises

此實際操作實驗室包含下列練習：

練習 1：CSS 編輯器中的新功能
練習 2：HTML 編輯器的新功能
練習 3：JavaScript 編輯器中的新功能
練習 4：統合和縮小

完成此實驗室的估計時間： 60 分鐘。

練習 1：CSS 編輯器中的新功能

Web 開發人員應該熟悉許多與 CSS 編輯相關的困難。 CSS 樣式最大的問題之一是跨瀏覽器相容性。在將樣式套用至您的網站之後，您通常會注意到，如果您在另一個瀏覽器或裝置中開啟樣式，它看起來會有所不同。因此，您可能花相當長的時間修正這些視覺效果問題，瞭解當您最後在一個瀏覽器中運作時，其他瀏覽器就會中斷。

Visual Studio 現在包含的功能可協助開發人員有效地存取、工作及組織 CSS 樣式表單。在此練習中，您將符合有效組織和版本的新功能，以及適用于跨瀏覽器相容性的 CSS3 程式碼片段。

工作 1 - 新的編輯器功能

在此工作中，您將探索 CSS 編輯器的新功能。這個新的編輯器可協助您利用新的智慧縮排、改善的程式碼批註和增強的 IntelliSense 清單，來提升生產力。

啟動Visual Studio並開啟位於此實驗室Source\WhatsNewASPNET 資料夾中的 WhatsNewASPNET.sln解決方案。
在方案總管中，開啟位於[樣式] 資料夾底下的Site.css檔案。請確定工具列上會顯示 文字編輯器 工具。若要這樣做，請選取 [檢視 | 工具列]功能表選項，然後檢查[文字編輯器] 選項。您將會注意到，由於這個新版本，CSS 編輯器也會啟用 [ 批註 ] 按鈕 () 和 [ 取消批註 ] 按鈕 ( ) 。

啟用編輯器和 CSS 工具
捲動程式碼並選取任何 CSS 類別定義。按一下 [ 批註 ( ) ] 按鈕，以批註選取的行。然後，按一下 [ 取消批註 ( ) ] 按鈕以復原變更。
按一下 [ 折迭 ( 迭) ] 和 [ 展開 ( 位於文字左邊界的) 按鈕。請注意，您現在可以隱藏您不用來擁有更簡潔檢視的樣式。

迭

折迭 CSS 類別
請確定已啟用智慧縮排功能。選取 [工具 | 選項]功能表選項，然後選取畫面左窗格中的 [文字編輯器 | CSS | 格式設定] 頁面。檢查 [階層縮排 ] 選項。

啟用階層縮排
找出主要類別定義 (.main) ，並將樣式附加至 div 元素。您會注意到程式碼會自動對齊，協助使用者一目了然地尋找父類別。

CSS
```
.main
{
  padding: 0px 12px;
  margin: 12px 8px 8px 8px;
  min-height: 420px;
}
  .main div
  {
    border: 0px;
  }
```
CSS 中的階層式對齊方式
在 .main div 類別內，找出框線結尾處的游標 ：0px; 然後按 Enter 以顯示 IntelliSense 清單。開始輸入頂端，並注意清單在您輸入時如何篩選。此清單會顯示包含在舊版 Visual Studio 中任何一個部分頂端的專案 (，清單會依開頭為字詞的專案篩選) 。

CSS 中的 IntelliSense 增強功能

工作 2 - 色彩選擇器

在此工作中，您將探索整合至 Visual Studio IntelliSense 的新 CSS 色彩選擇器。

在 Site.css 中， 找出標頭類別定義 (.header) ，並將游標放在該行程式碼的「：」和「#」字元之間 ，放在背景色彩 屬性旁邊。

尋找游標
刪除冒號 (：) ，然後再次寫入以顯示色彩選擇器。請注意，您會看到的第一個色彩是網站最常見的色彩。如果您按一下白色，其 HTML 色彩代碼 (#fff) 將會取代樣式表單中的目前色彩代碼。

色彩選擇器
按下色彩選擇器上的 [展開 ( ) ] 按鈕以顯示色彩漸層，然後拖曳漸層游標以選取不同的色彩。之後，按一下 [眼球] 按鈕，然後從畫面中選取任何色彩。請注意，當您移動游標時，背景色彩值會動態變更。

色彩選擇器漸層
在 [不透明度] 滑杆中，將選取器移至列中央，以減少不透明度。請注意，背景色彩值現在會將其縮放比例變更為 RGBA。

色彩選擇器不透明度

注意

CSS3 中的 RGBA (紅色、綠色、藍色、Alpha) 色彩定義可讓您定義單一專案的色彩不透明度值。不同于 不透明度 - 類似的 CSS 屬性 - RGBA 色彩也與最新的瀏覽器相容。

工作 3 - CSS 相容的程式碼片段

在此工作中，您將瞭解如何使用跨瀏覽器相容的 CSS3 程式碼片段，以在您的網站中實作某些功能。

在 Site.css 檔案中，找出標頭 CSS 類別定義 (.header) ，並將游標放在 /*border radius*/ 預留位置下方，以新增程式碼片段。按 Enter 以顯示 IntelliSense 清單，然後輸入 radius 以篩選清單。從清單中選取 框線半徑 選項，按兩下，然後按 TAB 鍵以插入程式碼片段。然後，以圖元輸入半徑大小，然後按 Enter鍵。例如，輸入 15px。

程式碼片段新增的 CSS3 屬性會轉譯大部分 HTML5 合規性瀏覽器中的圓角框線，包括 Mozilla 和 WebKit 型瀏覽器。

使用框線半徑程式碼片段

在頁面樣式中套用相同的框線程式碼片段 (.page) 。

CSS

.page
{
    width: 960px;
    background-color: #fff;
    margin: 20px auto 0px auto;
    border: 1px solid #496077;
    /*border radius*/
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
}

按 F5 執行方案。請注意，每個頁面現在都有圓角框線。

圓角
關閉瀏覽器並返回 Visual Studio。
開啟位於Styles資料夾下的Custom.css檔案，並將游標放在div.images ul li img類別定義內。
按 Enter 以顯示 IntelliSense 清單，輸入方塊陰影，然後按 TAB 鍵兩次，在類別定義內插入預設陰影程式碼片段。將陰影值設定為 10px 10px 5px #888。然後，輸入 框線半徑 並插入程式碼片段。輸入 15px 以設定半徑大小，然後按 ENTER鍵。

具有陰影的圓角

注意

目前，陰影屬性會以對應的前置詞 (moz、webkit、o) 插入，以支援 Mozilla 和 Webkit (Chrome、Safari、Konkeror) 瀏覽器。
在 div.images ul li img：hover 下方建立新的類別 div.images ul li img 類別定義，並將游標放在括弧內。

CSS
```
div.images ul li img
{
  ...
}

div.images ul li img:hover
{

}
```

輸入轉換，然後按 TAB 鍵兩次以插入轉換程式碼片段。然後，輸入 旋轉 (-15deg) ，以在影像暫留時變更旋轉角度值。

CSS

div.images ul li img
{
  padding-top: 50px;
  padding-right: 15px;
  width: 150px;
  ...
}

div.images ul li img:hover
{
  -moz-transform: rotate(-15deg);
  -ms-transform: rotate(-15deg);
  -o-transform: rotate(-15deg);
  -webkit-transform: rotate(-15deg);
  transform: rotate(-15deg);
}

按 F5 執行方案，並流覽至 CSS3 頁面。請注意，影像有圓角和方塊陰影。將滑鼠停留在影像上方，並watch它們旋轉。

轉換

轉換旋轉影像的程式碼片段

注意

如果您使用 Internet Explorer 10 且看不到陰影，請確定檔案模式已設定為 IE10 標準。按 F12 開啟 Internet Explorer 開發人員工具，然後按一下 [檔案模式 ] 以變更為 IE10 標準。

練習 2：HTML 編輯器的新功能

Visual Studio 具有改良的 HTML 編輯器。此版本所包含的一些增強功能是 HTML 檔案中的智慧縮排、HTML5 程式碼片段、HTML 開始和結束標記比對，以及 HTML 驗證。在此練習中，您將瞭解這些變更如何在網站標記中運作時改善您的流暢度。

如同 CSS 編輯器，HTML 編輯器也已改善。其中大部分的改善都是小型的改善，可讓 Web 開發人員的存留時間更容易。在編輯和驗證以 HTML 檔案 DOCTYPE 為目標時，比對開始和結束標籤等更多程式碼片段、智慧縮排、比對開始和結束標籤等專案是其中一些改善。

工作 1 - 改善的 DOCTYPE 驗證

HTML 編輯器現在能夠檢查頁面的 DOCTYPE，即使定義可能位於主版頁面中也一樣。根據頁面的 DOCTYPE，HTML 編輯器會使用正確的規則集進行驗證，並篩選考慮 DOCTYPE 元素的 IntelliSense 清單。

在這項工作中，您將變更頁面的 DOCTYPE，以查看 HTML 編輯器行為如何據以變更。

如果尚未開啟，請啟動Visual Studio，然後開啟位於此實驗室之 Source\WhatsNewASPNET 資料夾中的 WhatsNewASPNET.sln解決方案。
開啟 Site.Master 頁面。
請注意驗證工具列的目標架構。 HTML 編輯器的行為方式 (驗證、IntelliSense 等) 會正確變更以符合選取的 Doctype。

在 HTML 來源編輯工具列中使用 Doctype
將目標架構變更為 HTML 4.01。

變更 HTML 來源編輯工具列中的 Doctype
將游標放在本文元素底下，然後開始輸入 HTML5 元素的名稱，例如 (影片) 。 請注意，此元素無法在 IntelliSense 清單中使用。

未列出的 HTML5 元素
復原驗證工具列的目標架構變更，從下拉式清單中挑選 DOCTYPE：XHTML5。

在 HTML 來源編輯工具列中重設 Doctype
將游標放在本文元素下方，然後再次開始輸入 HTML5 元素 (，例如視訊) 。請注意，HTML5 元素現在可在 IntelliSense 清單中取得。

列出的 HTML5 元素

工作 2 - 開始/結束標籤自動更新

Visual Studio 現在會更新您要編輯之專案的 HTML 開頭或結束記號，以彼此相符。這項新功能可改善編輯 HTML 標籤時的生產力。

在 Default.aspx 頁面上，新增標題為 (的 H3 元素，例如 Visual Studio 2012 Rocks！) 。

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
  <br />
  <asp:Image ImageUrl="~/images/Web11.JPG" runat="server" />
  <h3>Visual Studio 2012 Rocks!!</h3>
</asp:Content>

變更 H3 標籤，然後輸入 H2 或 H1。

請注意，結束標籤會自動更新。您也可以修改結束標籤，以查看開始標籤也會據以更新。

結束標籤的自動更新

工作 3 - 新增 HTML5 程式碼片段

Visual Studio 現在包含數個 HTML5 程式碼片段。在此工作中，您將使用其中一些程式碼片段。

將名為 audio 的新資料夾新增至網站資料夾的根目錄。開啟 Windows 檔案總管，並將任何音訊檔案複製到WhatsNewASPNET.sln解決方案的音訊資料夾中。
在 Default.aspx 頁面中，找出 Web11 Rocks 底下的游標！！標頭。輸入音訊，然後按 TAB 鍵。

新的 HTML 編輯器包含 HTML5 內容的程式碼片段。請記得使用適當的 DOCTYPE 定義來啟用 HTML5 程式碼片段。

插入 HTML5 程式碼片段

更新音訊來源以指向現有的音訊檔案。

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
  <br />
  <asp:Image ImageUrl="~/images/Web11.JPG" runat="server" />
  <h2>Visual Studio 2012 Rocks!!</h2>
  <audio controls="controls">
    <source src="audio/Kalimba.mp3" />
  </audio>
</asp:Content>

注意

您必須將音訊檔案新增至解決方案。

按 F5 執行網站並播放音訊。

執行音訊控制項

注意

您也可以嘗試 Visual Studio 中包含的更多程式碼片段，例如影片、圖等。
現在，請嘗試在頁面的某些部分插入控制項。例如，嘗試插入GridView控制項，但不要輸入「篩選」，而是開始輸入 << GV。請注意，IntelliSense 清單會顯示 asp：GridView 控制項。

HTML 編輯器中的 IntelliSense 現在提供標題大小寫搜尋，以及部分比對 (擷取包含字詞的所有元素) 。

使用 IntelliSense 清單插入 GridView

如果您輸入< grid，您將取得符合字詞的所有專案，但 Visual Studio 會建議gridview控制項：

使用 IntelliSense 清單和部分比對插入 GridView

工作 4 - HTML 編輯器智慧標籤

HTML 編輯器的另一項改進是智慧標籤功能。智慧標籤可讓您輕鬆地根據每個控制項執行一般或重複的開發工作。此功能已在 HTML Designer中使用，但無法在 HTML 編輯器中使用。

開啟 Site.Master 並找出 asp：Menu 元素。將游標放在開始標籤上，並注意元素底部顯示的小型圖像 - 按一下它以開啟智慧型工作功能表。請注意，您可以快速存取與功能表控制項相關的某些工作。

型

功能表控制項的智慧型工作

工作 5 - 智慧縮排

HTML 中的其中一個最佳做法是縮排巢狀元素，讓程式碼保持可讀性。在 Visual Studio 2012 中，您會注意到編輯器會在您撰寫程式碼時自動縮排元素。

注意

在舊版 Visual Studio 中，XML 編輯器中提供智慧縮排，但無法在 HTML 編輯器中使用。

請確定 HTML 編輯器上的縮排設定已設定為 Smart Indentation。若要這樣做，請選取 [工具] |[選項 ] 功能表選項，然後選取 [文字編輯器] |HTML | 畫面左窗格中的索引標籤頁面。選取 [智慧縮排] 選項。

HTML 編輯器設定
在 Default.aspx 頁面上，移除音訊元素下的所有內容。
將游標放在開啟音訊元素的結尾，然後按 ENTER鍵。

請注意，游標的新位置具有額外的縮排層級。

HTML 編輯器中的智慧縮排
使用您移除的內容還原音訊標籤，或關閉 Default.aspx 而不儲存變更。

工作 6 - 擷取至使用者控制項

Visual Studio 中包含的重構工具，例如將部分程式碼擷取至函式，是有助於改善和重構現有程式碼的絕佳功能。 ASP.NET 網頁的對應專案是擷取 HTML 程式碼給使用者控制項。手動執行會牽涉到數個步驟，例如建立新的使用者控制項、將程式碼區段移至使用者控制項、註冊使用者控制項的標籤前置詞，最後在頁面上具現化使用者控制項。現在，新的 [ 擷取至使用者控制 ] 工具會自動為您執行所有這些步驟。

在這項工作中，您將使用新的擷取至使用者控制內容作業，從選取的程式碼產生新的使用者控制項。

在 Default.aspx 頁面上，選取 H2 和音訊元素。
以滑鼠右鍵按一下並選取 [擷取至使用者控制項]。

[擷取至使用者控制] 功能表選項
輸入新使用者控制項的名稱。例如， Jukebox.ascx，然後按一下 [ 確定]。

儲存擷取的使用者控制項
請注意，選取的程式碼已擷取至使用者控制項，而選取程式碼的原始位置會取代為新使用者控制項的實例。

自動更新頁面以使用新的使用者控制項
按 F5 執行頁面，並確認控制項正常運作。

練習 3：JavaScript 編輯器中的新功能

撰寫或編輯 JavaScript 程式碼不是簡單的工作，特別是當您的應用程式開始成長，而且您發現自己處理長檔案和數百個函式時。腳本開發人員通常需要執行一些額外的工作，才能維護程式碼可讀性，並在檔案之間巡覽。隨著包含 jQuery 之類的 JavaScript 程式庫，腳本導覽因為程式碼長度而成為挑戰本身。

Visual Studio 已更新 JavaScript 編輯器，承諾讓程式碼模式可供存取並組織。 C# 或 VB 編輯器中已存在的許多 Visual Studio 功能現在會在 JavaScript 編輯器中實作：移至定義、自動縮排、檔以及撰寫時驗證。使用更新的 IntelliSense 清單，您會有 JavaScript 函式類別目錄，

在此練習中，您將瞭解 JavaScript 編輯器的一些新功能和改善。您將流覽範例檔案，並探索每個新的特性，讓您的 JavaScript 程式設計在 Visual Studio 2012 中更有效率。

工作 1 - JavaScript 編輯器新功能

這項工作將為您介紹一些新的 JavaScript 編輯器功能，其著重于組織您的程式碼，並提供更好的使用者體驗。

如果尚未開啟，請啟動Visual Studio，然後開啟位於此實驗室之 Source\WhatsNewASPNET 資料夾中的 WhatsNewASPNET.sln解決方案。
按 F5 執行應用程式，然後按一下導覽列中的 JavaScript 連結。重新整理頁面數次，並檢查計數器如何遞增。

頁面計數器
關閉瀏覽器並返回 Visual Studio。
開啟JavaScript.aspx頁面，並找出< 腳本 >區塊， (如下所示) 。

下列程式碼會使用 HTML5 本機儲存體來儲存 pageLoadCount 變數，以儲存目前使用者流覽頁面的次數。本機儲存體是 HTML5 標準引進的用戶端索引鍵/值資料庫。資料會儲存在使用者瀏覽器內的本機電腦上。
```
<script>
  addCount(1);
  document.getElementById('count').innerHTML = getCount();

  function getCount() {
    var storage = window.localStorage;
    if (!storage.pageLoadCount)
      storage.pageLoadCount = 0;

    return storage.pageLoadCount;
  }

  function addCount(value) {
    window.localStorage.pageLoadCount = parseInt(getCount(), 10) + value;
  }

  ...   
</script>
```
注意

請確定 DOCTYPE 已設定為 XHTML5，再繼續進行後續步驟。
編輯程式碼，並注意到適用于 JavaScript 的 IntelliSense 包含 HTML5 功能，例如本機儲存體及其內部方法。

JavaScript 中的 HTML5 JavaScript 功能
按一下腳本程式碼 ({) 的任何左括弧，並注意到括弧會反白顯示。

括弧

括弧會反白顯示
取消批註函式 testAutoAlign () (選取三行，您可以使用CTRL + K;Ctrl + U) ，並在函式程式碼內找出游標。按 Enter 鍵以附加第二行。請注意，程式碼現在已對齊並 自動縮排。

程式

JavaScript 程式碼自動對齊

工作 2 - 驗證 JavaScript

在此工作中，您將探索 ECMAScript5 標準的新 JavaScript 驗證。這項功能可協助您撰寫相容的 JavaScript 程式碼，同時防止月臺部署前的腳本問題。

注意

Visual Studio 2010 實作 ECMAStript3 合規性，而 Visual Studio 2012 則提供 ECMAScript5 合規性。

開啟位於 Scripts\custom 專案資料夾底下的ECMA5script5.js。您現在將會測試 ECMAScript5 標準的驗證。
```
"use strict";

if (true) {
    function StrictModeError()
    {
    }
}
```
您可以在檔案的第一行查看「 使用嚴格 」方向，以啟用 ECMAScript5 嚴格模式。此模式包含一部分語言，可厘清過去版本的模棱兩可，並新增一些新功能，例如 getter 和 setter、JSON 的程式庫支援，以及更完整的物件屬性反映。
如果尚未開啟 ([檢視] 功能表，請開啟[錯誤清單] |錯誤清單) 。請注意，函式宣告加上底線。這是因為在 ECMA5 標準函式中不能巢狀于語言結構內。在下面的錯誤清單中，您會看到警告詳細資料。

JavaScript 驗證錯誤訊息
將 「使用嚴格」 方向批註化，並注意到錯誤消失，但警告仍然存在。
在檔案的最後一行中，寫入 任何字串，例如「test」 (包含引號，以指出它是字串) 。在字串旁撰寫句點以顯示 IntelliSense 清單，然後選取修剪選項。

在 ECMAScript5 標準中，字串值和變數也有定義字串方法，例如修剪、大寫、搜尋和取代。

JavaScript 中的 IntelliSense 清單

工作 3 - 適用于 JavaScript 的 XML 檔

在這項工作中，您將探索 JavaScript 中 XML 的 Visual Studio 功能檔。您會看到 JavaScript IntelliSense 清單現在會顯示每個函式的 XML 檔。此外，您將探索 JavaScript 中的流覽功能。

開啟位於腳本/自訂專案資料夾中XMLDoc.js檔案。此檔案包含每個 JavaScript 函式上的 XML 檔。

整合至 IntelliSense 的 JavaScript XML 檔
在XMLDoc.js檔案中新增函式下方，建立名為test的新函式。
在測試函式中，呼叫接收兩個參數的 乘法函式 。請注意，工具提示方塊顯示 乘法函式 檔。
```
function test() {
  multiply(
}
```
JavaScript 函式的 XML 檔
完成函式呼叫語句，並輸入點以開啟傳回值的 IntelliSense 清單。請注意，Visual Studio 正在偵測檔中的傳回值，並將值視為數位。

別

傳回類型的 XML 檔
現在，插入呼叫以新增函式。請注意，JavaScript 編輯器現在支援函式多載。當您撰寫函式名稱時，您將能夠選取檔中指定的任何可用多載。

多載的 XML 檔
開啟 GotoDefinition.js 檔案，並找出 $ () .html () 函式呼叫。在 html上找出游標。
按 F12 並流覽至定義。請注意，您現在可以存取和流覽 JavaScript 程式碼，而不需使用 [尋找 ] 工具。
在程式碼檔案底部的簽章區塊之前，找出 jQuery 指令上的游標。按 F12。您將流覽至 jQuery 程式庫檔案。請注意，您也可以使用 F12流覽 jQuery 檔案。

流覽至 jQuery 定義

注意

儲存檔案之前，請確定GotoDefinition.js沒有語法錯誤。

練習 4：統合和縮小

您的網站包含多個 JavaScript 或 CSS 檔案多少次？這是非常常見的案例，統合和縮小有助於減少檔案大小，並讓網站執行更快速。 ASP.NET 4.5 中的新統合功能會將一組 JS 或 CSS 檔案封裝成單一元素，並藉由縮小內容 (來減少其大小，也就是移除不需要的空格、移除批註、減少識別碼) 。

ASP.NET 4.5 中的統合和縮小是在執行時間執行，讓程式可以識別使用者代理程式 (例如 IE、Mozilla 等) ，因此，藉由以使用者瀏覽器 (為目標來改善壓縮，例如，移除要求來自 IE) 時，Mozilla 特有的專案。

在此練習中，您將瞭解如何在 ASP.NET 4.5 中啟用和使用不同類型的統合和縮小。

工作 1 - 從 NuGet 安裝統合和縮小套件

如果尚未開啟，請啟動Visual Studio，然後開啟位於此實驗室之 Source\WhatsNewASPNET 資料夾中的 WhatsNewASPNET.sln解決方案。
開啟 NuGet 套件管理員主控台。若要這樣做，請使用 [檢視 | 其他 Windows | 套件管理員主控台] 功能表。

開啟套件管理員主控台
在 套件管理員主控台中， 輸入 Install-Package Microsoft.Web.Optimization ，然後按 ENTER。

工作 2 - 預設套件組合

使用統合和縮小的最簡單方式是啟用預設套件組合。此方法會使用慣例，讓您參考資料夾中 JS 和 CSS 檔案的配套和縮製版本。

在此工作中，您將瞭解如何啟用和參考配套和縮排的 JS 和 CSS 檔案，以及檢視產生的輸出。

如果尚未開啟，請啟動Visual Studio，然後開啟位於此實驗室之 Source\WhatsNewASPNET 資料夾中的 WhatsNewASPNET.sln解決方案。
在方案總管中，展開[樣式]、[腳本\自訂] 和 [腳本\套件組合] 資料夾。

請注意，應用程式使用多個 CSS 和 JS 檔案。

應用程式中的多個 Stylesheet 和 JavaScript 檔案
開啟 Global.asax.cs 檔案。

請注意，新的 Microsoft.Web.Optimization 命名空間會在檔案開頭加上批註。取消批註 using 指示詞，以包含統合和縮制功能。
```
using System;
using Microsoft.Web.Optimization;
```

找出 Application_Start 方法。

在此方法中，取消批註 EnableDefaultBundles 呼叫，如下列程式碼片段所示。這可讓我們使用該資料夾的路徑，加上「CSS」或「JS」尾碼，參考資料夾中的 CSS 檔案組合集合。

void Application_Start(object sender, EventArgs e)
{
    // Default behavior
    // Bundles all .js files in folders such as "scripts" if URL pointed to it: http://localhost:54716/scripts/custom/js 
    BundleTable.Bundles.EnableDefaultBundles();

    ...
}

開啟 Optimization.aspx 檔案，並找出 HeadContent的內容控制項。

請注意，CSS 檔案和 JS 檔案具有單一參考標籤。
```
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
  <link href="Styles/CSS" rel="stylesheet" type="text/css" />
  <script src="Scripts/custom/JS"></script>
</asp:Content>
```
注意

此程式碼僅供示範之用。在理想情況下，您會參考 Site.Master 檔案中的套件組合。在此範例程式碼中，您會發現 Site.Master 檔案也會參考部分配套的檔案，讓最後一個參考備援。
請注意，連結會使用 href 屬性中的統合慣例，分別從 Styles 和 Scripts\custom 資料夾取得所有 CSS 或 JS 檔案。

您可以使用 腳本/自訂/JS 的路徑，如下所示來組合和縮小 腳本/自訂 資料夾內的所有 JS 檔案。這是預設套件組合的預設行為。
```
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <ul>
    <li>
      <h2><a href="Styles/CSS">CSS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/custom/JS">JS Bundle</a></h2>
    </li>
```
開啟 Styles\Site.css 檔案。

請注意，原始 CSS 檔案包含縮排程式碼、空白和放大檔案的批註。 (JavaScript 檔案也包含空格和批註) 。

腳本資料夾中的其中一個原始 CSS 檔案
按 F5 執行應用程式並流覽至 [優化 ] 頁面。
按一下 [CSS 套件組合 ] 連結以下載並開啟檔案。

查看已縮小的配套檔案。您會注意到已移除所有空格、批註和縮排字元，並產生較小的檔案。

配套的 CSS 檔案
現在，按一下 [JS 套件組合 ] 連結以開啟 JavaScript 配套檔案。您可以放心地忽略總管警告。請注意 ，自訂 資料夾底下的 JavaScript 檔案也會組合和縮小。

配套的 JavaScript 檔案

在先前的 ASP.NET 版本中，啟用 CSS 或 JS 檔案的壓縮更為複雜。現在，如您所見，您只需要在 Global.asax 檔案中新增一行來啟用統合，然後參考月臺的配套檔案。

工作 3 - 靜態套件組合

靜態套件組合方法可讓您自訂要組合的檔案集、要使用的參考和縮制方法。

在這項工作中，您將設定靜態套件組合，以定義要組合和縮小的特定檔案集。

關閉瀏覽器。
開啟 Global.asax.cs 檔案，並找出 Application_Start 方法。

取消批註靜態套件組合程式碼，如下列程式碼所示。

您正在定義靜態套件組合，以「~/StaticBundle」虛擬路徑參考，並使用 JsMinify 以 使用 AddFile 方法縮小所有指定的檔案。最後，您要將靜態套件組合新增至 BundleTable 並加以啟用。

請注意，檔案不在相同的位置;這是預設統合的另一個優點。

void Application_Start(object sender, EventArgs e)
{
    // Default behavior
    // Bundles all .js files in folders such as "scripts" if URL pointed to it: http://localhost:54716/scripts/custom/js
    BundleTable.Bundles.EnableDefaultBundles();

    // Static bundle.
    // Access on url http://localhosthost:54716/StaticBundle
    Bundle b = new Bundle("~/StaticBundle", typeof(JsMinify));
    b.AddFile("~/scripts/custom/ECMAScript5.js");
    b.AddFile("~/scripts/custom/GoToDefinition.js");
    b.AddFile("~/scripts/bundle/JScript1.js");
    b.AddFile("~/scripts/bundle/JScript2.js");

    BundleTable.Bundles.Add(b);

    // Dynamic bundle
    // Bundles all .coffee files in folders such as "script" when "coffee" is appended to it: http://localhost:54716/scripts/coffee
    // DynamicFolderBundle fb = new DynamicFolderBundle("coffee", typeof(CoffeeMinify), "*.coffee");
    // BundleTable.Bundles.Add(fb);
}

開啟 Optimization.aspx 檔案。

請注意，當您在 Global.asax.cs 檔案中設定靜態套件組合時， 靜態 JS 套件組合 的連結是使用您宣告的路徑： /StaticBundle。

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <ul>
    <li>
      <h2><a href="Styles/CSS">CSS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/custom/JS">JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="StaticBundle">Static JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/bundle/Coffee">Dynamic JS Bundle</a></h2>
    </li>
  </ul>
</asp:Content>

按 F5 執行應用程式，然後流覽至 [優化 ] 頁面。
按一下 [靜態 JS 套件組合 ] 連結以開啟檔案。

請注意，精簡的配套 JavaScript 檔案是路徑「/StaticBundle」下靜態套件組合檔案中所設定之所有 JavaScript 檔案的輸出。

靜態 JavaScript 檔案套件組合
關閉瀏覽器並返回 Visual Studio。

工作 4 - 動態資料夾組合

在此工作中，您將瞭解如何設定動態資料夾套件組合。動態統合的功能是您可以包含靜態 JavaScript，以及編譯成 JavaScript 的語言中的其他檔案，因此在執行統合之前，需要一些處理。

在此範例中，您將瞭解如何使用 DynamicFolderBundle 類別，為以 CofeeScript 撰寫的檔案建立動態套件組合。 CofeeScript 是一種程式設計語言，可編譯成 JavaScript，並提供更簡單的語法來撰寫 JavaScript 程式碼，增強 JavaScript 的簡潔性和可讀性。

開啟 Global.asax.cs 檔案，並找出 Application_Start 方法。

取消批註動態套件組合程式碼，如下列程式碼所示。

您正在定義動態資料夾套件組合，該套件組合將使用 CoffeeMinify 自訂縮小處理器，該處理器只會套用至副檔名為「.coffee」的檔案， (CoffeeScript 檔案) 。請注意，您可以使用搜尋模式來選取要組合在資料夾內的檔案，例如 '*.coffee'。

void Application_Start(object sender, EventArgs e)
{
    // Default behavior
    // Bundles all .js files in folders such as "scripts" if URL pointed to it: http://localhost:54716/scripts/custom/js
    BundleTable.Bundles.EnableDefaultBundles();

    // Static bundle.
    // Access on url http://localhosthost:54716/StaticBundle
    ...

    // Dynamic bundle
    // Bundles all .coffee files in folders such as "script" when "coffee" is appended to it:
         // http://localhost:54716/scripts/coffee
    DynamicFolderBundle fb = new DynamicFolderBundle("coffee", typeof(CoffeeMinify), "*.coffee");
    BundleTable.Bundles.Add(fb);
}

開啟 NuGet 套件管理員主控台。若要這樣做，請使用 [檢視 | 其他 Windows | 套件管理員主控台] 功能表。
在 [套件管理員主控台] 中， 輸入 Install-Package CoffeeSharp ，然後按 ENTER。
按一下方案總管視窗中的 [顯示所有檔案] 按鈕

顯示所有檔案
以滑鼠右鍵按一下方案總管中的CoffeeMinify.cs檔案，然後選取 [包含在專案中]

在專案中包含 CoffeeMinify.cs 檔案
開啟 CoffeeMinify.cs 檔案。

這個類別繼承自 JsMinify，以縮小由 CoffeeScript 程式碼編譯產生的 JavaScript 輸出。它會呼叫 CoffeeScript 編譯器來先產生 JavaScript 程式碼，然後將它傳送至 JsMinify.Process 方法，以縮小產生的程式碼。
```
public class CoffeeMinify : JsMinify
{
    public override void Process(BundleResponse bundle)
    {
        var compiler = new CoffeeScriptEngine();
        bundle.Content = compiler.Compile(bundle.Content);

        base.Process(bundle);
    }
}
```
從 [腳本/套件組合] 資料夾開啟Script1.coffee和Script2.coffee檔案。

這些檔案將包含要編譯的 CoffeScript 程式碼，同時執行與 CoffeeMinify 類別的統合。

為了簡單起見，提供的 CoffeeScript 檔案只包含 CoffeeScript 範例程式碼。批註會由 JsMinify 程式排除。

CoffeeScript 檔案

注意

CofeeScript 提供更簡單的語法來撰寫 JavaScript 程式碼、增強 JavaScript 的簡潔性和可讀性，以及新增其他功能，例如陣列理解和模式比對。

開啟 Optimization.aspx 檔案，並找出套件組合連結。

請注意，動態 JS 套件組合的連結是使用您為動態資料夾套件組合設定的/Coffee尾碼來參考腳本/套件組合資料夾。

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <ul>
    <li>
      <h2><a href="Styles/CSS">CSS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/custom/JS">JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="StaticBundle">Static JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/bundle/Coffee">Dynamic JS Bundle</a></h2>
    </li>
  </ul>
</asp:Content>

按 F5 執行應用程式，然後流覽至 [優化 ] 頁面。
按一下 [動態 JS 套件組合 ] 連結以開啟產生的檔案。

請注意，此套件組合中包含的內容只包含 .coffee 檔案。您也可以看到 CoffeeScript 程式碼已編譯為 JavaScript，且已移除批註化行。

動態 JS 檔案套件組合

注意

此外，您可以遵循附錄 B：使用 Web Deploy 發佈 ASP.NET MVC 4 應用程式，將此應用程式部署至 Windows Azure 網站。

總結

此實驗室可協助您瞭解 Visual Studio 2012 中 ASP.NET 和 Web 開發的新功能，以及如何利用 Visual Studio 2012 中的各種增強功能。

藉由完成此Hands-On實驗室，您已瞭解如何在 Visual Studio 2012 Editors for CSS、JavaScript 和 HTML 中使用新功能和改進功能。此外，您已瞭解 Visual Studio 2012 如何實作內建統合和縮小。

附錄 A：安裝 Visual Studio Express 2012 for Web

您可以使用Microsoft Web Platform Installer安裝Microsoft Visual Studio Express 2012 for Web或其他「快速」版本。下列指示會引導您使用Microsoft Web Platform Installer安裝Visual Studio Express 2012 for Web所需的步驟。

移至 [ https://go.microsoft.com/?linkid=9810169 ] (https://go.microsoft.com/?linkid=9810169) 。或者，如果您已安裝 Web Platform Installer，您可以開啟它，並搜尋產品「Visual Studio Express 2012 for Web 與 Windows Azure SDK」。
按一下 [ 立即安裝]。如果您沒有 Web Platform Installer ，系統會將您重新導向至下載並先安裝。
開啟 Web Platform Installer 之後，按一下 [ 安裝 ] 以啟動安裝程式。

安裝Visual Studio Express
閱讀所有產品的授權和條款，然後按一下 [ 我接受 ] 繼續。

接受授權條款
等候下載和安裝程式完成。

安裝進度
安裝完成時，按一下 [ 完成]。

安裝已完成
按一下 [結束 ] 以關閉 Web Platform Installer。
若要開啟 web 的Visual Studio Express，請移至 [開始] 畫面並開始撰寫「VS Express」，然後按一下[VS Express for Web] 圖格。

VS Express for Web 圖格

附錄 B：使用 Web Deploy 發佈 ASP.NET MVC 4 應用程式

本附錄將示範如何從 Windows Azure 管理入口網站建立新的網站，併發布您遵循實驗室取得的應用程式，並利用 Windows Azure 提供的 Web Deploy 發佈功能。

工作 1 - 從 Windows Azure 入口網站建立新的網站

移至 Windows Azure 管理入口網站，並使用與您的訂用帳戶相關聯的 Microsoft 認證登入。

注意

透過 Windows Azure，您可以免費裝載 10 個 ASP.NET 網站，然後在流量成長時進行調整。您可以在這裡註冊。

登入 Windows Azure 管理入口網站
按一下命令列上的 [ 新增 ]。

建立新的網站
按一下[計算 | 網站]。然後選取 [快速建立] 選項。提供新網站的可用 URL，然後按一下 [ 建立網站]。

注意

Windows Azure 網站是可在雲端中執行的 Web 應用程式主機，您可以控制和管理。 [快速建立] 選項可讓您從入口網站外部將已完成的 Web 應用程式部署至 Windows Azure 網站。它不包含設定資料庫的步驟。

建立

使用快速建立建立新網站
等到新網站建立為止。
建立網站之後，請按一下 URL 資料行底下的連結。檢查新的網站是否正常運作。

流覽至新的網站

正在執行的網站
返回至入口網站，然後按一下 [名稱] 資料行底下的網站名稱以顯示管理頁面。

開啟網站管理頁面
在 [ 儀表板 ] 頁面的 [快速流覽 ] 區段下，按一下 [ 下載發佈設定檔 ] 連結。

注意

發佈設定檔包含針對每個啟用的發行方法，將 Web 應用程式發佈至 Windows Azure 網站所需的所有資訊。發行設定檔包含 URL、使用者認證和資料庫字串，這些都是用來連接到已啟用發行方法的每個端點並進行驗證的必要資訊。 Microsoft WebMatrix 2、Microsoft Visual Studio Express for Web和Microsoft Visual Studio 2012支援讀取發佈設定檔，以自動設定這些程式，以便將 Web 應用程式發佈至 Windows Azure 網站。

下載網站發佈設定檔
將發行設定檔檔下載到已知位置。在此練習中，您將瞭解如何使用此檔案，從 Visual Studio 將 Web 應用程式發佈至 Windows Azure 網站。

儲存發行設定檔案

工作 2 - 設定資料庫伺服器

如果您的應用程式使用SQL Server資料庫，您必須建立SQL Database伺服器。如果您想要部署未使用SQL Server的簡單應用程式，您可以略過這項工作。

您需要SQL Database伺服器來儲存應用程式資料庫。您可以從 Windows Azure 管理入口網站中的訂用帳戶檢視SQL Database伺服器，網址為Sql Databases | Server | 的儀表板。如果您沒有建立伺服器，您可以使用命令列上的 [ 新增 ] 按鈕來建立一個伺服器。記下 伺服器名稱和 URL、系統管理員登入名稱和密碼，因為您將在下一個工作中使用這些名稱。尚未建立資料庫，因為它將在稍後階段中建立。

SQL Database伺服器儀表板
在下一個工作中，您將測試 Visual Studio 中的資料庫連線，因此您必須在伺服器的 [允許 IP 位址] 清單中包含本機 IP 位址。若要這樣做，請按一下 [ 設定]，從 [目前用戶端 IP 位址 ] 中選取 IP 位址，然後將它貼到 [ 開始 IP 位址 ] 和 [ 結束 IP 位址] 文字方塊中。輸入規則的名稱，然後按一下。

新增用戶端 IP 位址
將 用戶端 IP 位址 新增至允許的 IP 位址清單之後，按一下 [ 儲存 ] 以確認變更。

確認變更

工作 3 - 使用 Web Deploy 發佈 ASP.NET MVC 4 應用程式

返回至 ASP.NET MVC 4 解決方案。在方案總管中，以滑鼠右鍵按一下網站專案，然後選取 [發佈]。

發佈網站
匯入您在第一個工作中儲存的發佈設定檔。

匯入發行設定檔
按一下 [ 驗證連線]。驗證完成後，請按 [下一步]。

注意

一旦您看到綠色核取記號出現在 [驗證連線] 按鈕旁，驗證就會完成。

驗證連線
在 [ 設定 ] 頁面的 [ 資料庫 ] 區段底下，按一下資料庫連線文字方塊旁的按鈕， (也就是 DefaultConnection) 。

Web 部署設定
設定資料庫連線，如下所示：
- 在 [伺服器名稱]中，使用tcp：前置詞輸入您的SQL Database伺服器 URL。
- 在 [使用者名稱] 中，輸入您的伺服器管理員登入名稱。
- 在 [密碼 ] 中，輸入您的伺服器管理員登入密碼。
- 輸入新的資料庫名稱，例如： MVC4SampleDB。
  
  設定目的地連接字串
然後按一下 [確定] 。當系統提示您建立資料庫時，請按一下 [是]。

建立資料庫
您將用來連線到 Windows Azure 中SQL Database的連接字串會顯示在 [預設連線] 文字方塊中。然後按一下 [下一步] 。

指向 SQL Database 的連接字串
在 [ 預覽 ] 頁面中，按一下 [ 發佈]。

發佈 Web 應用程式
發佈程式完成後，您的預設瀏覽器會開啟已發佈的網站。

發佈至 Windows Azure 的應用程式