在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" οnclick="alert("haha");" id="Button1" />
客户端脚本执行优先级高，即先弹窗再执行其他操作
