# 公司筆記_Web.NET_1201 --- ###### tags: `.NET` `工作` `web form` 筆記內所有成就,皆不來自我 感謝所有願意分享知識可貴之人 ---- ## 目錄 - 網頁上基礎架構 - 控制項 > - 網頁與應用程式 > - 控制項在哪? > - 內建控制項與HTML控制項 > - 內建控制項與HTML控制項 差異 - PostBack屬性? > - 開始使用簡易範例 - OnClientClick屬性 - OnTextChanged屬性 - AutoPostBack屬性 - DropdownList > - Listitem - 補充 > - HTML按鈕使用PostBack > --- ## 網頁上基礎架構 (待補) ## 控制項 如何使用控制項?? 在webForm中可以使用拖拉的方式來排位置 但製作網頁時***不建議***用拖拉方式 網頁元素常常過多,所以並不適合使用拖拉 一般做網頁時多半使用HTML元素(HTML控制項也可以這兩個是一樣的) 應為網頁外觀都會用的很漂亮 所以web(網頁)基本上以外觀為主所以也不太使用內建控制項 --- 在同一webform表單上 ![](https://i.imgur.com/KAW8QUR.png) windows內建控制項與HTML控制項 **可以混合使用** **標準控制項有些元素已經沒再使用** **標準控制項元素有些會對應HTML控制項元素** ### 網頁與應用程式 承上補充 假如客戶今天請工程師使用webform做了'美美的網頁'後 想轉成應用程式,是**沒辦法的** webForm.NET是使用 內建控制項 轉 應用程式 而且應用程式外觀需一致 ### 控制項在哪? 1. **紅框** 背景選項需在前端上(.aspx) 2. **黃框** 運行狀態需為停止(運行時顏色為橘色,停止時顏色為藍色) 3. **左邊工具箱**打開才會有東西(不然會全空空的) ![](https://i.imgur.com/tbZXGrS.png) ### 內建控制項與HTML控制項 標準為內建控制項 HTML為HTML控制項 ![](https://i.imgur.com/5xWAy6C.png) **混合使用是可以的** `<asp` 為內建控制項 `<input` 為HTML控制項 ![](https://i.imgur.com/KZjLV7G.png) ### 內建控制項與HTML控制項 差異 這時來運行吧!! 別忘了先重新建置 畫面上是兩個button 看起來沒差別 ![](https://i.imgur.com/6pJoNEJ.png) 看 檢視網頁原始碼 ![](https://i.imgur.com/56mlrZr.png) 詳細一點 紅色框是.NET後台做好產生的code 綠色框 不管是內建產生還是HTML控制產生其實原始碼是一樣的 ![](https://i.imgur.com/x1jKiNj.png) ## PostBack 在之前先確認右上 '驗證的目標結構描述' 是否為HTML5 ![](https://i.imgur.com/h9nfJsM.png) --- --- ### **開始使用簡易範例** **IsPostBack簡易範例** >> **內建控制項不需要改寫任何code就可與後端Page.Load掛勾** >> **HTML控制項需要修改code與後端Page.Load掛勾 開始偵錯模式後可以看到下圖 兩個button是前端.aspx程式 上方的String是後端.cs程式 run出來的 ![](https://i.imgur.com/wF7M8fF.png) --- 後方.cs邏輯頁增加 圖中邏輯判斷 這段邏輯白話說明 當**不是** **'Post給自己PostBack'** 時 就進來if邏輯判斷式 ![](https://i.imgur.com/4NfRfd1.png) 這時按下 **內建控制項的按鈕後, 網頁上會只剩下'22'** **因為按下HTML按鈕沒有反應** ![](https://i.imgur.com/dFjFo52.png) 詳細程式運作流程 先在這三個地方下中斷點,運行程式 在第一次載入頁面時是顯示1122 程式運作為 1. 在if判斷(是否自己Post自己) 2. 否(if為非判斷,會進去) 3. 網頁上寫11 4. 網頁上寫22 **黃色小箭頭為程式正運作的地方** **F10可以至下一步** ![](https://i.imgur.com/AC3UCfV.png) ![](https://i.imgur.com/JeKMAIh.png) ![](https://i.imgur.com/1aNNP1t.png) --- **按下內建按鈕後** **再跑事件之前都會先跑Page.Load** 所以一樣進Page.Load 程式運作為 1. 在if判斷(是否自己Post自己) 2. 是(if為非判斷,不會進去) 3. 網頁上寫22 ![](https://i.imgur.com/pChnkno.png) ![](https://i.imgur.com/laW1O8l.png) ![](https://i.imgur.com/b6g3nA4.png) 下圖function是在 **需要使用的控制項上面點兩下產生** 這邊是看運行過程(黃色箭頭),先Page.Load > 事件程式 ![](https://i.imgur.com/WTcUr4P.png) ## OnClientClick屬性 ![](https://i.imgur.com/EmYZ6Ut.png) --- OnClientClick為前端事件 **開始使用** 先在.aspx的內建控制項加上OnClientClick事件 ## OnTextChanged屬性 ## AutoPostback屬性 ## DropdownList ### Listitem