C#进阶之路——7.ASP.NET常用控件

C#进阶之路——7.ASP.NET常用控件

基础：

ASP.Net控件在“工具箱”中可分为:

}  标准控件

}  数据控件

}  验证控件

}  导航控件

}  登录控件

}  WebParts控件

}  AJAX Extensions控件

}  报表控件

}  HTML控件(客户端控件)

 

ASP.Net 控件应用类型

HTML控件

ASP.Net把HTML控件当成普通字符串渲染到浏览器端，不去检查正确性、无法在服务器端进行处理。

<input111 type="text" name="name" value=" " />

//自己写的错误的HTML控件不会在浏览器显示，也不会报错。

 

//客户端：

<input type="text" name="name" value=" " id="text1"/>

//服务器端：

protected void Page_Load(object sender, EventArgs e)

{

        text1.Text = "abc";  //报错，名称"text1"不存在

}

ASP.Net封装的服务端控件

经过ASP.Net高度封装的控件，使用简单，运行在服务器端，可以在服务端使用C#代码进行操作，会渲染到客户端为HTML控件。

 
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

在浏览器端渲染为下面这句：

<input name="TextBox1" type="text" id="TextBox1" />

runat="server"的HTML控件

 
在HTML控件的基础上添加 runat="server"，运行在服务器端，可以服务器端使用C#代码进行操作，会渲染到客户端。
不像ASP.Net服务端控件那样高度封装，暴露的属性大部分是普通HTML属性。
和ASP.Net服务端控件相比的好处是：
当需要服务器端要对控件进行操作的时候，
如果控件没有被ASP.Net服务端控件封装的时候，用runat="server"的HTML控件很方便，
runat="server"的HTML控件也会对虚拟路径、id -> ClientID 进行处理，所以在使用虚拟路径、UserControl中也可能会用到。
 
protected void Page_Load(object sender, EventArgs e)
{
     //ASP.Net服务器端控件高度封装，设置样式
     TextBox1.BackColor = Color.Red;   //设置背景颜色
     TextBox1.BorderStyle = BorderStyle.Dotted; //设置边框
 
     //runat="server"的HTML控件没有封装，设置样式方式不统一
     //Text1为文本框id，td1为表格的单元格id
     Text1.Value = "aaa";  //设置文本框内的值
     td1.Align = "center";
     td1.BgColor = "red";
     td1.Width = "50%";    
}
----------------------------------
//Text1能按原始的方式设置样式
<input type="text" style="border:dotted;" runat="server" id="Text1"/>
 
<a> -> HtmlAnchor；<form> -> HtmlForm；head -> HtmlHead；
input -> HtmlInputButton、HtmlInputCheckBox、HtmlInputText等；
meta -> HtmlMeta；table -> HtmlTable；tr -> HtmlTableRow；
td -> HtmlTableCell；title -> HtmlTitle。
//未单独封装的标签（比如div）对应类型为HtmlGenericControl。
//使用Attributes属性操作未封装的属性。

注意：在JS脚本中取第一种和第三种服务器端控件的ID方法：

document.getElementById("<%=Button1.ClientID %>");

document.getElementById("<%=TextBox1.ClientID %>");

 

封装的服务器控件

由System.Web.UI.WebControls派生

必须在<form > 与</form>之间

服务器控件两个重要的属性：

runat=“server”

ID控件唯一的名字

Web服务器控件有两种类型：

l      内部控件：内部控件从功能上可分为：文本输入控件、控制权转移控件、选择控件和容器控件。

l      其他控件：用于某些特定用途的专用控件。

添加服务器控件

1、在“设计”视图中用可视化方式添加；

2、在aspx页面用HTML语句添加：

<asp:控件类型名称 ID="控件标识名" runat="server" 其他属性 />

或

<asp:控件类型名称 ID="控件标识名" runat="server" 其他属性><asp:/控件类型名称>

添加服务器控件的事件

//ASP.NET使用事件驱动的模型，某对象的程序代码只在特定事件发生时执行

//常用事件如：页面加载Page_Load、按钮点击Button_Click

//创建方式：点击按钮

//Aspx文件中

protected void Button1_Click(object sender, EventArgs e)

{

}

//Aspx.cs文件中

<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />

 

服务器控件的基本属性

//添加到页面上的服务器控件都显示为默认的样式

//要改变页面上控件的外观,一种方法是更改该控件的属性,另一种方法是使用层叠样式表改变控件的样式。

 

常见HTML控件：

布局：

div，table，ul，li

表单：

form，label，textbox，input，

文件上传：

fileupload

命令：

Button，LinkButton

 

asp.net常用标准控件：

.Label：

被编译成span

常用属性：
　　Text--显示的文本
　　ForeColor--文本颜色
　　Visible--隐藏
　　CssClass--css中的class，类

.TextBox:

Mode属性变换样式

常用属性：
　　TextMode--SingleLine属性--单行
　　Password属性--只能输入密码框
　　MultiLine属性--显示下拉列表;多行
　　Color--拾色器文本框
　　Number--右侧上下箭头加减数字，比如淘宝买东西选择件数。
　　Search--右侧带关闭，点击可清空文本内容显示记录过的下拉内容
　　Time-- “--：--”，限制时间格式
　　Week--“----年第--周”，限制年周
　　Date-- 年月日格式
　　Datetime --暂时没研究出来
　　DateTimeLocal--日期加时间
　　Month--“----年--月”格式
　　Range--可以当亮度条用
　　MaxLenght--文本框中最多允许的字符数

　　ReadOnly--是否能改变文本框字体

　　Rows--多行文本框中的行数

　　Warp--指示文本框中的内容是否换行

HyperLink：

超链接文本，被编译成<a href>

常用属性：

　　ImageUrl--显示此链接图像的URL

　　NavigateUrl--指向的URL

　　Target URL--URL的目标框架，_blank表示新窗口

　　Text：链接显示的文本

Button

按钮，被编译成<input type="button"/>或其他类型

LinkButton：

带超链接的按钮，实现具有超链接样式的按钮，

重要属性：

　　Clink--单击时发生的服务器事件

　　OnClientClick--单击时的客户端事件

　　postbackUrl--单击时从当前页发送到网页的URL，默认空即本页

　　Text--按钮上的文本

ImageButton：

图片按钮，被编译成<input type="image" src="" />

重要属性：

　　AlternateText--图像不可用时空间中显示的替代文本

　　ImageUrl--获取图像位置

RadioButton：

点选按钮，被编译成<input type="radio" />

重要属性：

　　Checked--布尔值，规定是否选定单选按钮

　　AutoPostBack--布尔值，在Checked属性被改变后是否立即传回表单，默认false

　　GroupName--该单选按钮所属控件组的名称（一组即互斥）

CheckBox：

复选框控件，被编译成<input type="checkbox" />

没有GroupName，只能用来被复选的。

重要属性：

　　Text--出现在控件旁边的文本

　　Checked--布尔值，规定是否选定单选按钮

　　AutoPostBack--布尔值，在Checked属性被改变后是否立即传回表单，默认false

　　GroupName--该单选按钮所属控件组的名称（一组即互斥）

RadioButtonList：

以列表方式呈现的选项

CheckBoxList：

复选框列表

重要属性：

　　DataSourse--填充该列表列表项的数据源

　　Items--获得列表中控件的项目集合

　　RepeatColumns--控件中显示的列数

　　RepeatDirection--指示该控件是垂直显示还是水平显示

ListBox：

列表框，在一个滚动窗口中垂直显示一系列项目列表，与DropDownList的区别是用户无需操作就可以看到所有选项。

CheckedListBox 

从列表中选择，示一个可滚动的项列表，每项旁边都有一个复选框。

 

DropDownList：

下拉框

重要属性：

　　DataMember--要绑定的表的名称

　　DataSourse--填充该列表列表项的数据源

　　DataSourseID--提供数据源组件的ID

　　DataTextField--提供列表的文本的数据源字段名称

　　DataValueField--提供一个列表项的数据源字段的名称

　　Items--列表控件中的项目集合

　　SelectedIndex--获得或设置列表中被选项的索引

　　SelectedItem--获得列表中的被选项

　　SelectedValue--获得列表中被选项的值

　　SelectedIndexChanged--当列表控件选择项发生变化时触发

.Imagle：

图像

重要属性：

　　AlternateText--为图像提供替代文本

　　DescriptionUrl--提供指向包含该图像详细描述的页面的连接

　　ImageUrl--指定图片URL

Table：

表格

 

form

表单，12个常见表单元素

文本类：
<input type="text" /> - 文本框
<input type="password" /> - 密码框
<textarea></textarea> - 文本域
<input type="hidden" /> - 隐藏域

按钮类：
<input type="button" value="按钮" /> -按钮
<input type="submit" value="提交" /> -提交按钮，刷新
<input type="reset" value="重置" /> -重置按钮
<input type="image" src="" /> -图片按钮

选择类：
<input type="radio" /> -单选
<input type="checkbox" /> -多选

<select> -下拉列表
<option></option> -列表内容
</select>

<input type="file" /> -提示警告
     


参考：

https://www.cnblogs.com/huangf714/p/5876228.html

https://www.cnblogs.com/rxhuiu/p/9177480.html

https://www.cnblogs.com/Aaxuan/p/6081157.html

posted @ 2019-09-08 14:27  PaulTsao  阅读(871)  评论(0)  编辑  收藏  举报