2.1使用文件系統(tǒng)新建網(wǎng)站

2.2打開網(wǎng)站

2.3VisualStudio2005常用窗口簡介

2.4添加新網(wǎng)頁

2.5編輯頁面

2.6運行網(wǎng)頁

2.7編輯ASPX代碼

2.8添加事件代碼

2.9控件的定位方式

本章小結(jié)

思考與練習(xí)2.1使用文件系統(tǒng)新建網(wǎng)站

1．文件系統(tǒng)文件系統(tǒng)是指使用VisualStudio2005內(nèi)置的網(wǎng)站服務(wù)器。在ASP.NET1.x版本中，開發(fā)網(wǎng)站必須要配合IIS(InternetInformationService)環(huán)境，當(dāng)IIS由于某些原因(如IIS存在某些安全漏洞)無法配置成功時，就會導(dǎo)致網(wǎng)站開發(fā)工作無法進行，而利用VisualStudio2005內(nèi)置的網(wǎng)站服務(wù)器可以將網(wǎng)站創(chuàng)建在任何地方，開發(fā)時完全不需要IIS，這對于網(wǎng)站的開發(fā)而言是非常方便的。實際上，在開發(fā)網(wǎng)站時，只要能調(diào)試就可以了，等網(wǎng)站開發(fā)完畢以后，再部署到Web服務(wù)器上，這是比較常用的方法。

2．IIS

當(dāng)然也可以使用本地IIS當(dāng)作網(wǎng)站服務(wù)器，這是為習(xí)慣使用VisualStudio2003的開發(fā)人員設(shè)計的。

3．FTP

在實際應(yīng)用或者團隊開發(fā)中，通常有正式的Web服務(wù)器，這臺服務(wù)器可能放在機房，如果需要創(chuàng)建網(wǎng)站，則必須通過遠程控制軟件(如Windows遠程控制、VNC)來創(chuàng)建網(wǎng)站，或者親自到該服務(wù)器上創(chuàng)建網(wǎng)站，然后再把開發(fā)好的代碼復(fù)制到Web服務(wù)器上，這種方式比較麻煩。在VisualStudio2005開發(fā)環(huán)境下，我們可以選擇FTP方式來創(chuàng)建網(wǎng)站，只要能連接上FTP服務(wù)器并且擁有上傳、下載的權(quán)限，就可以修改、存儲、運行網(wǎng)頁。這一點對于團隊協(xié)作開發(fā)更為重要。

4．HTTP

HTTP也稱為Remote方式，這種方式與FTP方式類似，只不過兩者使用的協(xié)議不一樣，它們都需要遠程Web服務(wù)器的支持才可以創(chuàng)建。

下面以文件系統(tǒng)方式為例，介紹創(chuàng)建新網(wǎng)站的方法。

(1)選擇“文件”|“新建”|“網(wǎng)站”命令，如圖2-1所示，或者點擊“起始頁”|“創(chuàng)建”|“網(wǎng)站”命令，如圖2-2所示。圖2-1打開新建網(wǎng)站窗口1圖2-2打開新建網(wǎng)站窗口2

(2)選擇網(wǎng)站的目錄。

(3)系統(tǒng)將出現(xiàn)“新建網(wǎng)站”對話框，如圖2-3所示。

(4)單擊“確定”按鈕，系統(tǒng)就會自動創(chuàng)建網(wǎng)站。創(chuàng)建網(wǎng)站以后，系統(tǒng)會自動在第二步選擇在WebSite路徑下創(chuàng)建一個文件夾，在默認(rèn)情況下，該文件夾包含一個App_Data子文件夾和一個默認(rèn)網(wǎng)頁Default.aspx，如圖2-4所示。圖2-3“新建網(wǎng)站”對話框圖2-4成功新建網(wǎng)站2.2打開網(wǎng)站如果需要打開已經(jīng)創(chuàng)建的網(wǎng)站，則可以按下列步驟進行。

(1)選擇“文件”|“打開”|“網(wǎng)站”命令(見圖2-5)，或者點擊“起始頁”|“打開”|“網(wǎng)站”命令，如圖2-6所示。

(2)在“打開網(wǎng)站”的對話框中，選擇一種打開網(wǎng)站的方式，這里以打開“文件系統(tǒng)”的網(wǎng)站為例，選擇網(wǎng)站所在的文件夾，點擊“打開”，如圖2-7所示。圖2-5打開網(wǎng)站窗口1圖2-6打開網(wǎng)站窗口2圖2-7選擇網(wǎng)站目錄2.3VisualStudio2005常用窗口簡介

VisualStudio2005(簡稱VS2005)開發(fā)環(huán)境是由很多窗口構(gòu)成的，在工具欄上有打開這些窗口的快捷按鈕，下面只介紹常用的幾個窗口的使用方法。2.3.1工具箱窗口

(1)選擇“視圖”|“工具箱”命令，或單擊“工具箱”快捷按鈕，也可直接按“Ctrl+Alt+X”鍵打開工具箱，如圖2-8所示。

(2)由于ASP.NET控件太多，因此按組進行分類，單擊“+”按鈕可以展開，如圖2-9所示。圖2-8VS2005窗口介紹圖2-9展開工具箱工具箱控件的功能很多，而我們開發(fā)網(wǎng)站可以盡量使用這些控件來完成，以保證網(wǎng)站的安全性、可靠性和高效性。在后續(xù)章節(jié)中，我們將詳細介紹常用控件的使用方法。表2-1是工具箱的功能說明。在以上所列的控件中，數(shù)據(jù)工具箱可以稱為ASP.NET的精華部分。除以上列出的常用工具箱以外，ASP.NET還有很多沒有列出來的控件，甚至允許用戶導(dǎo)入第三方的控件。用戶導(dǎo)入第三方控件的步驟如下：

(1)選擇“工具”|“選擇工具箱項”，如圖2-10所示。

(2)打開“選擇工具箱項”對話框，在需要添加的控件前打鉤，就會在當(dāng)前的工具箱列表中添加相應(yīng)的控件。如果選擇“瀏覽”按鈕，則還可以導(dǎo)入任何以?.dll、.ocx、.exe為后綴名的第三方控件，如圖2-11所示。圖2-10選中“選擇工具箱項”圖2-11“選擇工具箱項”對話框2.3.2解決方案資源管理器窗口

(1)選擇“視圖”|“解決方案資源管理器”，如圖2-12所示，或單擊“解決方案資源管理器”快捷按鈕，也可按“Ctrl+W,S”鍵(該操作為先按Ctrl鍵，再同時按下W和S鍵，下同)。

(2)打開“解決方案資源管理器”，如圖2-13所示。

(3)在“解決方案資源管理器”上單擊右鍵，彈出右鍵菜單，如圖2-14所示。相關(guān)功能將在后續(xù)章節(jié)中講解。圖2-12打開“解決方案資源管理器”圖2-13“解決方案資源管理器”窗口圖2-14在“解決方案資源管理器”上打開右鍵菜單2.3.3屬性窗口

(1)選擇“視圖”|“屬性”窗口，或單擊“屬性”窗口快捷按鈕，也可按“Ctrl+W,P”鍵。

(2)打開“屬性”窗口，該窗口的下拉菜單在頁面無法選擇相應(yīng)控件時可以起到很好的作用，許多人習(xí)慣用鼠標(biāo)在頁面上選中控件，然后設(shè)置屬性，當(dāng)有的控件無法用鼠標(biāo)在頁面上選擇時，可以采用該方式選擇，如圖2-15所示。圖2-15設(shè)置屬性2.3.4頁面編輯窗口

頁面編輯窗口是開發(fā)人員使用最頻繁的窗口之一，ASP.NET2.0提供了兩種編輯網(wǎng)頁的模式，即設(shè)計模式和源模式。在設(shè)計模式下，我們可以將工具箱內(nèi)的控件通過拖曳的方式直接放到頁面上去，然后通過點擊控件設(shè)置其屬性；在源模式下，我們可以直接通過寫HTML代碼的方式完成網(wǎng)頁的編輯工作，這是一種純代碼的方式。一般在開發(fā)過程中，我們都會使用設(shè)計模式，除非需要手動添加代碼時才在源模式下操作。這兩種編輯模式本質(zhì)上是一樣的，但是如果在源模式下編寫的HTML語句有錯誤，則將無法切換到設(shè)計模式，如圖2-16所示。圖2-16源模式編輯窗口2.3.5服務(wù)器資源管理器窗口

選擇“視圖”|“服務(wù)器資源管理器”，或單擊“服務(wù)器資源管理器”快捷按鈕，也可按“Ctrl+W，L”鍵。打開“服務(wù)器資源管理器”窗口，如圖2-17所示。該窗口主要用來實現(xiàn)與數(shù)據(jù)連接相關(guān)的功能，在第7章中將作具體介紹。圖2-17“服務(wù)器資源管理器”窗口2.4添?加?新?網(wǎng)?頁前面的章節(jié)已經(jīng)介紹了如何新建并打開一個網(wǎng)站，一個網(wǎng)站的頁面往往不止一頁，本節(jié)將講述如何向已存在的網(wǎng)站中添加新的頁面。

1．添加新的網(wǎng)頁在“解決方案資源管理器”窗口中右擊網(wǎng)站文件夾，從彈出的右鍵菜單中選擇“添加新項”命令，或選擇“文件”|“新建”|“文件”，也可按“Ctrl+N”鍵添加新的網(wǎng)頁。

2．設(shè)置網(wǎng)頁在打開“添加新項”窗口中，我們可以發(fā)現(xiàn)有很多文件類型，后面將陸續(xù)介紹這些文件類型的用途和使用方法，在這里選擇“Web窗體”，如圖2-18所示。圖2-18添加新的Web窗體

3．打開新創(chuàng)建的網(wǎng)頁

創(chuàng)建新的網(wǎng)頁后，可以在“解決方案資源管理器”中發(fā)現(xiàn)該網(wǎng)頁，這時網(wǎng)頁編輯窗口已經(jīng)把當(dāng)前頁面顯示在窗口中，并默認(rèn)為源模式。如圖2-19所示，單擊“+”，我們可以看到，該頁面分為兩個部分：一部分是以“.aspx”為后綴名的頁面設(shè)計部分，另一部分是以“.aspx.cs”為后綴名的頁面代碼部分。這是因為我們在前面創(chuàng)建網(wǎng)頁的時候選擇了“將代碼放在單獨的文件中”這個選項，如圖2-18所示。圖2-19添加代碼與界面分離模式

ASP.NET使用頁面設(shè)計與代碼相分離的模式，極大地方便了網(wǎng)頁的制作。一般來講，網(wǎng)頁制作包括界面設(shè)計和編寫代碼實現(xiàn)業(yè)務(wù)流程兩個部分，在ASP.NET中，我們可以把精力集中在編寫代碼實現(xiàn)業(yè)務(wù)流程上，而界面設(shè)計和代碼美化可以交給美工處理。使用這種分離模式，可以使得美工和程序員很好地合作完成網(wǎng)頁制作，而不必像以前那樣必須等界面設(shè)計好后才可以編寫代碼。2.5編輯頁面將頁面編輯窗口切換到“設(shè)計模式”，可以將工具箱上的控件拖曳到設(shè)計窗口，快速創(chuàng)建控件，一般步驟如下：

(1)可以將工具箱上的控件拖曳到設(shè)計窗口，快速創(chuàng)建控件。例如，拖曳Label、TextBox、Button控件到Default3.aspx設(shè)計窗口，如圖2-20所示。

(2)右擊控件，從彈出的快捷菜單中選擇“屬性”命令，如圖2-21所示。圖2-20拖曳控件至設(shè)計窗口

圖2-21選擇“屬性”命令

(3)修改Label、Button的Text“屬性”窗口。在“屬性”窗口可設(shè)置控件屬性，例如，修改Label控件的Text屬性為“姓名：”；修改Button控件的Text屬性為“確定”，如圖2-22所示。

(4)存儲網(wǎng)頁修改內(nèi)容。修改后的頁面如圖2-23所示，單擊“保存”按鈕，存儲網(wǎng)頁修改內(nèi)容。圖2-22Label控件的Text屬性窗口圖2-23保存網(wǎng)頁修改內(nèi)容2.6運行網(wǎng)頁前面已創(chuàng)建了Welcome.aspx網(wǎng)頁，下面介紹如何運行網(wǎng)頁。這里介紹兩種運行網(wǎng)頁的方法。

(1)在IE瀏覽器中運行網(wǎng)頁。

(2)在“文件”窗口運行網(wǎng)頁。2.6.1在IE瀏覽器中運行網(wǎng)頁

(1)選擇“調(diào)試”|“啟動調(diào)試”命令或按下F5鍵運行網(wǎng)頁。首先必須單擊要運行的網(wǎng)頁，可以直接單擊“文件”窗口上方的標(biāo)簽，或在“解決方案資源管理器”窗口單擊要運行的網(wǎng)頁，然后選擇“調(diào)試”|“啟動調(diào)試”命令，或按F5鍵，如圖2-24所示。圖2-24在IE瀏覽器中運行網(wǎng)頁

(2)設(shè)置調(diào)試功能。當(dāng)?shù)谝淮芜\行時，系統(tǒng)會詢問是否在Web.config中加入調(diào)試功能，如圖2-25所示，單擊“確定”按鈕即可。

(3)運行后的結(jié)果如圖2-26所示。圖2-25設(shè)置調(diào)試選項圖2-26運行后的結(jié)果2.6.2在“文件”窗口運行網(wǎng)頁

在“文件”窗口運行網(wǎng)頁的好處是不用切換至IE瀏覽器即可運行。

(1)右擊“解決方案資源管理器”窗口中所要運行的文件。例如，右擊Welcome.aspx，從彈出的菜單中選擇“瀏覽方式”命令，如圖2-27所示。

(2)在“瀏覽方式”對話框中選擇“內(nèi)部Web瀏覽器”選項，單擊“瀏覽”按鈕，如圖2-28所示。

(3)運行后的結(jié)果顯示在“文件”窗口中，如圖2-29所示。圖2-27選擇“瀏覽方式”命令圖2-28“瀏覽方式”對話框圖2-29運行結(jié)果2.7編輯ASPX代碼

ASPX代碼也屬于HTML語法。HTML是標(biāo)記式的語法，標(biāo)記式語法的特點是每個標(biāo)記都有頭尾，而且采用縮進式。曾經(jīng)有許多程序員喜歡使用純文本編輯軟件，但是必須頭尾對應(yīng)，可以說是相當(dāng)麻煩的。VisualStudio2005提供了便利的功能協(xié)助編輯HTML語法文件，可顯示縮進、選擇標(biāo)記等功能。2.7.1顯示光標(biāo)所在標(biāo)記的層次

VS2005提供了方便的功能，可顯示目前鍵盤光標(biāo)標(biāo)記的層次。當(dāng)在編輯HTML代碼時經(jīng)常發(fā)現(xiàn)找不到標(biāo)記的頭尾對應(yīng)，此功能可幫助找到。當(dāng)單擊Label標(biāo)記，使光標(biāo)移至Label標(biāo)記時，Label頭尾標(biāo)記<Label></Label>會變成粗體字，而且“導(dǎo)航”標(biāo)記會顯示當(dāng)前的層次為<html>/<body>/<form>/<div>/<Label>,如圖2-30所示。圖2-30顯示Label標(biāo)記的頭尾對應(yīng)與層次2.7.2選擇標(biāo)記

VisualStudio2005提供了標(biāo)記選擇功能，可方便編輯、復(fù)制與刪除。例如，要選擇<Label>標(biāo)記，只需要在標(biāo)記導(dǎo)航欄單擊<asp:Label#Label>圖標(biāo)，就可以選擇整個<Label>標(biāo)記，如圖2-31所示。

也可以選擇整個<div>標(biāo)記的內(nèi)容。只需單擊標(biāo)記導(dǎo)航欄中的<div>圖標(biāo)，就可以選擇整個<div>標(biāo)記，如圖2-32所示。圖2-31選擇<Label>標(biāo)記圖2-32選擇<div>標(biāo)記2.7.3選擇標(biāo)記與選擇標(biāo)記內(nèi)容

在選擇標(biāo)記時，還可以根據(jù)需要選擇標(biāo)記內(nèi)容，即選擇標(biāo)記的內(nèi)容，不含標(biāo)記本身，或選擇標(biāo)記，即選擇整個標(biāo)記，包括標(biāo)記本身。

(1)顯示“選擇標(biāo)記”與“選擇標(biāo)記內(nèi)容”菜單的方法如圖2-33所示。

(2)當(dāng)選擇“選擇標(biāo)記”時，包含<div></div>，如圖2-34所示。

當(dāng)選擇“選擇標(biāo)記內(nèi)容”命令時，并不包含<div></div>，如圖2-35所示。圖2-33顯示菜單圖2-34選擇“選擇標(biāo)記”時，包含<div></div>圖2-35選擇“選擇標(biāo)記內(nèi)容”命令時，并不包含<div></div>2.8添加事件代碼可以針對某個事件為控件添加事件代碼。事件代碼可以使用VB或C#的代碼。

1．創(chuàng)建事件代碼創(chuàng)建控件事件的方法有兩種，下面分別進行介紹。方法1：這是最簡單的方法，雙擊所要創(chuàng)建事件的控件即可創(chuàng)建Click事件，如圖2-36所示。圖2-36創(chuàng)建控件事件的方法方法2：方法1通常只能創(chuàng)建Click事件，假設(shè)要創(chuàng)建其他更多的事件，必須在控件“屬性”窗口創(chuàng)建事件。圖2-37所示為利用Button1的“屬性”窗口創(chuàng)建事件。圖2-37利用“屬性”窗口創(chuàng)建事件

2．創(chuàng)建Button1_Click事件

創(chuàng)建Button1_Click事件，如圖2-38所示。

3．輸入Button1_Click事件代碼

輸入Button1_Click事件代碼，此代碼的功能是當(dāng)用戶單擊按鈕時，在用戶輸入的文字前加上Welcome，并顯示在Label2上。代碼如下：

protectedvoidButton1_Click(objectsender,EventArgse)

{

Label2.Text=“Welcome”+TextBox1.Text;

}圖2-38創(chuàng)建Button1_Click事件

4．按下F5鍵運行代碼

按下F5鍵運行代碼后的窗口如圖2-39所示。示例中在TextBox內(nèi)輸入“唐建東”，然后單擊“確定”按鈕，將顯示“Welcome唐建東”。圖2-39運行代碼后的窗口2.9控件的定位方式每個控件都可以設(shè)置定位方式，定位方式可決定控件的顯示方式?？丶亩ㄎ环绞接幸韵聨追N：

(1)Static(靜態(tài))：即NotSet(未設(shè)置)。這是默認(rèn)值，當(dāng)瀏覽器顯示網(wǎng)頁時，會根據(jù)網(wǎng)頁標(biāo)簽順序顯示。

(2)?Relative(相對)：即相對于原來該控件的位置。

(3)?Absolute(絕對)：可設(shè)置相對于Body的任意坐標(biāo)。

VisualStudio2005的默認(rèn)值為NotSet，即Static模式，這與VisualStudio2003不同，VisualStudio2003默認(rèn)為Absolute。單擊選中控件，然后選擇“布局”|“位置”命令，用來設(shè)置定位方式，如圖2-40所示。圖2-40設(shè)置定位方式2.9.1Position.aspx范例程序

為了示范定位方式，于是創(chuàng)建了Position.aspx，如圖2-41所示。圖2-41用Position.aspx來示范定位2.9.2定位方式說明

1．Absoulte絕對尋址說明

例如，Label_Absolute控件相對于Body向下位移了168像素，向右位移了144像素。

當(dāng)設(shè)置了Label_Absolute控件的定位方式為絕對，并且拖曳控件定位后，系統(tǒng)修改控件的Style屬性，Style="Position:absolute;z-index:22;left:148px;top:172px"?代表設(shè)置控件為絕對尋址方式，并且向下位移了172像素，向右位移了148像素，如圖2-42所示。圖2-42

Label_Absolute控件

2．Relative相對定位方式說明

例如，Label_Relative控件原來的位置應(yīng)排在Label_Static后面，但向下位移了70像素，向右位移了131像素，如圖2-43所示。

當(dāng)設(shè)置了Label_Relative控件的定位方式為相對，并且拖曳控件至定位后，系統(tǒng)會修改控件的Style屬性，Style="position:relative;top:80px;left:112px"?代表設(shè)置控件為相對定位方式，并且向下位移了80像素，向右位移了112像素。圖2-43

Labe