C#-WebForm-简单控件

在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>

网页展示： C#-WebForm-简单控件　　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>

C#-WebForm-简单控件　

编译后：　

<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，则会出现代码冗余，影响数据传输

C#-WebForm-简单控件

使用<style ></style>

C#-WebForm-简单控件

减少代码，减少流量，加快传输

==================================================

2、★★★★★Lateral - 向前端返回代码

Lateral 编译后会把其 text 原封不动的展示出来

常用属性：

　　text：可以是文字，也可以是要执行的代码（李献策lxc）

比如：

<asp:Literal ID="Literal1" runat="server" Text="2016-12-29"></asp:Literal>

网页展示 C#-WebForm-简单控件　　编译后

比如：

<asp:Literal ID="Literal1" runat="server" Text="<script>alert('2016年12月29日')</script>"></asp:Literal>

网页展示 C#-WebForm-简单控件　　编译后

练习1：

C#-WebForm-简单控件

点击按钮，弹出提示，提示文本框是否为空

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

前端代码