C#-WebForm-简单控件
在HTML中称“元素”，添加了“runat=‘server’”后称控件，后台服务端可以控制
想要后台改变前端的控件，需要先让后台获取前端控件
常用的简单的表单元素（控件）
==================================================
1、label —— span
label 经过编译后，在HTML中为span
常用属性：
★Text：要显示的文字内容 —— <span>要显示的文字内容</span>
★CssClass：指向的Class属性
<asp:Label ID="Label1" runat="server" Text="" CssClass="aaa"></asp:Label>
网页展示：
HTML编码：
height：高度
width：宽度
enabled：控件是否启用，但对label无效
visible：控件是否可见，编译后无代码
编译前：
<asp:Label ID="Label1" runat="server" Text="" CssClass="aaa" Height="" Width="" BackColor="#FF99CC" BorderColor="#FF3300" BorderStyle="Solid" BorderWidth=""></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;"></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="" 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 > )
{
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 = ; i < ; i++)
{
Literal1.Text += "<span class='aaa'>" + i + "</span>";
}
}
}
打印多个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" />
客户端脚本执行优先级高，即先弹窗再执行其他操作
C#-WebForm-简单控件的更多相关文章
- WebForm简单控件，复合控件
简单控件: 1.Label 会被编译成span标签 属性: Text:文本内容 CssClass:CSS样式 Enlabled:是否可用 Visible:是否可见 __________________ ...
- webform简单控件
表单元素: 文本类: text password textarea hidden text,password,textarea实现控件:textbox textmode属性选择password或m ...
- WebForm 简单控件、复合控件
简单控件: Label:被编译成span 样式表里设置lable的高度: display:inline-block; Text --文本 ForeColor --字体颜色 Visible -- ...
- webform 简单控件
html中12个表单元素添加runat="server"后称为控件 Lable 编译之后是 <span></span> 属性:CssClass 编译成 c ...
- Webform（简单控件、复合控件）
一.简单控件: 1.label控件 <asp:Label ID="Label1" runat="server" Text="账 号:" ...
- WebForm 【简单控件】【表单元素】
一.HTML 表单元素复习 (1)文本类 文本框:<input type="text" name="" id="" value=&qu ...
- 【2017-05-18】WebForm的Repeater控件和一些简单控件
一.Repeater控件 1. <%@ %> - 这里面写一些声明和引用的 <% %> - 编写C#代码的 <%= %> - 往界面上输出一个变量的值 <% ...
- 【2017-05-18】WebForm的Repeater控件及简单控件
<%@ %> - 这里面写一些声明和引用的 <% %> - 编写C#代码的 <%= %> - 往界面上输出一个变量的值 <%# Eval("属性名 ...
- 2013 duilib入门简明教程 -- 简单控件介绍 (12)
前面的教程应该让大家对duilib的整体有所映像了,下面就来介绍下duilib具体控件的使用. 由于官方没有提供默认的控件样式,所以我就尽量使用win7或者XP自带的按钮样式了,虽然界 ...
- WebForm 常用控件
一.简单控件 1.Label(作用:显示文字) Web中: <asp:Label ID="Label1" runat="server" Text=&quo ...
随机推荐
- struts2类型转换
1. Struts2中的类型转换 我们知道通过HTTP提交到后台的数据,都是字符串的形式,而我们需要的数据类型当然不只字符串类型一种.所以,我们需要类型转换! 在Struts2中,类型转换的概念除了用 ...
- Scrapy开发指南
一.Scrapy简介 Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 可以应用在包括数据挖掘,信息处理或存储历史数据等一系列的程序中. Scrapy基于事件驱动网络框架 Twis ...
- [连载]《C#通讯（串口和网络）框架的设计与实现》- 7.外部接口的设计
目 录 第七章 外部接口的设计... 2 7.1 插件接口... 2 7.2 图形显示接口... 3 7.3 ...
- HTTP协议下保证密码不被获取更健壮方式
说到在http协议下用户登录如何保证密码安全这个问题: 小白可能第一想法就是,用户在登录页面输入密码进行登录时,前台页面对用户输入的密码进行加密,然后把加密后的密码作为http请求参数通过网络发 ...
- JSON字符串和对象 的转换
一 通过eval() 函数可以将JSON字符串转化为对象 var obj = eval('(' + str + ')'); 或者 var obj = str.parseJSON(); //由JSON ...
- 【IOS开发笔记02】学生管理系统
端到端的机会 虽然现在身处大公司,但是因为是内部创业团队,产品.native.前端.服务器端全部坐在一起开发,大家很容易做零距离交流,也因为最近内部有一个前端要转岗过来,于是手里的前端任务好像可以抛一 ...
- node-sass报错解决方法
在Vue.js中,每一个vue文件都是一个组件,在.vue文件中可以将模板,脚本,样式写在一起,便于组织整个组件.在使用template,script时,编写css样式时,都进行的特别顺利,唯独当我想 ...
- Android中使用ExpandableListView实现好友分组
一个视图显示垂直滚动两级列表中的条目.这不同于列表视图,允许两个层次,类似于QQ的好友分组.要实现这个效果的整体思路为: 1.要给ExpandableListView 设置适配器,那么必须先设置数据源 ...
- Windows Server 2003安装方法
1. 设置BIOS,从光驱引导启动.光盘放入光驱,自动读盘,选择第一项“安装Windows Server 2003,Enterprise Bdition”: 2. 弹出加载安装文件界面. 3. 出现安 ...
- React Native 之 Touchable 介绍与使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...