iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 26
2
Modern Web

C#與ASP.Net入門-我要成為工程師!!系列 第 26

Day26-[ASP.NET]ASP.NET 網頁簡介、頁面介紹

恩沒錯,我還是來發文了,就知道這次發票頭獎一定不是我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/upload/images/20190927/20120055cTWHMroZz4.png
圖片參考來源:https://ithelp.ithome.com.tw/articles/10213192

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

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

怎麼建立Web Form

打開Visual Studio,按下建立新專案後,選擇ASP.NET Web應用程式(.NET Framework)
https://ithelp.ithome.com.tw/upload/images/20190927/20120055MyeWWkXdwA.png
然後可以選擇Web Form,會幫你建立基本的網頁範本,也可以選擇空白,自己一個一個加
https://ithelp.ithome.com.tw/upload/images/20190927/20120055TuL8b1tvYc.png
最後按下建立就可以囉!

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

專案頁面檔案介紹

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

對方案按右鍵→加入→新增項目後你可以看到很多可以加的頁面
https://ithelp.ithome.com.tw/upload/images/20190927/201200552vKbZJjBIz.png

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

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

像是button拖拉出來後長這樣
https://ithelp.ithome.com.tw/upload/images/20190927/201200559u72Ox4c2M.png

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

Web Form頁面架構

  • .aspx頁面
    你看看是不是跟html頁面87%像!XD
    https://ithelp.ithome.com.tw/upload/images/20190928/20120055UbwZNjwtEZ.png
    *runat="server"是指你的Form内的内容都是在伺服器端運行

切成設計模式後,button就是一顆按鈕長相了
https://ithelp.ithome.com.tw/upload/images/20190928/20120055UGWIEfEXTF.png

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

另外為什麼說他們是87%像?因為它並不一定100%反映HTML語法!開啟Chrome開發者工具瞧瞧~
https://ithelp.ithome.com.tw/upload/images/20190928/20120055PIWY1ZVBmk.png
它並沒有變成button的tag,而是input~
也會隱藏需要跟aspx.cs溝通的欄位喔!

  • .aspx.cs頁面
    跟.aspx是綁在一起的~
    https://ithelp.ithome.com.tw/upload/images/20190928/201200558gxHjEfvcw.png

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

跟我們之前寫的.cs也長很像,頁面要顯示的主程式要寫在 protected void Page_Load(object sender, EventArgs e){}裡
https://ithelp.ithome.com.tw/upload/images/20190928/201200556nSdV6Inb5.png

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

參考資料

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


上一篇
Day25-C#-凡事都可能有例外~出其不意就是人森阿(´_ゝ`)(例外處理try-catch)
下一篇
Day27-[ASP.NET][C#] Request 物件 vs Response物件
系列文
C#與ASP.Net入門-我要成為工程師!!31

1 則留言

0
小朱
iT邦新手 4 級 ‧ 2019-09-28 18:57:04

說實話,流程圖還是怪怪的,不過可先不用探究到那麼深...XD
HTML靜態文件不只有 HTML、還有 CSS, JS, 圖片那些檔案,也不會經由 aspx process 處理。

PS: 單就 .html 檔案處理來看,流程圖就沒錯了。

說實話,流程圖還是怪怪的,不過可先不用探究到那麼深...XD
HTML靜態文件不只有 HTML、還有 CSS, JS, 圖片那些檔案,也不會經由 aspx process 處理。

小朱大大請問我可以下什麼關鍵字找這方面的資訊嗎?我手上的書剛好都沒有提到,換了幾個關鍵字例如"aspx網頁生成"、"asp 動態網頁 JS"等等的也沒看到。

雖然我覺得我應該還是看不懂啦XDD但想先瞄一下有個印象XDDD

小朱 iT邦新手 4 級 ‧ 2019-09-29 11:09:08 檢舉

因為 ASP.NET 和 IIS 有密切的關係,所以由 IIS 找會好下手:
https://www.slideshare.net/regionbbs/aspnet-iis-iis-for-aspnet-developers

這篇也可以看一下:http://programming.wmlcloud.com/website/4242.aspx

感謝小朱大大!!!

我要留言

立即登入留言