1.4 使用Visual Studio 2010開發Web應用程序

由于Visual Studio 2010是一個集成化的開發環境，可以開發Windows Forms、WPF、Silverlight、ASP.NET等多種框架的應用程序，作為本書的重點，本節介紹如何使用Visual Studio 2010開發Web應用程序。

1.4.1 IDE開發窗口介紹

每次啟動Visual Studio時，將會顯示常用的幾個與開發緊密相關的面板，當然根據個人的布局不同，可能這些面板的呈現方式也不一樣，常用的面板及其功能如下所示。

1.解決方案資源管理器

解決方案資源管理器是Visual Studio 2010管理項目文件的統一位置，一個解決方案可以包含一個或多個項目，解決方案與項目的關系如圖1.52所示。

可以看到在一個解決方案中，可以包含Web項目、類庫項目、WCF服務及其他的解決方案文件，解決方案資源管理器提供了很多用于輔助項目管理的選擇項，解決方案文件項目保存在.sln和.suo文件中，用于存儲定義解決方案的元數據。Visual Studio 2010的解決方案資源管理器提供了管理多個項目的能力，如圖1.53是一個多項目的解決方案項，解決方案資源管理器以不同的圖標顯示了不同的項目類型。

開發人員可以在解決方案項上單擊鼠標右鍵，在彈出的快捷菜單中選擇“添加|新建項目”菜單項，或者是“添加|現有項目”菜單項來向解決方案資源管理器中增加新的項目。也可以用鼠標右鍵單擊項目名稱，在彈出的快捷菜單中選擇“移除”菜單項來從解決方案資源管理器中移除現有的項目。

解決方案資源管理器上面的工具欄非常有用，圖1.54列出的這些工具欄的具體作用。

2.文檔窗口

文檔窗口是開發人員在編輯應用程序時主要的編輯窗口，由于Visual Studio 2010中可以編輯多種不同類型的文件，如ASP.NET頁面、資源文件、Windows窗體文件等，每種類型的文件都具有一個默認的編輯器。當用戶在解決方案資源管理器中雙擊相應的文件時，將使用默認的編輯器打開文件。圖1.55顯示了Visual Studio 2010中的文檔窗口。

如果Visual Studio 2010沒有為指定的文檔提供默認的文檔窗口，開發人員也可以用鼠標右鍵單擊所要打開的文檔，在彈出的快捷菜單中選擇“打開方式”菜單項，彈出圖1.56所示的“打開方式”窗口，可以在該窗口中選擇其他的編輯器或添加新的編輯器。

3.“工具箱”窗口

“工具箱”面板與文檔窗口緊密結合，當切換到不同的文檔窗口時，“工具箱”面板的內容也會相應地發生改變。“工具箱”面板的主要目的是提供可拖放的控件給開發人員，讓開發人員在指定的文檔窗口上添加控件。工具箱的內容依賴于當前的項目類型，如當設計一個Web頁面時，將會看到圖1.57所示的“工具箱”面板。

“工具箱”面板由多個選項卡組成，每個選項卡包含不同類型的控件，如在數據選項卡中將包含與數據操作相關的一些控件，開發人員也可以定制工具箱?？梢栽诠ぞ呦渖蠁螕羰髽擞益I，在彈出的快捷菜單中選擇“添加選項卡”菜單項，即可為工具箱添加一個新的選項卡。然后可以從“標準”選項卡中拖動一些控件到該選項卡中，也可以在選項卡上面單擊鼠標右鍵，在彈出的快捷菜單中選擇“選擇項”菜單項，將會彈出圖1.58所示的“選擇工具箱項”窗口。

在該窗口中分為5個子項，讓開發人員可以選擇.NET組件、COM組件、WPF組件及工作流活動組件Activities。如果開發人員的工具項位于自定義的程序集中，可以單擊“瀏覽”按鈕，選擇工具所在的程序集文件或可執行文件，然后單擊“確定”按鈕，所選的工具項會被添加到工具箱指定的選項卡中。

4.錯誤列表和任務列表

錯誤列表和任務列表非常相似，錯誤列表將分類顯示出在檢測到用戶在輸入或者編譯時產生的錯誤信息。

任務列表顯示開發人員定義的任務信息以便于追蹤。任務列表和錯誤列表都有一個文本表示的描述和一個可選的鏈接到指定代碼位置的鏈接。默認情況下，只要項目中有錯誤時，錯誤列表窗口都會顯示出錯誤的信息。例如下面的代碼故意去掉了代碼行最后的分號，則Visual Studio 2010會自動在錯誤列表中顯示一條錯誤信息。

protected void btnShow_Click(object sender, EventArgs e)
{
   txtDate.Text = DateTime.Now.ToShortDateString() //顯示當前日期
}

錯誤信息的顯示如圖1.59所示。

任務列表用于添加和顯示當前項目中的任務，也就是TODO列表，如果在Visual Studio中沒有顯示任務列表，請選擇主菜單中的“視圖｜任務列表”菜單項顯示出任務列表，如圖1.60所示。

可以單擊按鈕添加新的用戶任務。任務列表還有一個非常有用的功能，用來顯示代碼中添加的TODO注釋。例如在如下的代碼塊前面添加了一個TODO注釋，代碼如下：

protected void btnShow_Click(object sender, EventArgs e)
{
   //TODO:當Form加載時，根據當前用戶的權限來顯示信息
   txtDate.Text = DateTime.Now.ToShortDateString(); //顯示當前日期
}

在任務列表中選擇注釋項，即可顯示出TODO注釋，如圖1.61所示。

用戶可以雙擊TODO注釋，代碼編輯器自動跳轉到注釋所在的位置，并將注釋進行高亮顯示，這對于代碼計劃或者是批注代碼重點十分有用。

必須在注釋前加TODO或者是其他的標識符才能被Visual Studio 2010所識別，用戶可以選擇主菜單的“工具｜選項”菜單項，彈出圖1.62所示的“選項”窗口。

在“環境｜任務列表”選項中，可以添加自己的標記。在“名稱”文本框中輸入標記的名稱，然后單擊“添加”按鈕即可。下面在代碼中可以添加自定義的MYTODO標記：

protected void btnShow_Click(object sender, EventArgs e)
{
   //TODO:當Form加載時，根據當前用戶的權限來顯示信息
   txtDate.Text = DateTime.Now.ToShortDateString(); //顯示當前日期
   //MYTODO:為txtDate的Text屬性賦予當前的時間字符串
}

此時，可以在任務列表中看到使用MYTODO標記的注釋，如圖1.63所示。

5.服務器資源管理器

服務器資源管理器提供了一個本機服務器資源的樹狀視圖，它類似于操作系統的“計算機管理”窗口。一般開發人員使用服務器資源管理器來查看事件日志、消息隊列、性能計算器、系統服務及操作SQL Server數據庫。服務器資源管理器不止是讓開發人員可以查看服務器資源，還可以與服務器資源進行交互，最常使用的是創建和查詢數據庫的操作，如圖1.64所示。

1.4.2 使用代碼編輯器

除了在上一節介紹的代碼編輯器的增強特性外，Visual Studio 2010還包含很多用于編寫程序代碼貼心的功能。

在ASP.NET項目中，通?？梢园础綟7】鍵來切換到后置代碼視圖編寫代碼，也可以按【Shift+F7】組合鍵切換回設計視圖。代碼編輯器具有如下幾項優秀的特性，這是很多其他類型的編輯器無法比擬的。

1.代碼大綱

代碼編輯器會自動為每個命令空間、類、方法的代碼片斷之間添加折疊符號，使開發人員可以非常方便地折疊或展開代碼，以大綱的形式顯示冗長的代碼片斷對于代碼閱讀和維護都非常有用。大綱顯示樣式如圖1.65所示。

開發人員也可以通過在代碼中添加#region和#endregion來增加自己的折疊代碼片斷，例如下面的代碼片斷：

protected void btnShow_Click(object sender, EventArgs e)
{
   #region 當用戶經過授權時，所執行的代碼片斷
   //TODO:當Form加載時，根據當前用戶的權限來顯示信息
   txtDate.Text = DateTime.Now.ToShortDateString(); //顯示當前日期
   //MYTODO:為txtDate的Text屬性賦予當前的時間字符串
   #endregion
}

在#region和#endregion代碼片斷之間，編輯器自動添加折疊符號，如圖1.66所示。

除了單擊“+”和“-”按鈕折疊代碼之外，還可以在代碼編輯器上單擊鼠標右鍵，在彈出的快捷菜單中選擇“大綱顯示”菜單項，在彈出的子菜單中可以折疊或顯示所有的代碼，或者是取消自動大綱顯示特性。

2.自動成員列表

Visual Studio 2010代碼編輯器的自動成員列表功能非常完美，當開發人員輸入一個字符時，Visual Studio 2010推斷出用戶可能需要輸入的類名、關鍵字等，產生一個列表。開發人員通過上下方向鍵選擇相應的成員，按回車鍵即可自動加入到代碼編輯器中。

當開發人員輸入一個類名時，Visual Studio 2010的自動成員列表會列出屬于該類的所有成員。自動成員列表這個功能的強大與否直接影響到開發人員的生產效率，圖1.67顯示了Visual Studio 2010的自動成員列表功能。

在.NET Framework類庫中，一些類的方法可能具有多個重載，代碼編輯器也具有列出這些重載方法的參數列表和數據類型的能力，如圖1.68所示，可以單擊圖中的小箭頭來顯示不同的重載方法的參數列表。

3.錯誤波浪線

代碼錯誤波浪線是一個非常有用的特性，Visual Studio 2010可以檢測多種錯誤條件，比如未定義的變量、屬性或者方法及無效的類型轉換等。同時，在錯誤列表中也會列出下畫線中的錯誤，如圖1.69所示。

錯誤波浪線并不會影響開發人員繼續編寫代碼，但是當按下【F5】鍵編譯時，則會彈出錯誤提示要求開發人員進行更改才能繼續編譯。

4.自動導入命名空間

如果用戶使用了一個類，但是并沒有在using區添加該類所在的命名空間，則編譯時會出現錯誤。Visual Studio 2010提供了一個非常實用的功能，可以自動導入命名空間。例如筆者在代碼編輯器中使用FileStream類，但并沒有添加對System.IO命名空間的引用。代碼編輯器會對不能識別的類名稱不進行自動顏色顯示，并且會顯示一個紅色的小圖標。當鼠標放在這個紅色的線條圖標上面時，會彈出一個小圖標，單擊這個小圖標，會彈出一個可以自動在using區添加對System.IO命名空間的引用，如圖1.70所示。

本節簡要地介紹了Visual Studio 2010 IDE中幾個比較常用的功能，其實Visual Studio 2010的IDE是非常復雜的，甚至有很多書籍長篇大論地討論了Visual Studio 2010的IDE的使用方式，讀者也可以參考MSDN中的相關資料。

1.4.3 創建Web項目

現在新建一個MyWebProject的Web項目來演示如何創建Web項目，并詳細介紹其與無項目的Web站點模板的區別。

打開Visual Studio 2010，選擇“文件｜新建｜項目”菜單項，在彈出的“新建項目”窗口中選擇“ASP.NET Web應用程序”模板，指定項目名稱為MyWebProject，單擊“確定”按鈕?？梢钥吹?，在解決方案資源管理器中出現了一個解決方案項和一個項目，如圖1.71所示。這與前面使用Web網站模板創建時顯示的不一樣。

除了前面談過的使用Web項目所生成的一些文件外，Web項目與Web站點無項目文件的開發方式在以下幾個地方也發生著變化，一些變化可能會影響到應用程序的正常運行，開發人員應該注意。

● 編譯：前面講過，Web項目經由Visual Studio中的MSBuild進行編譯，而非ASP.NET來編譯。Web頁面被編譯進與Web項目同名的單獨的程序集中（位于Bin文件夾中）。因此在部署時不必部署源代碼文件。

● 代碼后置：Web項目中的Web頁面總是使用代碼后置（Code-behind）模型。它們包含一個額外的文件，以.aspx.designer.cs結尾，其中包含了Web頁面上所有控件的定義。這意味著如果創建了一個名為Default.aspx的頁面，那么后置代碼文件將以Default.aspx.cs結尾，并且包含一個用于定義控件的Default.aspx.designer.cs的文件，在編譯時，這兩個文件將被合并。對于無項目的開發方式來說，將沒有控件定義文件，因為這部分代碼在編譯時將由ASP.NET產生。

● Page指令的差異：Web項目中的Web頁面使用不同的Page指令。比如替換了使用CodeFile屬性來指定源代碼文件，而使用CodeBehine屬性。這是因為Web項目經由Visual Studio來編譯而非由ASP.NET來編譯。ASP.NET將檢查CodeFile屬性，而Visual Studio將檢查CodeBehind屬性。

● 程序集引用：在無項目的開發方式中，所有程序集引用被記錄在Web.config文件中。因此ASP.NET能用它們在編譯時進行解析。但是Web項目中的程序集引用存儲在項目文件中，Visual Studio 2010將在編譯時進行使用。唯一的例外是System.Core.dll的引用和System.Web.Extensions.dll程序集，這兩個程序集引用定義在Web.config中，因為它們包含需要指定新配置設置的類。

對于Page指令的差異，使用Web項目創建的Web頁面的Page指令如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MyFirstWebSiteWebProject._Default" %>

而使用無項目的Web創建方式創建的Web頁面的Page指令如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

1.4.4 使用多目標特性創建Web程序

自從Visual Studio 2008以后，包括現在的Visual Studio 2010的一個向下兼容的特色是選擇開發多個版本的.NET Framework應用程序。比如，可以選擇開發.NET Framework 2.0、.NET Framework 3.5或者是.NET Framework 4.0類型的程序。當選擇不同的.NET Framework的版本后，Visual Studio會根據不同的.NET Framework版本顯示不同的項目模板，如.NET Framework 2.0中就沒有WPF之類的項目開發模板。

當選擇了.NET框架的版本之后，IDE將更新其編譯器和特性集以匹配相應的版本，不匹配的組件、控件、程序集將被隱藏，然后就可以將編譯后的應用程序復制到安裝了相應.NET版本的客戶機上。圖1.72和圖1.73所示分別是使用.NET Framework 2.0和.NET Framework 4.0創建Web網站的工具箱中的“數據”選項卡。

當選擇不同的版本時，工具箱中會呈現中當前版本可用的工具項，如ASP.NET 4.0比ASP.NET 2.0多了QueryExtender、ListView、DataPager、LinqDataSource等工具。

1.4.5 使用可視化設計器設計Web頁面

在理解了Visual Studio的基本組成后，現在可以開始設計Web頁面并且編寫程序代碼了。首先在解決方案資源管理器中選中一個Web頁面，然后雙擊.aspx文件，根據在Visual Studio中的設置的不同，將會進入不同的視圖，默認情況下，將在源代碼視圖中顯示出HTML的源代碼。用戶可以在主菜單中選擇“工具｜選項”菜單項，在彈出的“選項”窗口中選擇“HTML設計器”選項，如圖1.74所示。

Visual Studio提供了以下3種視圖來查看一個.aspx頁面。

● 設計視圖：這是頁面呈現的所見即所得的表式。

● 源視圖：這是標記語言源代碼視圖，可以在該視圖中看到HTML標記和ASP.NET控件標記。

● 拆分視圖：這是設計與源代碼視圖的組合視圖，可以在同步顯示源代碼與設計視圖中的選擇，有點類似于Dreamweaver中的分割視圖。這也是很多開發人員非常喜歡的一種視圖。

在圖1.74中有一個選項可以改變拆分視圖的折分方式，即“垂直拆分視圖”，當選擇該選項后，拆分視圖將顯示為圖1.75所示的樣式。

切換到設計視圖中后，可以從工具箱中添加控件來設計Web頁面。也可以直接從工具箱中拖動控件到源視圖，Visual Studio 2010將自動生成控件的相關標記代碼。

在設計視圖中，可以使用“屬性”面板設置所選控件的屬性，如當選擇一個按鈕時，“屬性”面板中會列出該按鈕所具有的所有可被修改的屬性，如圖1.76所示。

在“屬性”面板中，開發人員可以單擊按鈕切換到事件列表，在事件列表中選擇相應的事件并雙擊右側的輸入框，Visual Studio 2010將自動切換到后置代碼視圖，并顯示出代碼骨架。開發人員也可以在事件列表中選擇已經定義的具有相同事件簽名的事件。