知識(shí)點(diǎn)：理解 ASP.NET 的概念和優(yōu)勢(shì)、 會(huì)創(chuàng)建 ASP.NET Web Form 程序、 理解 ASP.NET Web Form 程序的執(zhí)行階段、 會(huì)使用代碼內(nèi)嵌和代碼后置兩種方式進(jìn)行編碼。

1、網(wǎng)站開發(fā)基礎(chǔ)了解

1.1 網(wǎng)站開發(fā)各環(huán)節(jié)組成

1.2 開發(fā)網(wǎng)站需要的知識(shí)結(jié)構(gòu)

（1）網(wǎng)站開發(fā)前臺(tái)頁(yè)面技術(shù)

• 頁(yè)面設(shè)計(jì)：HTML、DIV+CSS
• 頁(yè)面特效：JavaScript、jQuery

（2）OOP編程核心公共技能

• C#基礎(chǔ)語(yǔ)法與程序邏輯
• 面向?qū)ο缶幊袒A(chǔ)
• SQL Server數(shù)據(jù)庫(kù)開發(fā)基礎(chǔ)
• ADO.NET數(shù)據(jù)訪問(wèn)技術(shù)

（3）網(wǎng)站開發(fā)后臺(tái)專門技術(shù)

• ASP.NET開發(fā)基礎(chǔ)
• 基于WebForm開發(fā)企業(yè)網(wǎng)站
• MVC框架學(xué)習(xí)
• EF框架學(xué)習(xí)
• 基于MVC+EF開發(fā)企業(yè)網(wǎng)站

2、 ASP.NET概述

通過(guò)學(xué)習(xí) HTML+CSS我們會(huì)制造靜態(tài)頁(yè)面了。靜態(tài)頁(yè)面的最大的優(yōu)點(diǎn)是速度快，可以跨平臺(tái)，跨服務(wù)器。在早期網(wǎng)站建設(shè)大多都是靜態(tài)頁(yè)面制作的，靜態(tài)頁(yè)面的網(wǎng)址是以.HTM、HTML 等為后綴的，在這種靜態(tài)網(wǎng)站上也可以由動(dòng)態(tài)效果，像滾動(dòng)字幕，GIF 格式的動(dòng)畫，或是FLASH，這些視覺(jué)上的動(dòng)態(tài)效果并不就是動(dòng)態(tài)頁(yè)面，他們是截然不同的概念。所謂動(dòng)態(tài)網(wǎng)頁(yè)，就是說(shuō)該網(wǎng)頁(yè)文件不僅具有 HTML 標(biāo)記，而且含有服務(wù)器端的腳本程序代碼， 實(shí)現(xiàn)操作數(shù)據(jù)庫(kù)、實(shí)現(xiàn)交互等功能。動(dòng)態(tài)網(wǎng)頁(yè)能根據(jù)不同的時(shí)間，不同的來(lái)訪者顯示不同的內(nèi)容，而且動(dòng)態(tài)網(wǎng)站更新方便，一般在后臺(tái)直接更新的，并不需要人工手動(dòng)修改代碼。

制造動(dòng)態(tài)頁(yè)面的主要技術(shù)有 ASP.NET、JSP 、 PHP 等，本課程主要講解 ASP.NET 技術(shù)。本章，我們初步認(rèn)識(shí)ASP.NET，了解它的概念和優(yōu)勢(shì)，掌握 ASP.NET Web Form 的編碼方式等內(nèi)容。

2.1 ASP.NET的概念

開發(fā) Web 程序的主要技術(shù)有 ASP.NET、JSP 和 PHP。其中 ASP.NET 是微軟公司整個(gè).NET Frame Work 的一部分，使用它可創(chuàng)建動(dòng)態(tài)交互的 Web 頁(yè)面。其中，ASP 的全稱是 Active Server Pages（動(dòng)態(tài)服務(wù)器頁(yè)面），是一種使嵌入在網(wǎng)頁(yè)中的服務(wù)器腳本可由服務(wù)器執(zhí)行的技術(shù)。

ASP.NET、.NET Frame Work 及對(duì)應(yīng)的集成開發(fā)環(huán)境 Visual Studio 一直以來(lái)都在不斷地更新，這些更新包括.NET 框架類庫(kù)的不斷擴(kuò)充、不斷納入新的語(yǔ)言特性等。.NET Frame Work 2.0 的出現(xiàn)標(biāo)志著.NET Frame Work 真正走向成熟，同時(shí)也說(shuō)明了 ASP.NET 技術(shù)的成熟與穩(wěn)定。為了 支持 ASP.NET 的開發(fā)，Visual Studio 也在不斷地升級(jí)版本。

2.2 ASP.NET的優(yōu)勢(shì)

作為微軟公司.NET Frame Work 的一部分，ASP.NET 技術(shù)延續(xù)了 Microsoft 的一貫優(yōu)勢(shì)，即開發(fā)效率高、強(qiáng)大的 IDE（Integrated Development Environment, 集成開發(fā)環(huán)境）設(shè)計(jì)工具的 支持。除了這些，ASP.NET 還具備以下優(yōu)勢(shì)。

1）與瀏覽器無(wú)關(guān)

無(wú)論使用何種版本的瀏覽器訪問(wèn) ASP.NET 應(yīng)用程序，呈現(xiàn)的結(jié)果都一致。ASP.NET 遵循 W3C標(biāo)準(zhǔn)化組織推薦的 XHTML 標(biāo)準(zhǔn)生成頁(yè)面的代碼，而 XHTML 標(biāo)準(zhǔn)被目前所有主流瀏覽器支持。

2）編譯后執(zhí)行，運(yùn)行效率高

代碼編譯是指將代碼“翻譯”成機(jī)器語(yǔ)言。ASP.NET 先把代碼編譯為微軟中間語(yǔ)言，然后由即時(shí)編譯器進(jìn)一步編譯成機(jī)器語(yǔ)言。編譯好的代碼再次運(yùn)行時(shí)不需要重新編譯，極大地提高了Web 應(yīng)用程序的運(yùn)行效率。

3）易于部署

將必要的文件復(fù)制到 Web 服務(wù)器上，ASP.NET 應(yīng)用程序即可以部署到該服務(wù)器上。不需要重新啟動(dòng)服務(wù)器，甚至替換運(yùn)行的編譯代碼時(shí)，也不需要重新啟動(dòng) Web 服務(wù)器。

4）豐富的可用資源

ASP.NET 可利用整個(gè).NET 平臺(tái)的資源，包括.NET 框架類庫(kù)和數(shù)據(jù)訪問(wèn)解決方案等。ASP.NET本身提供了大量的控件，包括與傳統(tǒng) HTML 代碼對(duì)應(yīng)的 HTML 控件和重新封裝的 Web 控件。

5）支持多層開發(fā)

ASP.NET 支持多層開發(fā),從而改變?cè)瓉?lái) Web 項(xiàng)目開發(fā)代碼混亂，難以管理的狀況,使得 Web 項(xiàng)目開發(fā)邏輯更清晰,管理維護(hù)更方便。

6）邏輯代碼和設(shè)計(jì)代碼分離

ASP.NET 將邏輯代碼放于單獨(dú)的文件中，將 Web 界面元素和程序邏輯分開顯示，這樣可以是代碼結(jié)構(gòu)更加清晰，方便維護(hù)和閱讀。

3、創(chuàng)建第一個(gè)ASP.NET程序

3.1 ASP.NET WebForm的概念

ASP.NET WebForm 是微軟的開發(fā)團(tuán)隊(duì)為開發(fā)者設(shè)計(jì)的一個(gè)在可視化設(shè)計(jì)器中拖放控件、編寫代碼響應(yīng)事件的快速開發(fā)環(huán)境。在 WebForm 中，微軟將 ASP.NET 的開發(fā)模型與 WinForm 統(tǒng)一起來(lái)，提供了類似于 WinForm 的控件、事件驅(qū)動(dòng)模型，使 ASP.NET 應(yīng)用程序的開發(fā)體驗(yàn)與 Win Form應(yīng)用程序高度一致。

在.NET Frame Work 3.5 SP1 發(fā)布前，ASP.NET WebForm 一直是微軟官方提供的唯一的 ASP.NET開發(fā)框架。在.NET Frame Work 3.5 SP1 中，微軟提供了另一種 ASP.NET 的開發(fā)框架即 ASP.NET MVC。

3.2 創(chuàng)建WebForm應(yīng)用程序

開發(fā) ASP.NET Web Form 程序的一般過(guò)程：創(chuàng)建解決方案(.sln) → 添加網(wǎng)站 → 添加 Web → 窗體 → 編寫代碼 → 調(diào)試運(yùn)行。

創(chuàng)建 ASP.NET Web Form 程序，實(shí)現(xiàn)當(dāng)用戶點(diǎn)擊按鈕，頁(yè)面輸出“Hello World”的功能。實(shí) 現(xiàn)步驟如下所述。

步驟 1：打開 Visual Studio 2017，點(diǎn)擊菜單欄【文件】——【新建項(xiàng)目】， 在彈出的【新建項(xiàng)目】窗口中，在左側(cè)展開“其他項(xiàng)目類型”列表，在列表中選擇“Visual Studio 解決方案”。在窗口頂端的.NET 框架版本下拉列表中選擇“.NET Framework4.5”，輸入解決方案名稱和位置后， 單擊【確定】按鈕。

步驟 2：在“解決方案資源管理器”窗口中，右擊“解決方案”，在快捷菜單中選擇“添加” → “新建項(xiàng)目”，如圖所示。

步驟 3：彈出【添加新項(xiàng)目】窗口，在窗口的左側(cè)選擇開發(fā)語(yǔ)言是“Visual C#”，在窗口的 右側(cè)選擇“ASP.NET Web應(yīng)用程序（.NET 應(yīng)用程序）”，最后給您的Web站點(diǎn)起個(gè)名字，這個(gè)案例里，我們起的是“HelloWeb”，并瀏覽選擇 Web 站點(diǎn)的保存位置后，最后單擊【確定】按鈕

在彈出的【新建ASP.NET Web應(yīng)用程序 - HelloWeb】窗口中，點(diǎn)擊選擇【空】，然后再單擊【確定】按鈕

在解決方案中添加了名稱為“HelloWeb”的站點(diǎn)后，解決方案資源管理器中的目錄結(jié)構(gòu)如圖所示。Web.config 是 XML 文件，用于網(wǎng)站的配置。

步驟 4：在解決方案里，右擊“HelloWeb”的網(wǎng)站，在快捷菜單中選擇“添加” → “Web窗體”。

此時(shí)會(huì)彈出一個(gè)【指定項(xiàng)名稱】，默認(rèn)名稱WebForm1，單擊【確定】按鈕。

此時(shí)，會(huì)自動(dòng)生成一個(gè)WebForm1.aspx文件，并在VS程序中打開，“WebForm1.aspx”即為創(chuàng)建的第一個(gè) Web 頁(yè)面。

步驟 5：在“WebForm1.aspx”頁(yè)面，進(jìn)行html代碼編寫，這里只簡(jiǎn)單的寫了title標(biāo)簽設(shè)置網(wǎng)頁(yè)標(biāo)題，并在body里輸出一句話“Hello World”。

步驟 6：啟動(dòng)運(yùn)行調(diào)試，點(diǎn)擊菜單欄【啟動(dòng)】

在瀏覽器中查看網(wǎng)頁(yè)效果。

3.3 快速創(chuàng)建WebForm應(yīng)用程序

將上面的步驟簡(jiǎn)化。

第一步：打開VS后，在菜單欄單擊【文件】——【新建項(xiàng)目】，在彈出的【新建項(xiàng)目】窗口中，依次選擇左側(cè)的Visual C#，中間部分的.NET 框架版本下拉列表中選擇“.NET Framework4.5”，程序選擇“ASP.NET Web應(yīng)用程序（.NET 應(yīng)用程序）”，給自己的項(xiàng)目起個(gè)名字，瀏覽好項(xiàng)目存放的位置，可以選擇新創(chuàng)建一個(gè)解決方案，最后單擊【確定】按鈕。

在彈出的【新建ASP.NET Web應(yīng)用程序 - HelloWeb】窗口中，點(diǎn)擊選擇【空】，然后再單擊【確定】按鈕。

第二步：在解決方案里，右擊“HelloWorld”的網(wǎng)站，在快捷菜單中選擇“添加” → “Web窗體”。

此時(shí)會(huì)彈出一個(gè)【指定項(xiàng)名稱】，默認(rèn)名稱WebForm1，可以根據(jù)需要自行修改項(xiàng)名稱，這里修改為“index”，單擊【確定】按鈕。

第三步：在解決方案里，右擊“index.aspx”，在快捷菜單中選擇“查看設(shè)計(jì)器”。

第四步：在設(shè)計(jì)器界面，從工具箱里依次拖入Label控件和Button控件，并在屬性面板修改他們的ID屬性、Visible屬性、Text屬性。（注意：如果VS界面沒(méi)有找到工具箱、屬性面板，可以在菜單欄視圖里找到他們）

第五步：在設(shè)計(jì)器界面，雙擊【確定】按鈕，進(jìn)入代碼文件，在按鈕的Click事件中編寫代碼：

        protected void BtnSure_Click(object sender, EventArgs e)
        {
            lblInfo.Visible = true;
            lblInfo.Text = "hello world!";
        }

第六步：啟動(dòng)運(yùn)行調(diào)試，點(diǎn)擊菜單欄【啟動(dòng)】

總結(jié)：ASP.NET WebForm 的應(yīng)用程序與大一所學(xué)的 WinForm 的應(yīng)用程序類似，都使用了控件+事件驅(qū)動(dòng)模型，這正是使用 ASP.NET WebForm 技術(shù)編寫 Web 程序的優(yōu)秀之處。

4、 ASP.NET 程序的運(yùn)行機(jī)制

4.1 ASP.NET 程序的執(zhí)行階段

ASP.NET 是一個(gè) Web 開發(fā)模型，能創(chuàng)建動(dòng)態(tài)可交互的 Web 頁(yè)面。ASP.NET 程序的執(zhí)行方式一般分為以下幾個(gè)階段：

(1) 使用動(dòng)態(tài) Web 開發(fā)技術(shù),如 ASP.NET，編寫 Web 應(yīng)用程序，即動(dòng)態(tài)頁(yè)面，并部署到 Web服務(wù)器端；

(2) 客戶端通過(guò)瀏覽器請(qǐng)求該動(dòng)態(tài)頁(yè)面；

(3) Web 服務(wù)器定位該 Web 應(yīng)用程序；

(4) Web 服務(wù)器根據(jù)客戶端的請(qǐng)求，對(duì) Web 應(yīng)用程序進(jìn)行編譯或解釋，并生成 html 流。將生成的 html 以流的形式返回給客戶端；

(5) 客戶端瀏覽器解釋 html 流，并顯示為 Web 頁(yè)面。

網(wǎng)站的運(yùn)行原理：

當(dāng)請(qǐng)求發(fā)送至 Web 服務(wù)器并被其接收后，服務(wù)器會(huì)判斷請(qǐng)求文件的類型：

• 如果是靜態(tài)文件， 如 html、jpg、gif 和 txt 等，服務(wù)器會(huì)自行根據(jù)目錄找到文件并發(fā)送給客戶端。
• 如果是動(dòng)態(tài)文件， 如 aspx，服務(wù)器會(huì)通過(guò) aspnet_isapi.dll 將請(qǐng)求轉(zhuǎn)交給ASP.NET 運(yùn)行時(shí)環(huán)境進(jìn)行處理。

ASP.NET 會(huì)先檢查代碼是否已經(jīng)被編譯。如果沒(méi)有，則將代碼編譯成 MSIL（Microsoft Intermediate Language， 微軟中間語(yǔ)言），然后由 JIT((Just-in-time：即時(shí))編譯器進(jìn)一步編譯成機(jī)器語(yǔ)言執(zhí)行。其中，JIT 并非一次完全編譯，而是調(diào)用哪部分代碼就編譯哪部分，這樣用戶等待時(shí)間更短。同時(shí)，編譯好的代碼再次請(qǐng)求運(yùn)行時(shí)不需要重新編譯，極大提高了 Web 應(yīng)用程序的性能。這種先將代碼編譯成中間語(yǔ)言，執(zhí)行時(shí)再編譯成機(jī)器語(yǔ)言的過(guò)程稱為二次編譯。

4.2 ASP.NET 的服務(wù)器

ASP.NET 程序需要使用 Web 服務(wù)器作為發(fā)布平臺(tái)，ASP.NET 使用 IIS 作為 Web 服務(wù)器。 IIS(Internet Information Service,Internet 信息服務(wù))是微軟開發(fā)的 Web 服務(wù)器，它基于 Windows 操作系統(tǒng)，操作方便，功能強(qiáng)大。

實(shí)際上，我們?cè)陂_發(fā)階段并不用配置 IIS，我們只需要像 WinForms 開發(fā)那樣編碼，然后單擊運(yùn)行就可以了。微軟在 Visual Studio 中內(nèi)置了一個(gè)輕量級(jí)的 Web 服務(wù)器，運(yùn)行應(yīng)用程序時(shí)，將會(huì)默認(rèn)啟動(dòng)它，并在狀態(tài)欄中出現(xiàn)圖標(biāo)，右擊該圖標(biāo)，在彈出的快捷菜單中選擇“顯示 所有應(yīng)用程序”選項(xiàng)，可以查看當(dāng)前正在運(yùn)行的站點(diǎn)信息，如圖所示。

4.3 ASP.NET WebForm的事件驅(qū)動(dòng)模型

ASP.NET WebForm 和 WinForm 一樣，都使用了控件+事件驅(qū)動(dòng)模型。但 ASP.NET WebForm 實(shí)現(xiàn)的本質(zhì)完全不同。在 ASP.NET WebForm 中由用戶操作引發(fā)的事件中，觸發(fā)事件的操作在客戶端，處理有可能在服務(wù)器端。在實(shí)際應(yīng)用中，客戶端和服務(wù)器端往往是不同的機(jī)器；而在 WinForm 中，事件的觸發(fā)和處理都在執(zhí)行程序的機(jī)器上進(jìn)行。

在 ASP.NET WebForm 中，用戶操作觸發(fā)一個(gè)事件有可能會(huì)產(chǎn)生一次新的 HTTP 請(qǐng)求。如果產(chǎn)生新的請(qǐng)求，那么服務(wù)器端在對(duì)請(qǐng)求應(yīng)答時(shí),對(duì)用戶觸發(fā)的事件進(jìn)行處理,將處理結(jié)果生成新的頁(yè)面?zhèn)鬟f給瀏覽器，瀏覽器自動(dòng)刷新，重新加載整個(gè)新的頁(yè)面，我們把這個(gè)過(guò)程稱為回發(fā)（postback）。

示例練習(xí)：WebForm 和 WinForm實(shí)現(xiàn)對(duì)比

第一步：在已有的項(xiàng)目中，新添加一個(gè)Web窗口，并在設(shè)計(jì)器界面，拖放一個(gè)Button控件，同時(shí)修改ID屬性為“btnAdd”。再拖放一個(gè)Label控件，修改其ID屬性為“l(fā)blInfo”。

第二步：雙擊【Button】按鈕，進(jìn)入Click事件代碼編寫

        int i = 0;
        protected void btnAdd_Click(object sender, EventArgs e)
        {
            i++;
            lblInfo.Text = "累計(jì)到：" + i;
        }

第三步：啟動(dòng)運(yùn)行程序，在頁(yè)面，單擊【Button】按鈕，觀察累計(jì)變化。

第四步：在當(dāng)前解決方案中，新添加一個(gè)窗體項(xiàng)目

第五步：在窗體界面，添加兩個(gè)控件Button和Label控件

第六步：雙擊Button控件，進(jìn)入代碼編寫模式

        int i = 0;
        private void button1_Click(object sender, EventArgs e)
        {
            i++;
            label1.Text = "累計(jì)到：" + i;
        }

第七步：在解決方案資源管理器里，右鍵單擊“WindowsFormsApp1”，在彈出的快捷菜單項(xiàng)里單擊【設(shè)為啟動(dòng)項(xiàng)】

第八步：啟動(dòng)運(yùn)行，預(yù)覽，在窗體界面，單擊【Button】按鈕，觀察累計(jì)變化。

案例思考：在 WinForm 和 WebForm 兩種程序中，輸入同樣的代碼，為什么執(zhí)行的結(jié)果不一樣?

5、 ASP.NET WebForm 的編碼方式

ASP.NET 有兩種編碼方式：代碼內(nèi)嵌和代碼后置。

5.1 代碼內(nèi)嵌

把所有的代碼都寫在.aspx 文件中，不需要.cs 文件，然后把 c#代碼寫在<% %>或者<script language=”c#” runat=”server”></script>之間。

示例練習(xí)：使用代碼內(nèi)嵌的方式在頁(yè)面上顯示 1 到 100 之間的和。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <script language="c#" runat="server">
                int sum = 0;
          </script>
          <%for (int i = 1; i <= 100; i++)
                {
                      sum += i;
                }
            %>
        <h2>1到100之間的和是：<span style="color:red"><%=sum %></span></h2>
        </div>
    </form>
</body>
</html>

頁(yè)面執(zhí)行效果：（注意：初次編譯時(shí)，速度會(huì)比較慢）

代碼分析：<%=sum %>是<%Response.Write(sum)%>的簡(jiǎn)化，表示在頁(yè)面輸出變量 sum，Response 是 ASP.NET 的系統(tǒng)對(duì)象，會(huì)在下一章學(xué)習(xí)。

5.2 代碼后置

代碼后置是微軟的一項(xiàng)技術(shù)，是編寫 ASP.NET 常用的編碼方式。具體方式見(jiàn)本章節(jié)的第一個(gè)示例，在該示例中，頁(yè)面文件.aspx 和代碼文件.cs 兩個(gè)文件關(guān)聯(lián)構(gòu)成一個(gè)頁(yè)面。一般情況下，.aspx 的源文件中沒(méi)有 c#代碼，只有控件和 HTMl 代碼，而在.cs 文件中編寫相關(guān)的服務(wù)器端代碼，這種將控件和布局與代碼進(jìn)行分離的技術(shù)稱為代碼后置。代碼后置的好處就是代碼和頁(yè)面內(nèi)容分離，使代碼更清晰。

示例練習(xí)：使用后置代碼的方式，在頁(yè)面上輸出 1 到 100 之間的和。

操作步驟：在上一個(gè)示例中，在項(xiàng)目方案資源管理器中，新添加一個(gè)Web窗體，并雙擊打開他對(duì)應(yīng)的.cs文件，

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication1
{
    public partial class WebForm2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            int sum = 0;
            for(int i =1; i<=100; i++)
            {
                sum += i;
            }
            Response.Write("<h2>1到100之間的和是：<span style='color: red'>"+sum+"</span></h2>");
        }
    }
}

代碼分析：代碼中“Page_Load”方法是在加載頁(yè)面時(shí)觸發(fā)執(zhí)行的，即由 Page 對(duì)象的 Load 事件觸發(fā)執(zhí)行，Page 對(duì)象是 ASP.NET 的系統(tǒng)對(duì)象，會(huì)在下一章學(xué)習(xí)。

運(yùn)行某個(gè)頁(yè)面時(shí),可以在解決方案資源管理器中右鍵單擊頁(yè)面，在彈出的快捷菜單中選擇“在瀏覽器中查看”；也可以右鍵單擊需要作為起始頁(yè)的文件，在彈出的快捷菜單中選擇“設(shè)為起始頁(yè)”，按“F5”鍵運(yùn)行網(wǎng)站。

===========這里是結(jié)束分割線==============