《ASP NET開發(fā)與應(yīng)用實踐》課件第2章

本章教學(xué)內(nèi)容2.1VisualStudio2010的安裝2.2VisualStudio2010的集成環(huán)境與應(yīng)用2.3基于集成環(huán)境開發(fā)Web應(yīng)用程序1思考問題？

什么是集成開發(fā)環(huán)境？什么是服務(wù)器資源管理器？什么是解決方案資源管理器？開發(fā)一個網(wǎng)站的主要步驟？

建立一個網(wǎng)頁的主要工作步驟？22.1VisualStudio2010的安裝VisualStudio2010安裝步驟如下：①將安裝光盤放入光驅(qū)，單擊setup.exe文件，會自動彈出一個安裝對話框，如圖2-1所示，單擊對話框中“安裝MicrosoftVisualStudio2010”。32.1VisualStudio2010的安裝②彈出VisualStudio2010選擇安裝功能對話框，選擇自定義安裝，如圖2-2所示。42.1VisualStudio2010的安裝③彈出VisualStudio2010要加載的功能對話框，選擇VisualC#，如圖2-3所示。52.1VisualStudio2010的安裝④彈出VisualStudio2010安裝成功對話框，表示安裝完成，如圖2-4所示。62.2VisualStudio2010的集成環(huán)境與應(yīng)用為了提高開發(fā)效率，熟悉VisualStudio.NET集成開發(fā)環(huán)境是非常重要的。要善于充分利用VisualStudio.NET集成開發(fā)環(huán)境實現(xiàn)高效、快捷地開發(fā)Web應(yīng)用程序。72.2VisualStudio2010的集成環(huán)境與應(yīng)用1、集成環(huán)境主要窗口如圖2-5所示是集成開發(fā)環(huán)境的主窗口。集成開發(fā)環(huán)境通常由菜單欄、工具欄，以及?？炕蜃詣与[藏在左側(cè)、右側(cè)、底部和編輯器空間中的各種工具窗口組成。工具欄和多個窗口可以隨著進(jìn)行調(diào)整和關(guān)閉。8工具箱編輯窗口菜單欄工具欄窗口解決方案資源管理器窗口屬性窗口2.2VisualStudio2010的集成環(huán)境與應(yīng)用2、解決方案資源管理器窗口在“視圖”菜單中，選擇“解決方案資源管理器窗口”菜單項，即可打開解決方案資源管理器窗口。解決方案可以是不同的項目，具體可用文件夾體現(xiàn)。項目可以是網(wǎng)站，可以是Windows窗口應(yīng)用程序，可以是類庫等。解決方案將多個項目組織在一起形成一個工作文件夾，允許在一個VisualStudio.NET實例中分別操作這些項目中的文件，而不必運(yùn)行多個VisualStudio.NET實例，這對于大型項目的開發(fā)非常有用。同時也可以把同一配置應(yīng)用到不同的項目上，從而簡化操作。92.2VisualStudio2010的集成環(huán)境與應(yīng)用

3、屬性窗口在編輯窗口中，擊右鍵選擇“屬性”菜單項，即可打開屬性窗口。屬性窗口是活動窗口，主要用于顯示和配置各個控件的屬性?？丶膶傩钥梢詮拇翱谥兄苯优渲?，也可在程序運(yùn)行時，用指令動態(tài)配置。在“屬性”窗口中可以編輯和查看文件、項目和解決方案的屬性，也可以在設(shè)計時查看和修改設(shè)計器中被選中控件的屬性和事件。在“屬性”窗口的上部是一個下拉列表框，列表框中列出當(dāng)前可用的對象。通過選中某個對象，可以在“屬性”窗口的下部顯示其屬性列表。102.2VisualStudio2010的集成環(huán)境與應(yīng)用在屬性列表的上部有一個工具欄，其上有四個按鈕。分別是：（1）“按分類順序”：按鈕按類別列出選定對象的所有屬性及屬性值（2）“按字母順序：按鈕按字母順序列出選定對象的所有屬性及屬性值（3）“屬性”：按鈕顯示對象的屬性（4）“事件”：按鈕顯示對象的事件。112.2VisualStudio2010的集成環(huán)境與應(yīng)用在“屬性”窗口的最下部是說明窗，用于顯示所選屬性的屬性類型和簡短說明。在“屬性”窗口中，除了可以顯示和編輯屬性以外，還可以為Web頁面和控件添加事件。添加事件的方法為：先選中控件；然后在“屬性”窗口中單擊“事件“按鈕，最后，在事件列表中選擇相應(yīng)事件，并輸入事件處理過程的名字，或者直接雙擊事件的名字。如圖2-6所示。122.2VisualStudio2010的集成環(huán)境與應(yīng)用5.設(shè)計器窗口打開一個頁面文件后，可直接進(jìn)入設(shè)計器窗口。設(shè)計器提供了三種視圖方式，分別是設(shè)計視圖、源視圖、拆分視圖。三種視圖提供了以可視化方式和HTML代碼方式進(jìn)行頁面部局和調(diào)整。（1）設(shè)計視圖點擊左下角的“設(shè)計”按鈕，可進(jìn)入設(shè)計視圖。其以視圖方式，進(jìn)行ASP.NETWeb頁面外觀的設(shè)計?？梢园言O(shè)計器看作繪畫的畫布，通過用鼠標(biāo)拖曳的方式，在Web頁面上添加新項、調(diào)整已有項的位置和大小等。設(shè)計視圖如圖2-8所示。（2）源視圖點擊左下角的“源”按鈕，可進(jìn)入源視圖。源視圖中，以HTML形式設(shè)計進(jìn)行ASP.NETWeb頁面外觀。源視圖如圖2-9所示。132.2VisualStudio2010的集成環(huán)境與應(yīng)用6.代碼編輯窗口代碼編程輯器主要用于編寫源程序代碼。這里主要是C#代碼。進(jìn)入代碼編輯窗口主要有兩種方法：（1）在“解決方案資源管理器”中，雙擊源代碼文件打開代碼編輯器窗口；（2）在設(shè)計器中，右鍵單擊，在快捷菜單中選擇“查看代碼”，打開代碼編輯器窗口。代碼編輯器窗口如圖2-10所示。142.3基于集成環(huán)境開發(fā)Web應(yīng)用程序

1、建立Web網(wǎng)站（1）建立網(wǎng)站工程文件夾建立一個工程文件夾code2-F-1，在文件夾中再建立一個下級文件夾Images,在其中裝入一個圖片文件sinabloge.gif。(2)建立網(wǎng)站網(wǎng)頁模板啟動VS，在“文件”菜單中選擇“新建”，再選擇“網(wǎng)站”。如圖2-11所示。152.3基于集成環(huán)境開發(fā)Web應(yīng)用程序(2)選擇網(wǎng)站相關(guān)參數(shù)如圖2-12所示，選擇“空網(wǎng)站”、選擇文件“系統(tǒng)”、選擇文件路徑。如圖2-12所示。162.3基于集成環(huán)境開發(fā)Web應(yīng)用程序2、建立Web網(wǎng)頁（1）選中站點，擊右鍵選擇“添加新項”，確認(rèn)后，在對話框選擇“Web”窗體。如圖2-13和圖2-14所示。172.3基于集成環(huán)境開發(fā)Web應(yīng)用程序（2）新添加的Web窗體，默認(rèn)名為“Default.aspx”，如圖2-15和圖2-14所示?！癉efault.aspx”，如圖2-15和圖2-14所示。182.3基于集成環(huán)境開發(fā)Web應(yīng)用程序

3、在Web網(wǎng)頁上添加控件（1）打開工具箱，找出按鈕類“Button”,雙擊“Button”，在程序編輯區(qū)中添加了一個按鈕控件“Button1”。在“格式”菜單中選擇“位置”菜單項，彈出“定位”對話框，在“定位樣式”中選中“相對”，拖動該按鈕控件到指定位置。（2）打開工具箱，找出文本框類“TextBox”,雙擊“TextBox”，在程序編輯區(qū)中添加了一個文本框控件“TextBox1”。在“格式”菜單中選擇“位置”菜單項，彈出“定位”對話框，在“定位樣式”中選中“相對”，拖動該文本框控件到指定位置。如圖2-16所示。192.3基于集成環(huán)境開發(fā)Web應(yīng)用程序

4、在Web網(wǎng)頁上編輯程序代碼雙擊圖中的按鈕控件“button1”，打開了程序編輯窗口，在指定位置寫入一條指令：TextBox1.Text=“這是一個簡單程序！”;如圖2-17所示。202.3基于集成環(huán)境開發(fā)Web應(yīng)用程序5、在Web網(wǎng)頁上運(yùn)行程序（1）點擊保存文件按鍵，保存頁面文件。（2）點擊啟動調(diào)試按鍵，運(yùn)行頁面程序。如圖2-18所示。

212.3基于集成環(huán)境開發(fā)Web應(yīng)用程序（3）點擊啟動調(diào)試按鍵后，運(yùn)行的頁面程序效果圖如圖2-19所示。（4）在圖中點擊“Button”按鍵，程序運(yùn)行的結(jié)果如圖2-20所示。222.4基于集成環(huán)境開發(fā)Web應(yīng)用程序（1）登錄界面設(shè)計232.4基于集成環(huán)境開發(fā)Web應(yīng)用程序（1）登錄界面設(shè)計24protectedvoidImageButton1_Click(objectsender,ImageClickEventArgse)

{if(TextBox1.Text=="111"&&TextBox2.Text=="112")

{