逐步解說:在 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 網站
開啟 Visual Web Developer。
在 [檔案] 功能表上,按一下 [新網站]。
[新網站] 對話方塊隨即出現。
請在 [Visual Studio 安裝的範本] 下方,按一下 [ASP.NET 網站]。
按一下 [瀏覽]。
[選擇位置] 對話方塊便會出現。
按一下 [本機 IIS]。
按一下 [預設的網站]。
按一下 [建立新 Web 應用程式] 圖示,圖示位於右上角。
這個圖示沒有標記,但當您將滑鼠指標停在上面時,[建立新 Web 應用程式] 工具提示文字便會出現。
這樣便會將名為 WebSite 的新應用程式加入 [預設的網站] 下方。
在新網站的方塊中,輸入 LocalIISWebSite,然後按一下 [開啟]。
[新網站] 對話方塊隨即出現,最右側的 [位置] 方塊已填入 https://localhost/LocalIISWebSite。
在 [語言] 清單中,按一下您想要操作的程式語言。
您所選擇的程式語言將會成為網站的預設語言,不過,您可使用不同的程式語言建立網頁和元件,以在同一 Web 應用程式中使用多種語言。
按一下 [確定]。
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 網站的結構
在 Microsoft Windows 中,按一下 [開始],再按 [執行]。
在 [執行] 對話方塊的 [開啟] 方塊中,輸入 C:\Inetpub\wwwroot,然後按一下 [確定]。
注意事項:
如果將 IIS 安裝在不同的磁碟或資料夾上,請適當地變更路徑。
在 \wwwroot 下方,您現在會看到名為 LocalIISWebSite 的新資料夾。
在 [<路徑>] 對話方塊中,按兩下 [LocalIISWebSite]。
您會看到網站的內容,包括下列項目:
[App_Data] 資料夾,由 Visual Web Developer 自動建立。
Default.aspx 網頁。
程式碼後置檔案,根據 Web 應用程式的預設語言可以是 Default.aspx.cs 或 Default.aspx.vb。
您可以像通常那樣將網頁加入網站。不過,您還可以從外部將網頁加入網站,Visual Web Developer 會將它們識別為應用程式的一部分,但您可能必須更新 [方案總管] 才能看到它們。
加入控制項以及以程式編寫控制項
在逐步解說的這個部分中,您會將 Button、TextBox 和 Label 控制項加入網頁,並撰寫程式碼以處理 Button 控制項的 Click 事件。
若要將控制項加入頁面中
在 Visual Web Developer 中,開啟或切換至 Default.aspx 網頁,然後切換至 [設計] 檢視。
按 ENTER 數次挪出一些空間。
從 [工具箱] 的 [標準] 索引標籤,將 TextBox、Button 與 Label 等三個控制項拖曳到頁面上,然後將它們放在頁面的 div 項目內。
注意事項:
如果看不到 [工具箱],請按一下 [檢視] 功能表的 [工具箱]。
將插入指標放置在文字方塊之前,然後輸入輸入您的姓名:。
按一下 [Button] 控制項,然後在 [屬性] 視窗中,將 [Text] 設為 [顯示名稱]。
按一下 [Label] 控制項,然後在 [屬性] 視窗中,清除 [Text]。
按兩下 Button 控制項,其現在標記為 [顯示名稱]。
Visual Web Developer 會在編輯器的另一個視窗中開啟網頁的程式碼檔案。
該檔案包含 Button 控制項的基本架構 Click 處理常式。
藉由加入下列以粗體顯示的程式碼以完成 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!"; }
儲存檔案。
您將在這個逐步解說稍後的「測試 IIS Web 應用程式」中測試這個 Web 網頁。
在 Visual Web Developer 外部更新網站
您可以看到 Visual Web Developer 正在讀取 IIS 路徑,讀取方式為自 Visual Web Developer 外部將新檔案加入至應用程式。
若要在 Visual Web Developer 外部更新 Web
使用 [記事本] 或其他文件編輯器建立包含下列文字的新檔案,包含的內容視您使用 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>
使用名稱 TestPage.aspx 將檔案儲存在 C:\inetpub\wwwroot\LocalIISWebSite 路徑中。
注意事項:
如果 IIS 安裝在不同的磁碟或資料夾,請適當地變更路徑。
在 Visual Web Developer 的 [方案總管] 中,按一下網站名稱 (https://localhost/LocalIISWebSite/),然後按一下 [檢視] 功能表上的 [重新整理]。
會更新網站中的檔案清單,以包含您加入的檔案。接下來,您將測試 Web 網頁。
測試 IIS Web 應用程式
您現在可以測試網站。
若要測試本機 IIS 網站
在 Visual Web Developer 中,開啟 Default.aspx 網頁。
按 CTRL+F5 執行頁面。
網頁會在瀏覽器中開啟。請注意,瀏覽器中的 URL 是 https://localhost/LocalIISWebSite/default.aspx。網頁的要求傳送給 localhost (沒有通訊埠編號),並由 IIS 處理該要求。
當網頁出現在瀏覽器中時,在文字方塊中輸入您的姓名,然後按一下 [顯示名稱],以確定其正常運作。
在 Visual Web Developer 中,開啟 TestPage.aspx 網頁。
按 CTRL+F5 執行頁面。
網頁會在瀏覽器的同一執行個體中開啟。
當網頁出現在瀏覽器中時,按一下 [Button1],以確定其正常運作。
關閉瀏覽器。
如果您可以從其他電腦連接至該電腦,則可以嘗試將網站做為公用網站進行存取。如果您無法從其他電腦連接至該電腦,則可以略過這個程序。
若要將網站做為公用網站進行測試
從其他電腦,輸入包含 Web 伺服器電腦名稱、網站名稱和 default.aspx 的 URL 做為網頁:
如果可以透過區域網路存取電腦,請使用電腦名稱做為伺服器,其 URL 如下所示:
http://server1/LocalIISWebSite/default.aspx
如果您在電腦上裝載 (Host) 網域,則可以使用下列 URL 存取網頁:
如果電腦在網路上,或直接連接至網際網路,則可以使用電腦的 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 網站
在 Visual Web Developer 中,按一下 [檔案] 功能表上的 [新網站]。
請在 [Visual Studio 安裝的範本] 下方,按一下 [ASP.NET 網站]。
按一下 [瀏覽]。
[選擇位置] 對話方塊便會出現。
按一下 [本機 IIS]。
在樹狀檢視中 [選取要開啟的網站] 下方,按一下 [預設的網站],再按一下位於角落的 [建立新虛擬目錄] 圖示。
這個圖示沒有標記,但當您將滑鼠指標停在上面時,[建立新虛擬目錄] 工具提示文字便會出現。
[新虛擬目錄] 對話方塊隨即出現。
在 [別名名稱] 方塊中,輸入 WebSite_vdir。
注意事項:
您可將虛擬目錄命名為任何喜歡的名稱,只要使用的名稱在 IIS 中有效即可。
在 [資料夾] 方塊中輸入下列其中一項內容:
現有檔案系統網站的路徑 (如果有路徑)。可以按一下 [瀏覽],然後尋找該網站的根資料夾 (如果沒有記住確切的路徑)。
您想要建立新資料夾,以儲存網站之資料夾和檔案的路徑。
按一下 [確定]。
如果指定的資料夾不存在,Visual Web Developer 會提示您建立資料夾。
Visual Web Developer 接著會返回 [選擇位置] 對話方塊,並更新 IIS Web 應用程式清單以包含您建立的虛擬目錄。
選取剛剛建立的虛擬目錄,按一下 [開啟],再按 [確定] 建立網站。
如果您將虛擬目錄指向新資料夾或不包含網站的現有資料夾,則 Visual Web Developer 會建立 App_Data 資料夾、預設網頁,並在設計工具中開啟網頁。
如果虛擬資料夾指向現有的檔案系統網站,則 Visual Web Developer 會開啟 [網站已經存在] 對話方塊,並讓您選擇選取新資料夾,開啟現有的網站,或是在現有的位置建立新網站。選取選項並按一下 [確定] 後,Visual Web Developer 會在 [方案總管] 中顯示資料夾的內容,並開啟 Default.aspx 網頁 (如果存在)。
加入控制項至 Web 網頁
如同您在這個逐步解說之前所做的,您將使用簡單的 ASP.NET Web 網頁來測試正在建立的 IIS 網站。如果正在使用現有的檔案系統網站,則無需建立新網頁。如果虛擬目錄指向新資料夾,則可以使用該網頁。
如果這是新網站,您會將一些控制項加入預設網頁,以便測試該網頁是否正確運作。
若要將控制項加入頁面中
在 Visual Web Developer 中,開啟 Default.aspx 網頁,並切換至 [設計] 檢視。
從 [工具箱] 的 [標準] 索引標籤中,將 TextBox、Button 與 Label 控制項拖曳至頁面,並將它們放在 div 項目內。
按兩下 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!"; }
儲存檔案。
測試虛擬目錄
您現在可以測試網站。
若要測試使用虛擬目錄的本機 IIS 網站
在 Visual Web Developer 中開啟網站中的網頁,可以是 Default.aspx 網頁或其他網頁。
按 CTRL+F5 執行頁面。
網頁會在瀏覽器中開啟。請注意,瀏覽器中的 URL 是 https://localhost/Website_vdir/default.aspx。當 IIS 解析 URL 時,它會查詢與名為 Website_vdir 的虛擬目錄關聯的實體路徑,並在此處尋找網頁。
當網頁出現在瀏覽器中時,按一下 [按鈕] 控制項,以確定其正常運作。
關閉瀏覽器。
如果可以從其他電腦連接至該電腦,則可以嘗試使用與前一節相同的測試存取網頁。
刪除本機 IIS 網站
您可以刪除不再需要的網站,在 Visual Web Developer 中管理本機 IIS 網站。根據您使用之本機 IIS 網站的類型,刪除的運作方式會有很大區別,例如:
當刪除 IIS 根目錄下的網站時,會從 IIS 刪除 Web 應用程式,同時還會刪除網站的檔案和資料夾。
當刪除虛擬目錄時,會刪除有關該網站的 IIS 資訊,但是保留本機檔案系統資料夾中的檔案和資料夾。
若要刪除本機 IIS 網站
在 [檔案] 功能表上,按一下 [關閉方案] 或 [關閉專案]。
在 [檔案] 功能表上,按一下 [開啟網站]。
在 [開啟網站] 對話方塊中,按一下 [本機 IIS]。
按一下虛擬目錄的名稱 (Website_vdir),該目錄是您之前在這個逐步解說中建立的。
警告:
如果選取其他網站,則可能會刪除該網站的檔案和資料夾。
按一下上方角落的刪除圖示。
這個圖示沒有標記,但當您將滑鼠指標停在上面時,[刪除] 工具提示文字便會出現。
當提示您確認刪除網站時,按一下 [是]。
按一下 [取消] 以關閉 [開啟網站] 對話方塊。
開啟瀏覽器,然後輸入虛擬目錄的 URL:
https://localhost/Website_vdir/default.aspx
這次,瀏覽器會報告找不到網頁,因為 IIS 不再將 Website_vdir 識別為本機電腦上的網站。
注意事項:
可能網頁已由本機瀏覽器快取。在這種情況下,網頁仍會顯示,直到您清除瀏覽器快取,然後嘗試重新檢視網頁為止。
後續步驟
在這個逐步解說中,您已了解如何使用 IIS 的本機複本建立網站。您可能也想要了解其他可以在 Visual Web Developer 中建立的網站類型。例如,您可能會想要進行下列動作:
建立檔案系統網站,其中網頁儲存在硬碟上任何位置的資料夾中。
如需詳細資訊,請參閱逐步解說:在 Visual Web Developer 中建立基本 Web 網頁。
了解如何使用 FTP 開啟和編輯網站。
如需詳細資訊,請參閱逐步解說:在 Visual Web Developer 中編輯使用 FTP 的網站。