ASP.NET 學習2_Server控件常用屬性介紹_簡單觀念介紹

-


在Server控制元件的標籤當中寫的屬性若非控制元件
預設會以原樣輸出到用戶端。
此外所有的ASP.NET大部分控件都是繼承自Control , WebControl等class
幾乎所有的成員都有

(1)ClientID : 控件在客戶端的ID
控件在Server端的ID不見得都會和客戶端HTML中的ID相同
因此若要客戶端透過Javascript Dom 或是 JQuery 的getElementById
$("#id")來操作控制元件的話建議不要直接寫Server Control 端的ID
因為不一定和用戶端網頁HTML渲染後的用戶控件ID一致
可用  $('#<%txt1.ClientID%>')  語法更彈性且不易抓錯

(2)Visible屬性:控件是否可見
若Visible=false是不會轉換到HTML當中的
效果並不等同於HTML中設元素style.display='none'效果不同

(3)CssClass屬性: 控件樣式名(HTML中控件的class屬性)
雖然可單獨透過BackColor , BorderStyle等.NET封裝好的server control屬性去修改
但不便於統一
且會因為太多CSS樣式生出來的html檔案大小過大容易造成加載效能差

(4)Attributes :用於設置、獲得控件的既有屬性或是額外屬性。
跟Dom中的 setAttribute() , getAttribute()有異曲同工之妙。
比方
Button.1Attributes["a1"]="1.jpg";
HTML事件則可能類似
Button1.Attributes["onmouseover"]="alert('hello')";



Web Form 

主要是由一系列Server Control組成
結合了HTML標籤(靜態內容)、程式代碼邏輯以及伺服器端控制項
運行示意圖
比方微軟的TextBox經CLR運行後就會渲染成HTML的<input>標籤




ASP.NET  Server控件

主要是ASP.NET對HTML封裝後的可程式化物件
在C#或者VB.NET等微軟旗下的主流程式語言中
就可以利用txt1.Text="This is an apple."的形式進行Input值的修改
ASP.NET則會自動將Server控制項轉成HTML對應原碼輸出給瀏覽器顯示
供開發者利用HTML標籤和Web Control來建構一些網頁使用介面的


建立專案的方式
File -> New -> Web Site

Choose Empty Web Site


Right Click -> Add -> Web Form


Named your web form



自動生成兩種檔案
.aspx (用戶端/前端)->長的像HTML的前端原碼
.aspx.cs (Server端/後端)->後端事件觸發的原碼



兩者為繼承關係
前端的.aspx檔案最終編譯出來的class會繼承.cs的後端檔案的class
.aspx.cs 是.aspx的父類



當你打開的是.aspx後綴的檔案時側欄所顯示的ToolBox控件
也就是Server Control(微軟封裝過的)




比方現在拖曳出來一個TextBox後 (切至Design可預先看畫面)


在前端aspx原碼檔案中是以XML標籤來表示
預設會自動標註  ID內容為TextBox1 前後標籤都以asp: 作為前綴
這裡看到的   runat="server" 當中的runat屬性代表屬於server端控制項非靜態HTML標籤


ASP.NET Server Control TextBox
經過編譯運行後渲染出一個HTML格式的input文本標籤

此時可以觀察到前面的name及後頭的ID也是 TextBox1
(是跟Server Control ID內容對應產生的)

Id:主要時常用來作為伺服器端控件識別，需要指定到對應的目標才可變更屬性，因此也需要具備唯一性。


切記 在前端原碼中
舉凡是asp: 為前綴的 server control
不能隨意擺放位置要放在有runat="server"的form標籤之中

因此更能說得通服務端控件就是對於用戶端控件的封裝

這邊故意寫在form之外
就會跑出錯誤警示




這裡在拖曳一個Button來做示範

在Browser中自動渲染成input type為 sumit的HTML標籤元件





當我們在後端.cs檔案
透過物件.xxx  去針對屬性做一些調整時
也會自動渲染成HTML標籤中的對應值




Web User Control

常常我們會有一些控制項組合很常使用的狀況
因此就會造成花很多時間在重造輪子
比方像剛剛的查詢組合(一個輸入框一個按鈕)
一個頁面拖曳兩次
當我今天的組合可能不只兩個甚至到二十幾個
又有一百多個網頁窗體的時候就是非常可怕的事情

因此微軟也有提供
使用者自定義控件組合來達到可重複使用的特性

特徵是副檔名:.ascx





基本上也是一個前端一個後端(.cs)的繼承關係



此時我們嘗試拖曳一些控件(按鈕、輸入框等等)




再來一個按鈕


這裡我們來去針對兩項asp標籤的文字顯示做個"用戶控件"標示

當你設計好控件模組後要使用就必須導入到aspx的文件當中
直接拖曳.ascx到.aspx檔案中就可以


此時的aspx檔案內容


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default1.aspx.cs" Inherits="Default1" %>

<%@ Register Src="~/WebUserControl1.ascx" TagPrefix="uc1" TagName="WebUserControl1" %>


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="Button" />
        <br />

        <uc1:WebUserControl1 runat="server" ID="WebUserControl1" />
    </div>
    </form>
    
</body>
</html>



這次我們來更換控制元件的背景顏色
透過Javascript來牛刀小試一下

WebControl1.ascx  Source Code

1
2
3
4
5
6
7
8
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl1.ascx.cs" Inherits="WebUserControl1" %>
<script type="text/javascript">
    window.onload = function () {
        document.getElementById("TextBox1").style.backgroundColor = "red";
    }
</script>
<asp:TextBox ID="TextBox1" runat="server" Text="My UserControl"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="My UserControl" />

運行結果發現.....
怎麼不是指定到WebControl中指定的模板組合中的輸入框






回顧到我們的Web User Control 當中定義的ID 內容為:TextBox1

跟一開始我們定義在.aspx的輸入框撞名


於網頁顯示渲染後的結果可以發現前綴多出了WebUserControl_
因此並非所有情況下
所有用戶端控件ID都會與Server端控件ID一致
因此建議不要直接用伺服器端的控件ID去指定變更屬性



在此我將.ascx文檔中指定要變更被景色為紅色的JS區塊程式 ID欄位
改為經HTML渲染後變異的結果即修正
WebUserControl1_TextBox1





這裡建議若要寫活的則可以改成
透過直接ASP封裝後的物件屬性ClientID去獲取對應渲染後的實際ID

經修改後的.ascx代碼區塊

1
2
3
4
5
6
7
8
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl1.ascx.cs" Inherits="WebUserControl1" %>
<script type="text/javascript">
    window.onload = function () {
        document.getElementById("<%=TextBox1.ClientID%>").style.backgroundColor = "red";
    }
</script>
<asp:TextBox ID="TextBox1" runat="server" Text="My UserControl"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="My UserControl" />




伺服器端控件 和 HTML靜態標籤差異性

1.visible屬性
這裡我們要針對可視屬性的隱藏深入分析
伺服器端控件 和 HTML靜態標籤差異

我們先建立一個
input標籤

此時我們修改HTML屬性
style="visibility:hidden"


此時我們確實看到被隱藏了 網頁原碼中實際HTML卻仍存在著


我們在用asp的server控件創建一個簡單輸入框
剛剛的HTML輸入框我們改回可見


查看網頁原碼


透過Server Control屬性visible調整成false之後

查看網頁原碼
就發現該行程式碼不見了

我們現在再回過頭
來嘗試看看邊框跟背景色的屬性調適
我們的示範.aspx檔(前端)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default1.aspx.cs" Inherits="Default1" %>

<%@ Register Src="~/WebUserControl1.ascx" TagPrefix="uc1" TagName="WebUserControl1" %>


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="Button" />
        <br />

        <uc1:WebUserControl1 runat="server" ID="WebUserControl1" />
        <br />

        <input type="text" value="html控件" name="txt" style="background-color:darkgoldenrod; border-bottom:double" />
        <asp:TextBox ID="TextBox2" runat="server" Text="伺服器控件之隱藏" BackColor="Yellow" BorderStyle="Double"></asp:TextBox>
    </div>
    </form>
    
</body>
</html>

透過HTML編寫時候我們主要是習慣在style中去做屬性的修改
透過ASP.NET server control時候則不用style
是直接有現成經過封裝後的物件屬性來去調用做調整

無論你在開發時用何種方式撰寫
到最後渲染至客戶端網頁後都會變成HTML靜態標籤對應的型態

微軟封裝的便利性更可以讓你直接在屬性側欄直接指定變更


2.css調用方式

接下來示範在Header中我們自定義一個css樣式後如何指定給
原HTML標籤跟ASP Server Control


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default1.aspx.cs" Inherits="Default1" %>

<%@ Register Src="~/WebUserControl1.ascx" TagPrefix="uc1" TagName="WebUserControl1" %>


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <style type="text/css">
        .text {
            background-color:yellowgreen;
            border: 1px red double;
        }
    </style>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="Button" />
        <br />

        <uc1:WebUserControl1 runat="server" ID="WebUserControl1" />
        <br />

        <input type="text" value="html控件css調用" name="txt" class="text" />
        <asp:TextBox ID="TextBox2" runat="server" Text="伺服器控件之css調用" CssClass="text"></asp:TextBox>
    </div>
    </form>
    
</body>
</html>

這是我們的CSS Style

在ASP控件別於HTML標籤是直接透過class=xxx指定
而是透過CssClass屬性指定


基本上最後渲染後結果都是一樣的HTML形式
最終客戶端網頁原碼結果(都是同樣的HTML格式)


3.Attributes
我們就先來個Button吧

在看ASP.NET 伺服器控件觸發方式之前
我們一樣用一個  type為submit的原始HTML來回顧按鈕觸發寫法
以前在HTML中我們是透過  onclick來做特定動作



這裡呈現是在用戶端發生的響應

伺服器端裏頭呢我們則是透過
OnClick屬性指定點擊觸發事件名稱

 你會發現自動在.cs檔案產生出來事件(是發生在伺服器端的事件)

要用伺服器端控件觸發執行客戶端事件則是要用
OnClientClick事件就能和HTML客戶端使用者交互達到一樣效果了

也可以透過Attributes.Add來改寫
把客戶端的事件當成一種隸屬在Server端物件的屬性作添加

最終也會動態被CLR給轉換生出用戶端HTML標籤格式
onclick屬性也被渲染天加到客戶端呈現了


那我們也可以嘗試去添加HTML input標籤中所沒有的屬性
比方我們加個apple 或是 banana都是可以的


最終也都會呈現到用戶端渲染後的網頁背後原碼中



伺服器端控件額外屬性

所有的伺服器端(服務端)控件不僅可以使用控件原本既有定義的屬性，
還可以使用額外的屬性，這些屬性包括控件沒有封裝的HTML屬性
(比方onmouseover,onclick....等browser頁面端事件)
ASP.NET會將其不識別的屬性原封不動渲染到用戶端
我們也可透過.cs後端程式碼去透過Attributes做添加額外屬性


這邊我們拿checkbox再來舉例


經CLR渲染後產生出來的HTML格式內容
就會變成input標籤 type為 checkbox的型態
後面有label標籤做文字顯示用途


這裡我們嘗試滑鼠滑移過去後就觸發跳窗的效果
先回顧HTML方式
效果
那在伺服器端我們用Attributes方式來加載該事件給用戶端網頁



也達成同樣效果
底層則是轉成HTML span 標籤包覆的產物


Web Form事件載入流程(IsPostBack觀念)

這裡我們可以透過Response.Write("你想寫的內容")
來做類似輸出至網頁上的功能利於執行流程觀察

當你做完按鈕點擊後會發現Page_load事件會一直重新在運行一次
所以輸出會接續著顯示

原因在於Web Form程式跟Server之間的互動一來一往
底層判斷是否為第一次頁面加載的屬性IsPostBack




Step1. 一開始頁面載入
IsPostBack 在第一次發送請求(Get Request時)會是false

Form頁面在最初你運行時會先做初始化加載
此時會發送一個Get請求給Server
此時的IsPostBack預設為False
Server接收到後進行處裡請求再回送到頁面端
接著就會將頁面相關物件銷毀

Step2.點擊按鈕  刪除2(Button2)跳警告窗並輸出文字
(此時發送的請求為Post請求
IsPostBack就會切為true 視為非第一次加載後的動作)

接著當你再次點擊Button要觸發顯示文字時
又是第二次請求一樣會再次運行Page_load頁面加載流程依此類推


因此你可以在一開始頁面加載時就去判斷是否為第一次頁面加載
只希望第一次時要執行頁面加載的文字輸出
而之後第N次不要執行到該區塊時

這樣就可以卻包頁面加載輸出文字該段
只會在第一次開頁面時運行






參考Link:
http://docs.embarcadero.com/products/rad_studio/radstudio2007/RS2007_helpupdates/HUpdate4/EN/html/devnet/aspnetov_xml.html

留言

張貼留言

這個網誌中的熱門文章

經得起原始碼資安弱點掃描的程式設計習慣培養(五)_Missing HSTS Header

-
圖片
  接續前幾篇系列 經得起原始碼資安弱點掃描的程式設計習慣培養(一)_OWASP Top 10(十大網站安全風險)_學習寫更安全程式碼的網站推薦 經得起原始碼資安弱點掃描的程式設計習慣培養(二)_8.Insecure Deserialization ：不安全的反序列化漏洞ASP.NET處理方式 經得起原始碼資安弱點掃描的程式設計習慣培養(三)_7.Cross Site Scripting(XSS)_Stored XSS_Reflected XSS All Clients 經得起原始碼資安弱點掃描的程式設計習慣培養(四)_1.Injection注入攻擊_SQL Injection)_order by 語句正確參數化套入 最近又遇到被若安掃描到高風險要修正的程式碼啦.... 一看這還真是搞不懂該怎麼修呢 HSTS(HTTP Strict Transport Security)  主要是一份國際標準規格 (RFC 6797) 的網際網路瀏覽安全機制， 用於宣告瀏覽器與伺服器之間通訊方式必須強制採用 TLS/SSL 加密通道。 只要從伺服器端送出一個 Strict-Transport-Security 標頭 (Header) 給瀏覽器，即可告知瀏覽器於未來的某段時間內一律使用 SSL 來和該網站連接 (設定可涵蓋所有子域名網站)， 一旦發生憑證失效情況，使用者將無法再瀏覽該網站，如此一來便可大幅減少中間人攻擊的問題發生。 再更白話一點 HSTS Header 就是負責將 http 強制轉為 https CheckMarx掃碼報告給的說明 ============================================================ 風險: 如果web config沒有設置HSTS表頭、"max-age"(有效期)不足一年， 或沒有設定"includeSubDomains"(包含所有子網域)，可能會使用戶容易遭受中間人攻擊。 發生原因: 許多使用者只要在瀏覽器的網址列輸入網域名稱(Domain Name)即可瀏覽網站， 並沒有輸入協定(Protocol)的名稱。 瀏覽器會自動假設使用者使用的是HTTP協定而不是有加密機制的HTTPS協定。 在第一次發出前往特定網站的請求時，攻擊者可以執行中間人攻擊並將用戶轉址到
閱讀完整內容

(2021年度)駕訓學科筆試準備題庫歸納分析_法規是非題

-
圖片
  若是出現 「必須」、「必需」、「...必...」、「應由」、「應先」、「應...」 則很高機率是圈 是非通常只要是如下字眼 「不必」+動詞 、「不需」「不須」、「可不」、「可以不」、「可立即」 有出現或符合的都選叉 (X)1.違規記點又不登記在駕照上，所以可以 不必理會 而任意違反交通規則。 (X)2.發生重大交通事故，為迅速恢復交通，清除現場，可 不必等待 肇事處理機關之指示，即可進行。 (X)3.道路駕駛練習，行車前 不必實施 車輛安全檢查，因為那是駕駛教練的工作。 (X)4.開車前， 不必檢查 機件安全，但在行駛中要隨時注意儀錶功能顯示，確保行車安全。 (X)5.煞車油若經常低於"MIN"線，只要添加即可， 不必到修理廠檢修 。 (X)6.冷卻系統只要副水箱在滿水位，主水箱 不必檢查 也不會有問題。 (X)7.引擎冷卻水內含有防凍液或防銹劑，可 不必更換 。 (X)8.儀錶板上的「燃油油量錶」之指針高度，已經降低至「E」點，橘色的「低油料警示燈」點亮時， 不必急著加油 ，到達目的地後再行補充燃油即可。 (X)9.有安全氣囊裝備的汽車， 不必繫 安全帶。 (X)10.煞車時有異音，是正常的情況， 不必檢修 。 (X)11.汽車定期檢驗 不必檢驗 車輛故障標誌，所以隨車不一定要帶車輛故障標誌。 (X)12.開車時 不必理會 義交之指揮，一切以號誌為主。 (X)13.汽車經過隧道，因隧道內燈光明亮視線良好，為省電可 不必開亮 頭燈。 (X)14.駕駛人只求技術優良，對遵守交通規則 不必太重視 。 (X)15.在開車前， 不必檢查 機件，以免耽誤行車時間。 (X)16.遇幼童專用車、校車、身心障礙者用特製車或教練車， 不必禮讓 。 (X)17.行車 不必攜帶 隨車工具。 (X)18.行車起駛前進， 不必顯示 方向燈。 (X)19.汽車通過鐵路平交道，前後兩車間， 不必保持 距離。 (X)20.夜間將車輛停放在無燈光設備及照明不清之道路時，亦 不必顯示 停車燈光或反光標識。 (X)21.在夜間或有霧靄、雨雪、風沙及晝晦時，把車輛停在路旁， 不必顯示 停車燈光或反光標識。 (X)22.汽車駕駛人，僅需具有優良駕駛技術， 不需 具備急救的常識和技能。 (X)23.汽車車身、引擎、底盤、電系等重要設備變更或調換時， 不需 向公路主管機關申請臨時檢驗。
閱讀完整內容

經得起原始碼資安弱點掃描的程式設計習慣培養(三)_7.Cross Site Scripting(XSS)_Stored XSS_Reflected XSS All Clients

-
圖片
  近期新加入的功能code剛好也被CheckMarx掃出高風險部分的程式碼漏洞 我也踏到這個Issue啦 Cross Site Scripting(XSS)  第一種.Stored XSS 高風險 CheckMarx掃碼報告給的說明[Stored XSS] ============================================================ 風險: 攻擊者可以利用合法存取應用程式提交資料到資料庫。 當另一個使用者隨後存取該資料，網頁可能會被改寫且惡意腳本可能會被啟動。 發生原因: 從資料庫中的資料建立網頁。資料直接嵌入至HTML的頁面，利用瀏覽器顯示。 資料可能源自於其他使用者的輸入。 如果資料包含HTML片段或Javascript，使用者無法分辨是否為預期的頁面。 該漏洞主因為未先對嵌入資料庫中的資料進行編碼(Encode) 來預防瀏覽器將其當為HTML的格式而非純文字。 如何避免: 1.驗證所有資料，無論其來源為何。驗證應基於白名單：僅接受預定結構的資訊，而不是拒絕不良的樣式(Patterns)。  應確認：  ● 資料型態  ● 大小  ● 範圍  ● 格式  ● 期望值  2. 驗證無法取代編碼. 輸出嵌入之前，不論其來源， 將所有動態資料進行編碼. 編碼方式應該是上下文相關的. 例如: ● HTML內容使用HTML的編碼方式  ● HTML編碼特性是將資料輸出到特性的值 ● JavaScript的編碼方式為伺服器產生的Javascript  3.考慮使用ESAPI的編碼庫，或它的內置功能。對於舊版的ASP.NET，請考慮使用AntiXSS.  4.在HTTP類型對應的表頭， 明確定義整個頁面的字元編碼.  5. 設置 httpOnly 標誌於會期資訊，以防止利用XSS來竊取資訊. ============================================================ 這裡報告描述是指我對傳進來字串參數直接拋給DAL處裡的類別執行查詢 這裡缺乏對輸入進來的字串參數做一些查檢判斷 也建議在帶入時對參數也做一些html encode處理 這裡用AntiXSS來Encode 第二種.Reflected XSS All Clients 高風險 CheckMarx掃碼報告給的說明[Reflecte
閱讀完整內容