實驗1在VWD中創(chuàng)建網(wǎng)頁2015

1、實驗一 在 Visual Web Developer 中創(chuàng)建基本網(wǎng)頁（2學(xué)時）實驗?zāi)康幕疽螅?熟悉VWD開發(fā)環(huán)境，了解ASP.NET網(wǎng)頁基本構(gòu)成，掌握創(chuàng)建新頁、添加控件以及編寫代碼的基本技術(shù)。重 點(diǎn)： 熟悉ASP.NET頁的創(chuàng)建方法。難 點(diǎn)：理解ASP.NET代碼分離的編程原理。實驗內(nèi)容 一、 理論復(fù)習(xí)1. 靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁的區(qū)別是什么？2. ASP.NET引擎的目的是什么？3. 請觀察ASP.NET網(wǎng)頁，說明Page指令的作用是什么？它是否會在瀏覽器中顯示？在Page中提供了哪些網(wǎng)頁信息？4. 請用500字左右比較一下目前最流行的動態(tài)網(wǎng)頁技術(shù)。二、 綜合演練 在 Visual Web

2、Developer 中創(chuàng)建基本網(wǎng)頁。綜合演練實驗步驟 在 VWD中創(chuàng)建基本網(wǎng)頁(一) 創(chuàng)建網(wǎng)站和網(wǎng)頁在本練習(xí)中，將創(chuàng)建一個網(wǎng)站并為其添加新頁。還將添加 HTML 文本并在 Web 瀏覽器中運(yùn)行該頁。本練習(xí)創(chuàng)建一個不需要使用 Microsoft Internet 信息服務(wù) (IIS) 的文件系統(tǒng)網(wǎng)站，將在本地文件系統(tǒng)中創(chuàng)建和運(yùn)行頁。創(chuàng)建文件系統(tǒng)網(wǎng)站1. 打開 Visual Web Developer。2. 在“文件”菜單上指向“新建”，然后單擊“網(wǎng)站”。出現(xiàn)“新建網(wǎng)站”對話框，如下面的屏幕快照所示?！靶陆ňW(wǎng)站”對話框3. 在“Visual Studio 已安裝的模板”之下單擊“ASP.NET 網(wǎng)

3、站”。創(chuàng)建網(wǎng)站時需要指定一個模板。每個模板創(chuàng)建包含不同文件和文件夾的 Web 應(yīng)用程序。在本練習(xí)中，您將基于“ASP.NET 網(wǎng)站”模板創(chuàng)建網(wǎng)站，該模板創(chuàng)建一些文件夾和幾個默認(rèn)文件。4. 在“位置”框中選擇“文件系統(tǒng)”框，然后輸入要保存網(wǎng)站網(wǎng)頁的文件夾的名稱。 例如，鍵入文件夾名“C:BasicWebSite”。 5. 在“語言”列表中單擊 “Visual C#”。您選擇的編程語言將是網(wǎng)站的默認(rèn)語言。但是，可以通過使用不同的編程語言創(chuàng)建頁和組件而在同一個 Web 應(yīng)用程序中使用多種語言。6. 單擊“確定”。Visual Web Developer 創(chuàng)建該文件夾和一個名為 Default.asp

4、x 的新頁。新頁創(chuàng)建后，Visual Web Developer 默認(rèn)以“源”視圖顯示該頁，在該視圖下您可以查看頁面的 HTML 元素。下面的屏幕快照顯示了一個默認(rèn)網(wǎng)頁的“源”視圖。默認(rèn)頁的“源”視圖補(bǔ)充：Visual Web Developer 教程在繼續(xù)使用頁之前，先熟悉一下 Visual Web Developer 開發(fā)環(huán)境是很有用的。下面的插圖顯示了在 Visual Web Developer 中可用的窗口和工具。Visual Web Developer 環(huán)境的關(guān)系圖熟悉 Visual Web Developer 中的 Web 設(shè)計器· 檢查上面的插圖并將插圖中的文本與下面的

5、列表相互對應(yīng)起來，該列表描述了最常用的窗口和工具。（并不是您看到的所有窗口和工具都列在這里，列出的只是上圖中標(biāo)記的那些窗口和工具。）· 工具欄。提供用于格式化文本、查找文本等的命令。一些工具欄只有在“設(shè)計”視圖中工作時才可用。· 解決方案資源管理器。顯示網(wǎng)站中的文件和文件夾。· 文檔窗口。顯示您正在選項卡式窗口中處理的文檔。單擊選項卡可以實現(xiàn)在文檔間切換。· 屬性窗口。允許您更改頁、HTML 元素、控件及其他對象的設(shè)置。· 視圖選項卡。向您展示同一文檔的不同視圖。“設(shè)計”視圖是近似 WYSIWYG 的編輯圖面。“源”視圖是頁的 HTML 編輯器

6、。您將在本練習(xí)的后面部分中使用這些視圖。如果希望以“設(shè)計”視圖打開網(wǎng)頁，可在“工具”菜單上單擊“選項”，選擇“HTML 設(shè)計器”節(jié)點(diǎn)，并更改“起始頁位置”選項。· 工具箱。提供可以拖到頁上的控件和 HTML 元素。工具箱元素按常用功能分組。· 服務(wù)器資源管理器。顯示數(shù)據(jù)庫連接。如果服務(wù)器資源管理器在 Visual Web Developer 中不可見，請在“視圖”菜單上單擊“其他窗口”，然后單擊“服務(wù)器資源管理器”。創(chuàng)建一個新的 Web 窗體頁當(dāng)創(chuàng)建新的網(wǎng)站時，Visual Web Developer 將添加一個名為 Default.aspx 的 ASP.NET 頁（Web

7、 窗體頁）?？梢允褂?Default.aspx 頁作為網(wǎng)站的主頁。但是在本練習(xí)中，將創(chuàng)建并使用一個新頁。將頁添加到網(wǎng)站1. 關(guān)閉 Default.aspx 頁。為此，右擊包含文件名的選項卡并選擇“關(guān)閉”。2. 在解決方案資源管理器中，右擊網(wǎng)站（例如，“C:BasicWebSite”），然后單擊“添加新項”。3. 在“Visual Studio 已安裝的模板”之下單擊“Web 窗體”。4. 在“名稱”框中鍵入“FirstWebPage”。5. 在“語言”列表中，選擇您希望使用的編程語言（ “C#”）。創(chuàng)建網(wǎng)站時您已指定了一種默認(rèn)語言。但是，每次為網(wǎng)站創(chuàng)建新頁或組件時，可以更改默認(rèn)語言?？梢栽谕?/p>

8、網(wǎng)站中使用不同的編程語言。6. 清除“將代碼放在單獨(dú)的文件中”復(fù)選框。下面的屏幕快照顯示了“添加新項”對話框。 “添加新項”對話框注：在本練習(xí)中，將創(chuàng)建一個代碼和 HTML 在同一頁的單文件頁。ASP.NET 頁的代碼可以在頁或單獨(dú)的類文件中找到。7. 單擊“添加”。Visual Web Developer 創(chuàng)建新頁并以“源”視圖打開。將 HTML 添加到頁在本練習(xí)的這一部分中，將向頁中添加一些靜態(tài)文本。(一) 向頁中添加文本1. 在文檔窗口的底部，單擊“設(shè)計”選項卡以切換到“設(shè)計”視圖?！霸O(shè)計”視圖以類似 WYSIWYG 的方式顯示您正在使用的頁。此時，頁上沒有任何文本或控件，因此頁是空白的

9、。2. 在頁上鍵入“歡迎使用 Visual Web Developer”。下面的屏幕快照顯示了您在“設(shè)計”視圖中鍵入的文本。在“設(shè)計”視圖中看到的歡迎文本3. 切換到“源”視圖?？梢钥吹酵ㄟ^在“設(shè)計”視圖中鍵入而創(chuàng)建的 HTML，如下面的屏幕快照所示。在“源”視圖中看到的歡迎文本運(yùn)行該頁1. 按 Ctrl+F5 運(yùn)行該頁。Visual Web Developer 啟動 ASP.NET Development Server。工具欄右側(cè)出現(xiàn)一個圖標(biāo)，指示 Visual Web Developer Web 服務(wù)器正在運(yùn)行。該頁顯示在瀏覽器中。雖然創(chuàng)建的頁的擴(kuò)展名為 .aspx，但是它當(dāng)前像任何 HT

10、ML 頁一樣運(yùn)行。2. 關(guān)閉瀏覽器。(二) 添加控件和對控件編程在本練習(xí)的這一部分中，將向頁中添加一個 Button、一個 TextBox 和一個 Label 控件，并編寫處理 Button 控件的 Click 事件的代碼?，F(xiàn)在將向頁中添加服務(wù)器控件。服務(wù)器控件（包括按鈕、標(biāo)簽、文本框和其他常見控件）為 ASP.NET 網(wǎng)頁提供了典型的窗體處理功能。但是，可以使用運(yùn)行在服務(wù)器而不是客戶端上的代碼對控件編程。向頁中添加控件1. 單擊“設(shè)計”選項卡切換到“設(shè)計”視圖。2. 按幾次 Shift+Enter 以留出一些空間。3. 從“工具箱”的“標(biāo)準(zhǔn)”組中將下列三個控件拖到頁上：TextBox 控件、

11、Button 控件和 Label 控件。4. 將插入點(diǎn)放在 TextBox 控件之上，然后鍵入“輸入您的名字：”。此靜態(tài) HTML 文本是 TextBox 控件的標(biāo)題?？梢栽谕豁撋匣旌戏胖渺o態(tài) HTML 和服務(wù)器控件。下面的屏幕快照顯示了這三個控件在“設(shè)計”視圖中如何放置?！霸O(shè)計”視圖中的控件設(shè)置控件屬性Visual Web Developer 提供了各種方式來設(shè)置頁上控件的屬性。在本練習(xí)的這一部分中，您將在“設(shè)計”視圖和“源”視圖中設(shè)置屬性。1. 選擇 Button 控件，然后在“屬性”窗口中，將“文本”設(shè)置為“顯示名稱”，如下面的屏幕快照所示。更改的按鈕控件文本2. 切換到“源”視圖?！?/p>

12、源”視圖顯示該頁的 HTML，包括 Visual Web Developer 為服務(wù)器控件創(chuàng)建的元素?？丶褂妙愃?HTML 的語法聲明，不同的是標(biāo)記使用前綴 asp: 并包括屬性 runat="server"?？丶傩?(Property) 聲明為屬性 (Attribute)。例如，當(dāng)您在第 1 步中設(shè)置 Button 控件的 Text 屬性 (Property) 時，實際是在設(shè)置該控件標(biāo)記中的 Text 屬性 (Attribute)。注意，所有控件都在一個 <form> 元素之內(nèi)，該元素也包含屬性 runat="server"。控件標(biāo)記的

13、 runat="server" 屬性和 asp: 前綴表明當(dāng)頁運(yùn)行時它們由 ASP.NET 在服務(wù)器端進(jìn)行處理。<form runat="server"> 和 <script runat="server"> 元素外部的代碼由瀏覽器作為客戶端代碼解釋，這就是為什么 ASP.NET 代碼必須在元素內(nèi)部的原因。3. 將插入點(diǎn)放在 <asp:label> 標(biāo)記內(nèi)的空白處，然后按空格鍵。將出現(xiàn)一個下拉列表，該列表顯示可以為 Label 控件設(shè)置的屬性列表。此功能（稱為 IntelliSense）在“源”視圖中

14、幫助您了解服務(wù)器控件、HTML 元素和頁上其他項的語法。下面的屏幕快照顯示了 Label 控件的 IntelliSense 下拉列表?！皹?biāo)簽”控件的 IntelliSense4. 選擇 ForeColor，然后鍵入一個等號 (=)。IntelliSense 將顯示一個顏色列表。注：可以在任何時候按 Ctrl+J 來顯示 IntelliSense 下拉列表。5. 為 Label 控件的文本選擇一種顏色。ForeColor 屬性由您選擇的顏色完成。對 Button 控件編程在本練習(xí)中，將編寫實現(xiàn)下列功能的代碼：讀取用戶輸入到文本框中的名稱并將其顯示在 Label 控件中。 添加默認(rèn)按鈕事件處理程序

15、1. 切換到“設(shè)計”視圖。2. 雙擊 Button 控件。 Visual Web Developer 切換到“源”視圖并為 Button 控件的默認(rèn)事件（Click 事件）創(chuàng)建一個主干事件處理程序。注：在“設(shè)計”視圖中雙擊控件只是創(chuàng)建事件處理程序的其中一種方法。3. 在處理程序內(nèi)鍵入以下內(nèi)容：Label1. 注：Visual Web Developer 將顯示一個 Label 控件的可用成員的列表，如下面的屏幕快照所示?？捎玫?Label 控件成員4. 完成該按鈕的 Click 事件處理程序，如下面的代碼示例所示。C# protected void Button1_Click(obj

16、ect sender, System.EventArgs e) Label1.Text = TextBox1.Text + ", welcome to Visual Web Developer!"5. 向下滾動到 <asp:Button> 元素。注意，<asp:Button> 元素現(xiàn)在具有屬性 OnClick="Button1_Click"。此屬性將按鈕的 Click 事件綁定到第 4 步中您編寫的處理程序方法。事件處理程序方法可以具有任意名稱；您看到的名稱是 Visual Web Developer 創(chuàng)建的默認(rèn)名稱。重要的是 O

17、nClick 屬性的名稱必須與頁中某個方法的名稱匹配。注：如果您是使用代碼分離，Visual Web Developer 不會添加一個顯式的 OnClick 屬性。相反，是通過在處理程序聲明本身中使用 Handles 關(guān)鍵字來將該事件綁定到處理程序方法。運(yùn)行該頁1. 按 Ctrl+F5 在瀏覽器中運(yùn)行該頁。該頁再次使用 ASP.NET Development Server 運(yùn)行。2. 在文本框中輸入名稱并單擊按鈕。輸入的名稱顯示在 Label 控件中。注意，當(dāng)您單擊該按鈕時，該頁將被發(fā)送到 Web 服務(wù)器。ASP.NET 然后重新創(chuàng)建該頁，運(yùn)行您的代碼（本例中運(yùn)行的是 Button 控件的 C

18、lick 事件處理程序），然后將新頁發(fā)送到瀏覽器。如果查看瀏覽器中的狀態(tài)欄，可以看到每次您單擊該按鈕該頁都將往返 Web 服務(wù)器一次。3. 在瀏覽器中，查看您正在運(yùn)行的頁的源代碼。在頁的源代碼中，看到的只是普通 HTML；看不到您正在“源”視圖中使用的 <asp:> 元素。當(dāng)頁運(yùn)行時，ASP.NET 會處理服務(wù)器控件并將執(zhí)行表示控件的功能的 HTML 元素呈現(xiàn)到頁上。例如，<asp:Button> 控件作為 HTML 元素 <input type="submit"> 呈現(xiàn)。4. 關(guān)閉瀏覽器。(三) 使用附加控件在本練習(xí)的這一部分中，將使用

19、 Calendar 控件，該控件一次顯示一個月的日期。Calendar 控件是比您使用過的按鈕、文本框和標(biāo)簽更加復(fù)雜的控件，并且闡釋了服務(wù)器控件的一些其他功能。添加“日歷”控件1. 在 Visual Web Developer 中，切換到“設(shè)計”視圖。2. 從“工具箱”的“標(biāo)準(zhǔn)”部分中，將一個 Calendar 控件拖到頁上：顯示該日歷的智能標(biāo)記面板。該面板顯示一些命令，這些命令使您能夠很容易地對選定控件執(zhí)行一些最常見的任務(wù)。下面的屏幕快照顯示了在“設(shè)計”視圖中呈現(xiàn)的 Calendar 控件?！霸O(shè)計”視圖中的“日歷”控件3. 在智能標(biāo)記面板中，選擇“自動套用格式”。 顯示“自動套用格式”對話框，該對話框允許您為該日歷選擇一種格式設(shè)置方案。下面的屏幕快照顯示了 Calendar 控件的“自動套用格式”對話框?！叭諝v”控件的“自動套用格式”對話框4. 從“選擇方案”列表中選擇“簡單”，然后單擊“確定”。5. 切換到“源”視圖。 您會看到 <asp:Calendar> 元素。此元素比您先前創(chuàng)建的簡單控件的元素要長很多。它還包含表示各種格式設(shè)置的子元素，如 <WeekEndDayStyle>。下面的屏幕快照顯示了“源”視圖中的 Calendar 控