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#代码进行操作，会渲染到客户端。 |
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； //未单独封装的标签（比如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 |
|
|
常用属性： |
||
|
.TextBox: |
Mode属性变换样式 |
|
|
常用属性： 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个常见表单元素 |
|
|
文本类： |
||
参考：
https://www.cnblogs.com/huangf714/p/5876228.html