逐步解說：在 Visual Web Developer 中建立本機 IIS 網站

  • 發行項

更新：2007 年 11 月

在 Visual Web Developer 中，您可以建立和編輯將 Web 網頁與其他檔案放置在不同位置的網站。 放置 Web 網頁和其他檔案包括下列選項：

  • 在本機硬碟上的資料夾中，稱為檔案系統網站。

  • 做為 Microsoft Internet Information Services (IIS) 本機複本下的 Web 應用程式，稱為本機 IIS 網站。

您也可以使用遠端伺服器上的網站。如需詳細資訊，請參閱 Visual Web Developer 中的網站類型。

在這個逐步解說中，您將使用兩個在本機安裝的 IIS 複本下執行的網站。一個網站實際上位於 IIS 的根資料夾下 (一般是 C:\Inetpub\wwwroot)。第二個網站位於硬碟上方便的資料夾中，但 IIS 可藉由使用虛擬目錄使用第二個網站。

您可以使用 IIS 測試網站。如果電腦設定為允許其他使用者連接，則網站可由這些使用者使用。

注意事項：

如果您無法在電腦上執行 IIS，仍可藉由執行 Visual Web Developer 來建立和測試 ASP.NET 網站。如需詳細資訊，請參閱逐步解說：在 Visual Web Developer 中建立基本 Web 網頁。

本逐步解說將說明的工作包括下列項目：

  • 在 IIS 根目錄下建立應用程式和網頁。

  • 建立使用 IIS 虛擬根目錄 (Virtual Root) 的應用程式。

  • 使用 IIS 執行網頁。

  • 在 [方案總管] 中使用 IIS。

必要條件

若要完成這項逐步解說，您必須在電腦本機上安裝 IIS，而且必須以具有系統管理員權限的使用者登入。這是必要的做法，因為要使用 IIS Metabase (其中存放 IIS 應用程式的相關資訊) 便需要管理權限。

在 IIS 根目錄下建立網站

在這個逐步解說的第一部分中，您將建立位於 IIS 預設資料夾 (一般是 \Inetpub\wwwroot) 下的網站。

若要在 IIS 根目錄下建立新的本機 IIS 網站

  1. 開啟 Visual Web Developer。

  2. 在 [檔案] 功能表上，按一下 [新網站]。

    [新網站] 對話方塊隨即出現。

  3. 請在 [Visual Studio 安裝的範本] 下方，按一下 [ASP.NET 網站]。

  4. 按一下 [瀏覽]。

    [選擇位置] 對話方塊便會出現。

  5. 按一下 [本機 IIS]。

  6. 按一下 [預設的網站]。

  7. 按一下 [建立新 Web 應用程式] 圖示，圖示位於右上角。

    這個圖示沒有標記，但當您將滑鼠指標停在上面時，[建立新 Web 應用程式] 工具提示文字便會出現。

    這樣便會將名為 WebSite 的新應用程式加入 [預設的網站] 下方。

  8. 在新網站的方塊中，輸入 LocalIISWebSite，然後按一下 [開啟]。

    [新網站] 對話方塊隨即出現，最右側的 [位置] 方塊已填入 https://localhost/LocalIISWebSite。

  9. 在 [語言] 清單中，按一下您想要操作的程式語言。

    您所選擇的程式語言將會成為網站的預設語言，不過，您可使用不同的程式語言建立網頁和元件，以在同一 Web 應用程式中使用多種語言。

  10. 按一下 [確定]。

    Visual Web Developer 會建立新網站，並開啟名為 Default.aspx 的新網頁。讓此網頁保持開啟。這個初始的 Default.aspx 網頁會使用 Web 網頁程式碼後置 (Code-Behind) 模型。如需詳細資訊，請參閱 ASP.NET Web 網頁程式碼模型。

Visual Web Developer 不僅會建立網站的資料夾和檔案，還會與 IIS 互動，為網站建立 IIS Web 應用程式。實質上，Visual Web Developer 會呼叫 IIS，以建立 IIS 用來將資料夾和網頁識別為網站所需的中繼資料 (Metadata)。

您可以藉由查看已建立的檔案和資料夾，檢查 Visual Web Developer 已執行的動作。

若要檢查本機 IIS 網站的結構

  1. 在 Microsoft Windows 中，按一下 [開始]，再按 [執行]。

    在 [執行] 對話方塊的 [開啟] 方塊中，輸入 C:\Inetpub\wwwroot，然後按一下 [確定]。

    注意事項：

    如果將 IIS 安裝在不同的磁碟或資料夾上，請適當地變更路徑。

    在 \wwwroot 下方，您現在會看到名為 LocalIISWebSite 的新資料夾。

  2. 在 [<路徑>] 對話方塊中，按兩下 [LocalIISWebSite]。

    您會看到網站的內容，包括下列項目：

    • [App_Data] 資料夾，由 Visual Web Developer 自動建立。

    • Default.aspx 網頁。

    • 程式碼後置檔案，根據 Web 應用程式的預設語言可以是 Default.aspx.cs 或 Default.aspx.vb。

您可以像通常那樣將網頁加入網站。不過，您還可以從外部將網頁加入網站，Visual Web Developer 會將它們識別為應用程式的一部分，但您可能必須更新 [方案總管] 才能看到它們。

加入控制項以及以程式編寫控制項

在逐步解說的這個部分中，您會將 Button、TextBox 和 Label 控制項加入網頁，並撰寫程式碼以處理 Button 控制項的 Click 事件。

若要將控制項加入頁面中

  1. 在 Visual Web Developer 中，開啟或切換至 Default.aspx 網頁，然後切換至 [設計] 檢視。

  2. 按 ENTER 數次挪出一些空間。

  3. 從 [工具箱] 的 [標準] 索引標籤，將 TextBox、Button 與 Label 等三個控制項拖曳到頁面上，然後將它們放在頁面的 div 項目內。

    注意事項：

    如果看不到 [工具箱]，請按一下 [檢視] 功能表的 [工具箱]。

  4. 將插入指標放置在文字方塊之前，然後輸入輸入您的姓名：。

  5. 按一下 [Button] 控制項，然後在 [屬性] 視窗中，將 [Text] 設為 [顯示名稱]。

  6. 按一下 [Label] 控制項，然後在 [屬性] 視窗中，清除 [Text]。

  7. 按兩下 Button 控制項，其現在標記為 [顯示名稱]。

    Visual Web Developer 會在編輯器的另一個視窗中開啟網頁的程式碼檔案。

    該檔案包含 Button 控制項的基本架構 Click 處理常式。

  8. 藉由加入下列以粗體顯示的程式碼以完成 Click 處理常式，該程式碼會在按一下 Button 控制項後顯示文字字串。

    安全性注意事項：

    在 ASP.NET Web 網頁中的使用者輸入可能會含有惡意的用戶端指令碼。根據預設，ASP.NET Web 網頁會檢查回傳時的網頁，以保證使用者的輸入內容中沒有包含指令碼或 HTML 項目。如需詳細資訊，請參閱指令碼攻擊概觀。

    		 
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
    Label1.Text = Textbox1.Text & ", welcome to Visual Web Developer!"
End Sub

    protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = TextBox1.Text + ", welcome to Visual Web Developer!";
}

  9. 儲存檔案。

    您將在這個逐步解說稍後的「測試 IIS Web 應用程式」中測試這個 Web 網頁。

在 Visual Web Developer 外部更新網站

您可以看到 Visual Web Developer 正在讀取 IIS 路徑，讀取方式為自 Visual Web Developer 外部將新檔案加入至應用程式。

若要在 Visual Web Developer 外部更新 Web

  1. 使用 [記事本] 或其他文件編輯器建立包含下列文字的新檔案，包含的內容視您使用 Visual Basic 還是 C# 而定。

    <%@Page language="VB"%>
<script >
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
   Button1.Text = "I was clicked!"
End Sub
</script>
<html>
<body>
<form  id="form1">
<asp:button  text="Button1" Id="Button1"
    OnClick="Button1_Click"></asp:button>
</form>
</BODY>
</HTML>

    <%@Page language="C#"%>
<script >
protected void Button1_Click(object sender, System.EventArgs e)
{
   Button1.Text = "I was clicked!";
}
</script>
<html>
<body>
<form  id="form1">
<asp:button  text="Button1" Id="Button1"
    OnClick="Button1_Click"></asp:button>
</form>
</BODY>
</HTML>

  2. 使用名稱 TestPage.aspx 將檔案儲存在 C:\inetpub\wwwroot\LocalIISWebSite 路徑中。

    注意事項：

    如果 IIS 安裝在不同的磁碟或資料夾，請適當地變更路徑。

  3. 在 Visual Web Developer 的 [方案總管] 中，按一下網站名稱 (https://localhost/LocalIISWebSite/)，然後按一下 [檢視] 功能表上的 [重新整理]。

    會更新網站中的檔案清單，以包含您加入的檔案。接下來，您將測試 Web 網頁。

測試 IIS Web 應用程式

您現在可以測試網站。

若要測試本機 IIS 網站

  1. 在 Visual Web Developer 中，開啟 Default.aspx 網頁。

  2. 按 CTRL+F5 執行頁面。

    網頁會在瀏覽器中開啟。請注意，瀏覽器中的 URL 是 https://localhost/LocalIISWebSite/default.aspx。網頁的要求傳送給 localhost (沒有通訊埠編號)，並由 IIS 處理該要求。

  3. 當網頁出現在瀏覽器中時，在文字方塊中輸入您的姓名，然後按一下 [顯示名稱]，以確定其正常運作。

  4. 在 Visual Web Developer 中，開啟 TestPage.aspx 網頁。

  5. 按 CTRL+F5 執行頁面。

    網頁會在瀏覽器的同一執行個體中開啟。

  6. 當網頁出現在瀏覽器中時，按一下 [Button1]，以確定其正常運作。

  7. 關閉瀏覽器。

如果您可以從其他電腦連接至該電腦，則可以嘗試將網站做為公用網站進行存取。如果您無法從其他電腦連接至該電腦，則可以略過這個程序。

若要將網站做為公用網站進行測試

  • 從其他電腦，輸入包含 Web 伺服器電腦名稱、網站名稱和 default.aspx 的 URL 做為網頁：

    • 如果可以透過區域網路存取電腦，請使用電腦名稱做為伺服器，其 URL 如下所示：

      http://server1/LocalIISWebSite/default.aspx

    • 如果您在電腦上裝載 (Host) 網域，則可以使用下列 URL 存取網頁：

      https://www.contoso.com/LocalIISWebSite/default.aspx

    • 如果電腦在網路上，或直接連接至網際網路，則可以使用電腦的 IP 位址做為伺服器名稱。例如：

      http://172.19.195.700/LocalIISWebSite/default.aspx

      注意事項：

      如果因為 Windows 防火牆設定而無法從其他電腦檢視應用程式，則可能必須在通訊埠 80 上啟用 Web 伺服器。您可在 Windows 防火牆的 [進階] 索引標籤上按一下 [設定] 來完成這個動作。如需詳細資訊，請移至 Security Developer Center -- .NET Framew，並搜尋有關 Windows 防火牆設定的資訊。

建立做為 IIS 虛擬根目錄的網站

正如您到目前為止所看到的，IIS 可讓您建立實際上位於預設 Web 伺服器根資料夾 (wwwroot) 下的 Web 應用程式。不過，您也可以建立 IIS 虛擬目錄，它是可以指向位於硬碟上任何位置之檔案和資料夾的 IIS Web 應用程式。

注意事項：

出於安全性原因，IIS 不允許建立指向其他電腦上資料夾的虛擬目錄。虛擬目錄必須總是指向本機電腦。

在逐步解說的這個部分中，您將使用 Visual Web Developer 建立虛擬目錄，並將其指向儲存在電腦本機資料夾中的網站。

首先建立虛擬目錄。如果您已在 Visual Web Developer 中建立了檔案系統網站 (例如，藉由完成逐步解說：在 Visual Web Developer 中建立基本 Web 網頁)，則可使用該網站。

若要使用虛擬資料夾建立本機 IIS 網站

  1. 在 Visual Web Developer 中，按一下 [檔案] 功能表上的 [新網站]。

  2. 請在 [Visual Studio 安裝的範本] 下方，按一下 [ASP.NET 網站]。

  3. 按一下 [瀏覽]。

    [選擇位置] 對話方塊便會出現。

  4. 按一下 [本機 IIS]。

  5. 在樹狀檢視中 [選取要開啟的網站] 下方，按一下 [預設的網站]，再按一下位於角落的 [建立新虛擬目錄] 圖示。

    這個圖示沒有標記，但當您將滑鼠指標停在上面時，[建立新虛擬目錄] 工具提示文字便會出現。

    [新虛擬目錄] 對話方塊隨即出現。

  6. 在 [別名名稱] 方塊中，輸入 WebSite_vdir。

    注意事項：

    您可將虛擬目錄命名為任何喜歡的名稱，只要使用的名稱在 IIS 中有效即可。

  7. 在 [資料夾] 方塊中輸入下列其中一項內容：

    • 現有檔案系統網站的路徑 (如果有路徑)。可以按一下 [瀏覽]，然後尋找該網站的根資料夾 (如果沒有記住確切的路徑)。

    • 您想要建立新資料夾，以儲存網站之資料夾和檔案的路徑。

  8. 按一下 [確定]。

    如果指定的資料夾不存在，Visual Web Developer 會提示您建立資料夾。

    Visual Web Developer 接著會返回 [選擇位置] 對話方塊，並更新 IIS Web 應用程式清單以包含您建立的虛擬目錄。

  9. 選取剛剛建立的虛擬目錄，按一下 [開啟]，再按 [確定] 建立網站。

    如果您將虛擬目錄指向新資料夾或不包含網站的現有資料夾，則 Visual Web Developer 會建立 App_Data 資料夾、預設網頁，並在設計工具中開啟網頁。

    如果虛擬資料夾指向現有的檔案系統網站，則 Visual Web Developer 會開啟 [網站已經存在] 對話方塊，並讓您選擇選取新資料夾，開啟現有的網站，或是在現有的位置建立新網站。選取選項並按一下 [確定] 後，Visual Web Developer 會在 [方案總管] 中顯示資料夾的內容，並開啟 Default.aspx 網頁 (如果存在)。

加入控制項至 Web 網頁

如同您在這個逐步解說之前所做的，您將使用簡單的 ASP.NET Web 網頁來測試正在建立的 IIS 網站。如果正在使用現有的檔案系統網站，則無需建立新網頁。如果虛擬目錄指向新資料夾，則可以使用該網頁。

如果這是新網站，您會將一些控制項加入預設網頁，以便測試該網頁是否正確運作。

若要將控制項加入頁面中

  1. 在 Visual Web Developer 中，開啟 Default.aspx 網頁，並切換至 [設計] 檢視。

  2. 從 [工具箱] 的 [標準] 索引標籤中，將 TextBox、Button 與 Label 控制項拖曳至頁面，並將它們放在 div 項目內。

  3. 按兩下 Button 控制項，然後加入下列以粗體顯示的程式碼：

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
    Label1.Text = "Welcome to Visual Web Developer!"
End Sub

    protected void Button1_Click(object sender, System.EventArgs e)
{    
    Label1.Text = "Welcome to Visual Web Developer!";
}

  4. 儲存檔案。

測試虛擬目錄

您現在可以測試網站。

若要測試使用虛擬目錄的本機 IIS 網站

  1. 在 Visual Web Developer 中開啟網站中的網頁，可以是 Default.aspx 網頁或其他網頁。

  2. 按 CTRL+F5 執行頁面。

    網頁會在瀏覽器中開啟。請注意，瀏覽器中的 URL 是 https://localhost/Website_vdir/default.aspx。當 IIS 解析 URL 時，它會查詢與名為 Website_vdir 的虛擬目錄關聯的實體路徑，並在此處尋找網頁。

  3. 當網頁出現在瀏覽器中時，按一下 [按鈕] 控制項，以確定其正常運作。

  4. 關閉瀏覽器。

如果可以從其他電腦連接至該電腦，則可以嘗試使用與前一節相同的測試存取網頁。

刪除本機 IIS 網站

您可以刪除不再需要的網站，在 Visual Web Developer 中管理本機 IIS 網站。根據您使用之本機 IIS 網站的類型，刪除的運作方式會有很大區別，例如：

  • 當刪除 IIS 根目錄下的網站時，會從 IIS 刪除 Web 應用程式，同時還會刪除網站的檔案和資料夾。

  • 當刪除虛擬目錄時，會刪除有關該網站的 IIS 資訊，但是保留本機檔案系統資料夾中的檔案和資料夾。

若要刪除本機 IIS 網站

  1. 在 [檔案] 功能表上，按一下 [關閉方案] 或 [關閉專案]。

  2. 在 [檔案] 功能表上，按一下 [開啟網站]。

  3. 在 [開啟網站] 對話方塊中，按一下 [本機 IIS]。

  4. 按一下虛擬目錄的名稱 (Website_vdir)，該目錄是您之前在這個逐步解說中建立的。

    警告：

    如果選取其他網站，則可能會刪除該網站的檔案和資料夾。

  5. 按一下上方角落的刪除圖示。

    這個圖示沒有標記，但當您將滑鼠指標停在上面時，[刪除] 工具提示文字便會出現。

  6. 當提示您確認刪除網站時，按一下 [是]。

  7. 按一下 [取消] 以關閉 [開啟網站] 對話方塊。

  8. 開啟瀏覽器，然後輸入虛擬目錄的 URL：

    https://localhost/Website_vdir/default.aspx

    這次，瀏覽器會報告找不到網頁，因為 IIS 不再將 Website_vdir 識別為本機電腦上的網站。

    注意事項：

    可能網頁已由本機瀏覽器快取。在這種情況下，網頁仍會顯示，直到您清除瀏覽器快取，然後嘗試重新檢視網頁為止。

後續步驟

在這個逐步解說中，您已了解如何使用 IIS 的本機複本建立網站。您可能也想要了解其他可以在 Visual Web Developer 中建立的網站類型。例如，您可能會想要進行下列動作：

請參閱

概念

Visual Web Developer 中的網站類型

使用 Visual Web Developer 做為非管理使用者