恩沒錯，我還是來發文了，就知道這次發票頭獎一定不是我QQ

第一篇就有提到這系列文會以C#為主，ASP.NET為輔。最後五篇我們就來瞧瞧ASP.NET，看看C#後端工程師的網頁模式吧!團隊夥伴碼屋(MARK WU)這次鐵人賽主題是ASP.NET Web Form，可以看看他的文章喔~

==============================================================

什麼是ASP.NET Web Form

先來看看ASP、ASP.NET、ASP.NET Web Form 的關係~~

• ASP
  全名為Active Server Pages(動態伺服器網頁)，微軟為其開發者，用來開發動態網頁使用，伺服器端執行的指令碼平台。
• ASP.NET
  全新一代的ASP，並非更新版，本身跟ASP不相容(當然部分也還是有ASP的影子)。是一個 Web開發框架，用來建立動態網頁或是Web應用程式。可以支援許多程式語言如C#、javascript、VB...等。封裝在System.Web.dll 文件中，使用System.Web命名空間，並提供ASP.NET網頁處理、擴充以及HTTP通道的應用程式與通訊處理等工作。
  ASP.NET支援三種開發模式，Web Pages(單頁面模型)、MVC(Model View Controller)、Web Forms(事件驅動模型)。有興趣瞭解發展歷史可以看這篇ASP.NET 簡史
• ASP.NET Web Form
  ASP.NET Web Form是ASP.NET web應用程式架構的一部分，擁有可拖拉的伺服器控制項、伺服器事件以及伺服器代碼的網頁。在伺服器上編譯和執行後，由伺服器生成Html顯示為網頁，網頁副檔名為aspx。也是我目前正在學習的模型。

所以使用ASP.NET的話，伺服器怎麼產生網頁的呢?
感謝夥伴Mark、小朱大大分享的這張圖，我覺得非常清楚!小小修改一下如下圖:

圖片參考來源:https://ithelp.ithome.com.tw/articles/10213192

補充:ASP.NET網頁需要編譯後才能執行，但第二次以後的載入都可以直接使用第一次編譯後的組件來執行，所以第一次載入可能速度會慢一點點。PHP網頁則是每次執行都要直譯

==============================================================

怎麼建立Web Form

打開Visual Studio，按下建立新專案後，選擇ASP.NET Web應用程式(.NET Framework)

然後可以選擇Web Form，會幫你建立基本的網頁範本，也可以選擇空白，自己一個一個加

最後按下建立就可以囉!

==============================================================

專案頁面檔案介紹

目前已經有使用到一些頁面，雖然不可能在5篇內講完，不過之後會繼續學習這些，歡迎一起討論喔~

對方案按右鍵→加入→新增項目後你可以看到很多可以加的頁面

• HTML頁面、JavaScript檔:就是你知道的那個沒有錯!但如果要用ASP.NET寫網頁，我們要新增的是Web表單喔!
• Web表單：包含.aspx檔以及.aspx.cs檔。前者有87%像成ASP.NET的HTML頁面，存放版面相關的程式碼以及控制項。後者則是寫後端程式的地方，包含控制控制項、連接資料庫等程式碼、遠端服務呼叫、商業邏輯等伺服器端的作業。
• 樣式表：CSS檔
• 類別：.cs檔案，我們要自訂的類別會放在這個頁面
• 泛型處理常式：.ashx檔案。當我們要製作API讓前端連接，要寫在這裡
• 使用主版頁面的Web Form(有兩個都是這個中文喔)：.Master檔案。又稱為MasterPage。很像投影片的母片，當網頁每一個頁面都有重複要顯示一樣內容的地方，我們可以把重複的程式碼寫在這個頁面
  
• 使用主版頁面的Web Form：.aspx檔案。所有要套用上方那個母片的網頁都編輯在這個檔案
  

另外你的左方應該有一個工具箱可以打開，如果沒有，也可以在檢視裡找到
這邊就是所謂的控制項，ASP.NET Web Form重點之一，很像html的各種tag，不過他會連動到.aspx.cs檔案，可以用拖拉的方式使用。
有用過DreamWaver的應該覺得有點熟悉XD，不過DreamWaver拉出來就是Html碼，跟這裡不太一樣喔~

像是button拖拉出來後長這樣

==============================================================

Web Form頁面架構

• .aspx頁面
  你看看是不是跟html頁面87%像!XD
  
  *runat="server"是指你的Form内的内容都是在伺服器端運行

切成設計模式後，button就是一顆按鈕長相了

無論是設計模式或是原始檔模式都可以拖拉控制項喔~

另外為什麼說他們是87%像?因為它並不一定100%反映HTML語法!開啟Chrome開發者工具瞧瞧~

它並沒有變成button的tag，而是input~
也會隱藏需要跟aspx.cs溝通的欄位喔!

• .aspx.cs頁面
  跟.aspx是綁在一起的~
  

注意:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="shareObject.aspx.cs" Inherits="shareObject.shareObject" %>
這一行至高無上!請務必放在最上方~

跟我們之前寫的.cs也長很像，頁面要顯示的主程式要寫在 protected void Page_Load(object sender, EventArgs e){}裡

==============================================================

參考資料

MSDN-什麼是 Web Form
MSDN-Getting Started with ASP.NET
Wiki-ASP.NET