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檔案內容

<%@ 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

<%@ 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代碼區塊

<%@ 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檔(前端)

<%@ 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

<%@ 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次不要執行到該區塊時

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