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

留言

張貼留言

這個網誌中的熱門文章

何謂淨重(Net Weight)、皮重(Tare Weight)與毛重(Gross Weight)

-
圖片
當談到貨物的重量時，往往會分成所謂的淨重(Net Weight)與毛重(Gross Weight)。 會有以下公式關係存在 淨重=毛重-皮重(包裝物的重量) 毛重=淨重+皮重 淨重( Net Weight 縮寫為N.W.) 指物品本身的重量，不包括容器或包裝材料的重量。 凈重是國際貿易中最常見的計重辦法。 例如，如果運輸原材料，原材料的重量就是所運輸貨物的淨重。包裝原材料的容器或包裝不計入淨重。同樣地，當我們考慮一罐豆子時，罐子內所含物品的重量就算作淨重。因此，淨重將包括豆子、罐頭里的任何液體，以及保存豆子所含的物品。 大多數 以重量為計價的貨物買賣 ，採用此計價方法。 若合同中並未明確規範以何種方式計量和計價時，按慣例以凈重計價。 毛重( Gross Weight 縮寫G.W.) 貨物連同它的包裝的重量，是你托運的所有物品的總重量。 皮重(Tare Weight) 指商品外包裝材料的重量(即運輸包裝的重量)，不包括內包裝材料和襯墊物的重量。 比方一個空的貨櫃、容器、或任何包裝材料的重量。 Net Net Weight純淨重 (指從Net Weight中扣除內包裝後的重量) 進出口商品為了因應運輸及消費需求, 一般都有內包裝與外包裝。 一般在買賣合同與信用狀中,通常只要求於裝箱單上註明Gross Weight和Net Weight即可, 但有些L/C 要求 Net Net Weight,大多是海關徵收從量稅時的依據 運輸重量對於航運業或者航空運輸等各自都通用這些術語 為何特別在意重量? 主要就在於會影響像是傳輸安全乘載限制。 就運輸層面(不同方式的運輸) 航空運輸：對機長而言，毛重包括皮重、產品淨重以及飛機、燃料、乘客和機組人員的重量。 公路/鐵路運輸:對於火車車長而言，毛重包括產品淨重、皮重和運輸車輛的重量。 水路航運運輸：對船長而言，毛重就是淨重和皮重之和。 就公司ERP成本角度 成本一般都會採用 "淨重" 主要是因為若用毛重，可能會有輔材不可控因素存在 比方一個 5cm 固定塑膠件，今天用一個 10cm 紙箱測重，明天用一個 100cm 紙箱測重，那可能就容易導致ERP資料比較會失真。 就物流層面來探討 通常還會有一名詞即所謂「實際重量」(Actual Weight) 根據稱重(過磅)所得到的重量，實際重量分為實際毛重(Gross Weig
閱讀完整內容

Architecture(架構) 和 Framework(框架) 有何不同?_軟體設計前的事前規劃的藍圖概念

-
圖片
一個應用程式(軟體) 不管是  互動拍照 也好、 投影也好、車牌偵測... 舞台演唱會後方電視牆的互動應用程序、 粒子特效、3D或2D遊戲  等等 開發者通常都需要在一開始做規劃 ㄟ  假設我今天要寫 跟影像有關 可能需要偵測、可能需要提取前景、可能需要偵測圓形 之類的 我有  emgucv 、AForge.Net、 opencv 等等可以用 但是 假設我今天要做的應用程序是需要有視窗介面的~~ emgucv 跟 C# windows form 媒合性 就很高 而且直接在 visual studio 做開發 opencv 我可能還需要依賴 Qt 之類等等  framework 假設我今天是要寫一個 演唱會電視牆互動粒子特效 可能就會挑   openframeworks  、 processing 、kinect 來寫互動 Achitecture  --->全稱 :  Software Architecture   軟體架構 Achitecture   由好多 framework 組成 軟體架構（Software Architecture）是一種軟體在開發前的設計藍圖， 用來告訴軟體的結構，功能，介面，用法，與其他系統的構連以及資料交換等等規範， 但它並沒有叫你要用什麼方式實作， 因此軟體架構通常會產生文件，圖樣，原型以及規格等， 就是沒有可用的程式碼，因為那不是軟體架構應該有的東西， 就像蓋房子時是給你藍圖，而不是一幢蓋好的房子。 軟體框架（Framework):是一個已經成形的方法，而且有程式碼實體 （例如鋼構工法也是要有鋼材才能做），並且會告訴你要如何使用它 （即 Framework Documentation，MSDN Library 即為一最佳例子）
閱讀完整內容

(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.汽車車身、引擎、底盤、電系等重要設備變更或調換時， 不需 向公路主管機關申請臨時檢驗。
閱讀完整內容