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

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

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

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

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

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

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

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

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

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

{