WebForm 常用控件
一、简单控件
1、Label(作用:显示文字)
Web中:
<asp:Label ID="Label1" runat="server" Text="Label" BorderColor="Black" BorderStyle="Solid" BorderWidth="5px"></asp:Label>
编译完成后的元素时span(html)
<span id="Label1" style="display:inline-block;border-color:Black;border-width:5px;border-style:Solid;">Label</span>
属性:①BackColor:控件背景色 ;
②BorderColor:控件边框颜色;
③BorderStyle:控件边框样式;
④BorderWidth:控件边框宽度
2、Literal(作用:显示文字)
Web中:
<asp:Literal ID="Literal1" runat="server" Text ="编译后不会形成什么元素"></asp:Literal>
编译后不会形成什么元素(一般用来后台输出js代码)
</div>
编译后不会形成什么元素
3、TextBox(文字输入框)
属性:①TextMode:文本矿的行为模式,有以下几种模式:
★默认SingleLine:单行。
Web中:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
编译后:
<input name="TextBox1" type="text" id="TextBox1" />
★Password:密码框
Web中:
<asp:TextBox ID="TextBox1" runat="server" TextMode="Password"></asp:TextBox>
编译后:
<input name="TextBox1" type="password" id="TextBox1" />
★Multiline:文本域
Web中:
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"></asp:TextBox>
编译后textarea:
<textarea name="TextBox1" rows="2" cols="20" id="TextBox1">
②warp:换行(true:换行;false:不换行)
③Enabled:控件启用状态
④Readonly:是否可以更改控件中的文本
⑤Maxlength:限制最长长度;比如:密码限制多少位,就可以更改此属性
4、按钮类
(1)Button:
Web中:
<asp:Button ID="Button1" runat="server" Text="Button" />
编译后submit:
<input type="submit" name="Button1" value="Button" id="Button1" />
属性:Onclintclick:比如:在onclintclick后面加上alert("nihao");
编译后是:
<input type="submit" name="Button1" value="Button" onclick="alert("nihao");" id="Button1" />
注:
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick='if(confirm("是否要提交?")){return false;}' />
Confirm():
confirm() 方法用于显示一个带有指定消息和OK 及取消按钮的对话框。
如果用户点击确定按钮,则confirm() 返回true。如果点击取消按钮,则confirm() 返回false。
在用户点击确定按钮或取消按钮把对话框关闭之前,它将阻止用户对浏览器的所有输入。在调用confirm() 时,将暂停对JavaScript 代码的执行,在用户作出响应之前,不会执行下一条语句。
下面我们通过这两个小例子,来了解一下它的使用方法吧:
<head>
<title>confrim 的使用方法</title>
<script type="text/javascript">
function clear1()
{
if(confirm("确定要清空数据吗?"))
{
document.main.text1.value="";
}
}
</script>
</head>
<boty>
<form name="main">
<input type="text" name="text1"/>
<input type="button" name="submit" value="数据清空" onclick="return clear1()"/>
</form>
</body>
confrim 的使用方法
(2)ImageButton:图片按钮
属性同Button类似,多以个ImageUrl属性,此属性用于存放图片地址。
(3)LinkButton:被编辑成超链接模样的按钮,
注:①HyperLink:超链接控件(不经常用此方式见超链接)
②边框注意:边框颜色——边框样式——边框粗细
二、复合控件
首先建两个类,下面的复合控件将会用到!
实体类:
/// <summary>
/// Nation 的摘要说明
/// </summary>
public class Nation
{
public Nation()
{
//
// TODO: 在此处添加构造函数逻辑
//
} private string _NationCode; /// <summary>
/// 民族编号
/// </summary>
public string NationCode
{
get { return _NationCode; }
set { _NationCode = value; }
}
private string _NationName; /// <summary>
/// 民族名称
/// </summary>
public string NationName
{
get { return _NationName; }
set { _NationName = value; }
} }
数据访问类:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.SqlClient; /// <summary>
/// NationData 的摘要说明
/// </summary>
public class NationDA
{
SqlConnection conn = null;
SqlCommand cmd = null; public NationData()
{
conn = new SqlConnection("server=.;database=Data0617;user=sa;pwd=123");
cmd = conn.CreateCommand();
} /// <summary>
/// 返回全部Nation表数据集合
/// </summary>
/// <returns></returns>
public List<Nation> Select()
{
List<Nation> list = new List<Nation>(); cmd.CommandText = "select *from Nation";
conn.Open();
SqlDataReader dr = cmd.ExecuteReader();
if (dr.HasRows)
{
while (dr.Read())
{
Nation n = new Nation();
n.NationCode = dr["NationCode"].ToString();
n.NationName = dr["NationName"].ToString(); list.Add(n);
}
}
conn.Close();
return list;
}
(一)DropDownList:下拉列表框
Web显示:
<asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>
编译后select:
<select name="DropDownList1" id="DropDownList1"> </select>
1、给DropDownList写入数据(两种方法)——放在Page_Load中
法一:与winform中给下拉表框填数据类似(DataSource)
protected void Page_Load(object sender, EventArgs e)
{
DropDownList1.DataSource = new NationData().Select();//数据源指向
DropDownList1.DataTextField = "NationName";//显示字段绑定
DropDownList1.DataValueField = "NationCode";//隐藏字段绑定
DropDownList1.DataBind(); }
法二:Foreach遍历,同时加上默认选中
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
List<Nation> Nlist = new NationData().Select(); foreach (Nation n in Nlist)
{
ListItem li = new ListItem(n.NationName, n.NationCode);
if (li.Value == "N003")
{
li.Selected = true;
}
DropDownList1 . Items.Add(li);
}
} }
编译后显示:
<select name="DropDownList1" id="DropDownList1">
<option value="N001">汉族</option>
<option value="N002">满族</option>
<option selected="selected" value="N003">藏族</option>
<option value="N004">彝族</option> </select>
注:加一个Button和Label,点击按钮时,将取到的value或text显示在label上。下面用到
2、取DropDownList的Value或者text(只能取一条数据的value或text)
void Button1_Click(object sender, EventArgs e)
{
Label1.Text = DropDownList1.SelectedItem.Value;
//Label1.Text = DropDownList1.SelectedItem.Text;
}
3、取多条数据(ListBox控件)
ListBox控件(此控件可以取一条或多条数据)——编译后也是select(下拉列表框)
属性:SelectionMode(列的选择模式)——single:单行,只单选;Multiple:多行,可多选。
ListBox绑定数据的方法同DropDownList一样。
ListBox取数据的方法:
void Button1_Click(object sender, EventArgs e)
{
string end = ""; foreach (ListItem li in ListBox1.Items)
{
if (li.Selected)
{
end += li.Text + " - " + li.Value + ",";
}
} Label1.Text = end;
}
(二)CheckBoxList:多选列表
<asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatLayout="UnorderedList"></asp:CheckBoxList>
属性:①RepeatColumns:一行最多显示多少个数据
②RepeatDirection——Vetical:垂直显示 ; Horizontal:水平显示
④RepeatLayout:Table → 用table布局
Flow → 用span布局
UnorderedList → 无序列表
OrderedList → 有序列表
用法同DropDownList和ListBox!
(三)RadioButtonList
<asp:RadioButtonList ID="RadioButtonList1" runat="server"></asp:RadioButtonList>
属性同CheckBoxList类似,用法同DropDownList和ListBox!
★控件中,name用于服务端 , id用于客户端
WebForm 常用控件的更多相关文章
- android内部培训视频_第三节(3)_常用控件(ViewPager、日期时间相关、ListView)
第三节(2):常用控件之ViewPager.日期时间相关.ListView 一.ViewPager 实例:结合PagerAdapter滑动切换图片 二.日期时间相关:AnalogClock\Dig ...
- [WinForm]WinForm跨线程UI操作常用控件类大全
前言 在C#开发的WinForm窗体程序开发的时候,经常会使用多线程处理一些比较耗时之类的操作.不过会有一个问题:就是涉及到跨线程操作UI元素. 相信才开始接触的人一定会遇上这个问题. 为了解决这个问 ...
- android内部培训视频_第三节 常用控件(Button,TextView,EditText,AutocompleteTextView)
第三节:常用控件 一.Button 需要掌握的属性: 1.可切换的背景 2.9.png使用 3.按钮点击事件 1) onClick 3) 匿名类 4) 公共类 二.TextView 常用属性 1.a ...
- Xamarin Studio在Mac环境下的配置和Xamarin.iOS常用控件的示例
看过好多帖子都是Win环境装XS,Mac只是个模拟器,讲解在Mac环境下如何配置Xamarin Studio很少,也是一点点找资料,东拼西凑才把Xamarin Studio装在Mac上跑起来,如下: ...
- MFC编程入门之二十二(常用控件:按钮控件Button、Radio Button和Check Box)
本节继续讲解常用控件--按钮控件的使用. 按钮控件简介 按钮控件包括命令按钮(Button).单选按钮(Radio Button)和复选框(Check Box)等.命令按钮就是我们前面多次提到的侠义的 ...
- MFC编程入门之二十(常用控件:静态文本框)
上一节讲了颜色对话框之后,关于对话框的使用和各种通用对话框的介绍就到此为止了.从本节开始将讲解各种常用控件的用法.常用控件主要包括:静态文本框.编辑框.单选按钮.复选框.分组框.列表框.组合框.图片控 ...
- Android中常用控件及属性
在之前的博客为大家带来了很多关于Android和jsp的介绍,本篇将为大家带来,关于Andriod中常用控件及属性的使用方法,目的方便大家遗忘时,及时复习参考.好了废话不多讲,现在开始我们本篇内容的介 ...
- DevExpress winform XtraEditor常用控件
最近在公司里面开始使用DevExpress winform的第三方控件进行开发和维护,这里整理一些常用控件的资料以便于后续查看 ComboBoxEdit 这个控件和winform自带的控件差不多,使用 ...
- 五、Android学习第四天补充——Android的常用控件(转)
(转自:http://wenku.baidu.com/view/af39b3164431b90d6c85c72f.html) 五.Android学习第四天补充——Android的常用控件 熟悉常用的A ...
随机推荐
- 浏览器-04 WebKit 渲染2
渲染主循环(main loop)和requestAnimationFrame requestAnimationFrame 使用requestAnimationFrame而非setTimeout/set ...
- 如何在Ubuntu 14.04服务器上自动化部署Spring Boot的应用
https://segmentfault.com/a/1190000003944843
- ZeroMQ接口函数之 :zmq_pgm – ØMQ 使用PGM 进行可靠的多路传输
ZeroMQ API 目录 :http://www.cnblogs.com/fengbohello/p/4230135.html ——————————————————————————————————— ...
- .NET基础面试题整理
1.什么是.NET?什么是CLI?什么是CLR?IL是什么? (1).net用于代码编译和执行的集成托管环境,换句话,它管理应用程序运行的方方面面,包括首次运行的编译,为程序分配内存存储数据和指令 ...
- 关于div的滚动条滚动到底部,内容显示不全的问题。(已解决)
今天我做了一个带有滚动条,底部有两个按钮的div. 当我拖动滚动条到底部, 按钮没有显示出来. 我看了看我的样式设置,是这样的: /* 内容样式 */ #contentPartDiv{ posit ...
- 对拍老是忘记的看这里:bat代码
需要写三个程序,makedata.exe 产生测试数据, program1.exe 是你要检测的程序,program2.exe 往往是一个正确但效率不高(暴力的居多)的程序. 代码很简单,稍作解释:l ...
- grpc例子
grpc是google在github于2015年开源的一款RPC框架,虽然protobuf很早google就开源了,但是google一直没推出正式的开源框架,导致github上基于protobuf的r ...
- 关于web.config中<customErrors>节点说明
<customErrors>节点用于定义一些自定义错误信息的信息.此节点有Mode和defaultRedirect两个属性,其中defaultRedirect属性是一个可选属性,表示应用程 ...
- Log4Net
注意事项 <!-- The file log4Net.config is copied into bin/Debug /release by compiler 添加如下内容到 assemblyi ...
- 阿里云服务器Linux CentOS安装配置(四)yum安装tomcat
阿里云服务器Linux CentOS安装配置(四)yum安装tomcat 1.yum -y install tomcat 执行命令后,会帮你把jdk也安装好 2.tomcat安装目录:/var/li ...