在HTML中稱“元素”，添加了“runat=‘server’”后稱控件，后台服務端可以控制
想要后台改變前端的控件，需要先讓后台獲取前端控件
常用的簡單的表單元素（控件）
==================================================
1、label —— span
label 經過編譯后，在HTML中為span
常用屬性：
★Text：要顯示的文字內容 —— <span>要顯示的文字內容</span>
★CssClass：指向的Class屬性
<asp:Label ID="Label1" runat="server" Text="1234" CssClass="aaa"></asp:Label>
網頁展示：
HTML編碼：
height：高度
width：寬度
enabled：控件是否啟用，但對label無效
visible：控件是否可見，編譯后無代碼
編譯前：
<asp:Label ID="Label1" runat="server" Text="1234" CssClass="aaa" Height="100" Width="100" BackColor="#FF99CC" BorderColor="#FF3300" BorderStyle="Solid" BorderWidth="5"></asp:Label>
編譯后：
<span id="Label1" class="aaa" style="display:inline-block;background-color:#FF99CC;border-color:#FF3300;border-width:5px;border-style:Solid;height:100px;width:100px;">1234</span>
如果有多個相同的label，則會出現代碼冗余，影響數據傳輸
使用<style ></style>
減少代碼，減少流量，加快傳輸
==================================================
2、★★★★★Lateral - 向前端返回代碼
Lateral 編譯后會把其 text 原封不動的展示出來
常用屬性：
text：可以是文字，也可以是要執行的代碼（李獻策lxc）
比如：
<asp:Literal ID="Literal1" runat="server" Text="2016-12-29"></asp:Literal>
網頁展示
編譯后
比如：
<asp:Literal ID="Literal1" runat="server" Text="<script>alert('2016年12月29日')</script>"></asp:Literal>
網頁展示
編譯后
練習1：
點擊按鈕，彈出提示，提示文本框是否為空
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> .aaa { display:inline-block;background-color:#FF99CC;border-color:#FF3300;border-width:5px;border-style:Solid;height:100px;width:100px; } </style> </head> <body> <form id="form1" runat="server"> <div> <%-- <asp:Label ID="Label1" runat="server" Text="1234" CssClass="aaa"></asp:Label> --%> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" Text="Button" /> <asp:Literal ID="Literal1" runat="server" ></asp:Literal> </div> </form> </body> </html>
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Button1.Click += Button1_Click; } //按鈕點擊事件 void Button1_Click(object sender, EventArgs e) { if (TextBox1.Text.Length > 0) { Literal1.Text = "<script>alert('內容不為空！');</script>"; } else { Literal1.Text = "<script>alert('空！');</script>"; } } }
練習2：
public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Button1.Click += Button1_Click; } //按鈕點擊事件 void Button1_Click(object sender, EventArgs e) { for (int i = 0; i < 20; i++) { Literal1.Text += "<span class='aaa'>" + i + "</span>"; } } }
頁面展示
編譯代碼
==============================================================
3、textbox - text、password、textarea
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
屬性：
★★★TextMode - text模式
1、默認 SingleLine - 單行文本框，編譯后為 type="text"
2、Password - 密碼框，編譯后為 type="password"
3、MultiLine - 文字域，編譯后為 <textarea></textarea>
在設計界面中 textmode 屬性有多個，只用前三個
maxlength:最大長度，在文本域 <textarea></textarea> 中不起作用
readonly：只讀屬性（李獻策lxc）
==============================================================
4、hiddenfield - hidden 隱藏域
<asp:HiddenField ID="HiddenField1" runat="server" />
<input type="hidden" name="HiddenField1" id="HiddenField1" />
==============================================================
5、button - submit 提交
imagebutton - image 提交圖片
linkbutton - 超鏈接模樣的按鈕，僅控件如此
button、reset - 沒有控件對應
編譯前
<asp:Button ID="Button1" runat="server" Text="Button" /> <asp:ImageButton ID="ImageButton1" runat="server" /> <asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
編譯后
<input type="submit" name="Button1" value="Button" id="Button1" /> <input type="image" name="ImageButton1" id="ImageButton1" src="" />
<a id="LinkButton1" href="javascript:__doPostBack('LinkButton1','')">LinkButton</a>
button屬性：
★★★OnClientClick - 在客戶端OnClick上執行的客戶端腳本
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick='alert("haha")' />
<input type="submit" name="Button1" value="Button" onclick="alert("haha");" id="Button1" />
客戶端腳本執行優先級高，即先彈窗再執行其他操作