ASP.NET控件集合_.net 控件库

前言

ASP.NET的WebForm框架是基于控件和事件结合实现的Web网页，在使用时常常不知其控件和HTML标签的不同，此文章主要来介绍ASP.NET控件和HTML控件的对比，以及WebForm框架中常用的控件，后续持续更新…

一、控件分类

1.HTML控件

纯正的HTML标签

2.HTML服务器控件

在HTML标签中添加一个runat="server"的属性

3.ASP.NET服务器控件

ASP.NET中提供的类似于Winform的控件

4.用户控件和自定义控件

二、HTML控件和ASP.NET服务器控件

1.HTML控件

（1） 运行在客户端
（2）没有回传，不能用ViewState维持状态
（3）浏览器完成事件处理需要使用(JavaScript)
（4）如果需要访问后台C#，现在典型就是使用JQuery

2.ASP.NET服务器控件

（1） 运行在服务器端
（2）能回传，能用ViewState维持状态
（3）服务器完成事件处理(C#后台处理)
（4） 事件驱动模型编程(控件+事件)

三、常用服务器控件

1.Label控件

Label控件在页面上显示一个静态文本

属性

（1）Text：标签上显示的文本
（2）ForeColor：文字颜色
（3） Visible：是否可见
缺点：会生成一个Span标签

2.Literal控件

属性

（1）Text：标签上显示的文本
（2）ForeColor：文字颜色
（3） Visible：是否可见
特点：不会生成任何多余代码，因此在实际应用中如果时单纯显示文本，建议使用Literal而不是Label

3.TextBox控件

在页面上显示一个可编辑的文本框

属性

（1） AutoPostBack：
(True/False)是否自动提交(和TextChanged事件一起使用，很少使用)
（2）TextMode：
a. SingleLine：只能单行输入
b. MultLine：允许多行输入
c. PassWord：密码输入方式

4.HiddenFiled控件

隐藏域控件：不占网页的位置，不显示内容，通过Value保存值

Button控件

Button控件在页面上显示一个按钮

属性

（1） PostBackUrl：发送到的页面跨页提交时设置
（2）CommandName：按钮相关的命令名
（3）CausesValidation：是否激活验证

类型

（1） Button：普通按钮
（2）LinkButton：超链接按钮
（3）ImageButton：图像按钮
共性：都是Submit类型
按钮的单击添加客户端脚本

    <asp:Button ID="Button2" runat="server" Text="删除" OnClientClick="return confirm('确定删除吗？')" /> <%-- 弹框返回“确定删除吗？” --%>
    <asp:Button ID="Button1" runat="server" Text="普通按钮" PostBackUrl="http://www.yltedu.com" /><br />
            <asp:LinkButton ID="LinkButton1" runat="server" PostBackUrl="http://www.yltedu.com">超链接按钮</asp:LinkButton><br />
            <asp:ImageButton ID="ImageButton1" runat="server"  /><br /> 
1
2
3
4

5.RadioButton控件

单选按钮

<asp:RadioButton ID="RadioButton1" GroupName="sex" runat="server" Text="男"/>
<asp:RadioButton ID="RadioButton2" GroupName="sex" runat="server" Text="女"/>
1
2

设置GroupName属性值相同，可以是选择时只出现一个

6.HyperLink控件

超链接控件

<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="https://blog.csdn.net/dust__">打开官网</asp:HyperLink>
1

四、数据验证控件

在使用表单时要做表单验证，很多表单验证都是需要在前台完成，服务器也可以进行验证但是不推荐

数据验证方式

（1） 编写后台C#代码验证：页面回传，用户体验不好，服务器压力大
（2）编写Javascript脚本进行验证：特效可以自定义，但是编写较为麻烦
（3）ASP.NET提供的验证控件：验证方便，简单；安全性较高
（4）JQuery验证插件：使用简单、方便，用户体验好。

1.非空验证控件

RequiredFieldValidator控件用于验证用户输入是否为空；常与其他控件一起使用

属性

（1）ControlToValidate：验证的控件ID
（2）ForeColor：错误提示文字的颜色
（3） ErrorMessage：错误的提示文本

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="请输入用户ID" ForeColor="Red" ControlToValidate="TextBox1" ></asp:RequiredFieldValidator>
1
2

2.比较验证控件

CompareValidator控件用于比较控件的值，例如两次密码需要输入一致

属性

（1） ControlToValidate：验证的控件ID
（2） ControlToCompare：要进行对比的控件
（3） Type：比较类型设置，不同类型的比较可能会出错
（4） Operator：比较运算符默认等于

<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
 <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
<asp:CompareValidator ID="CompareValidator1" runat="server" ErrorMessage="验证码输入不一致" ControlToCompare="TextBox3" ControlToValidate="TextBox2" ForeColor="Red">*</asp:CompareValidator>
1
2
3

3.范围验证控件

RangeValidator控件用于验证日期、数字等在一定范围内

属性

（1） MaxmumValue：范围的上限
（2） MinmumValue：范围的下限
（3） Type：验证的类型(字符串、整数、浮点型、日期、货币)

<asp:TextBox ID="TextBox4" runat="server" TextMode="DateTime"></asp:TextBox>
<asp:RangeValidator ID="RangeValidator1" runat="server" ErrorMessage="日期不对" ForeColor="Red" ControlToValidate="TextBox4" MaximumValue="2020-03-01" MinimumValue="2019-12-01" Type="Date" >
1
2

4.正则表达式验证控件

RegularExpressionValidator控件应用正则表达式作为验证规则

属性

ValidationExpression：设置要匹配的正则表达式

<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ErrorMessage="RegularExpressionValidator" ControlToValidate="TextBox5"></asp:RegularExpressionValidator> 
1
2

5.自定义验证控件

CustomValidator控件可以创建自定义的验证
（1） 可以手写js脚本进行客户端验证，也可以编写服务器端的验证代码
（2） 或者联合两种方式验证，更安全

属性

（1） ClientValidationFunction:用于客户端验证的函数
（2） ServerValidate：服务器端验证的事件方法

<asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="CustomValidator"></asp:CustomValidator>
1

6.验证信息汇总控件

ValidationSummary控件
（1） 该控件并不对窗体输入进行验证，而是将验证错误汇总统一显示
（2） 显示的内容是其他控件的ErrorMessage

属性

（1） ShowMessageBox：指示是否弹出提示信息
（2） ShowSummary：指示是否显示该报告内容，用于显示提示消息的时候
（3） 为避免多处提示验证错误信息，可以验证控件的Text属性为*

<asp:ValidationSummary ID="ValidationSummary1" runat="server" />
1

五、存储表格数据控件

1.DataList

<asp:DataList ID="DataList1" runat="server" OnItemCommand="DataList1_ItemCommand" RepeatLayout="Table">
             <HeaderTemplate>
            <table border="1" cellspacing="0" cellpadding="4" style="  width:1000px;border-collapse:collapse">
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>身份证号</th>
                <th>出生日期</th>
                <th>联系电话</th>
                <th>班级</th>
                 <th>住址</th>
                <th></th>
                <th></th>
            </tr>
            </HeaderTemplate>
            <ItemTemplate>
                <tr>
                <td><%#DataBinder.Eval(Container.DataItem,"StudentID")%></td>
                <td><%#DataBinder.Eval(Container.DataItem,"StudentName")%></td>
                <td><%#DataBinder.Eval(Container.DataItem,"Gender")%></td>
                <td><%#DataBinder.Eval(Container.DataItem,"Age")%></td>
                <td><%#DataBinder.Eval(Container.DataItem,"StudentIdNO")%></td>
                <td><%#DataBinder.Eval(Container.DataItem,"Birthday","{0:yyyy-mm-dd}")%></td>
                <td><%#DataBinder.Eval(Container.DataItem,"PhoneNumber")%></td>
                 <td><%#DataBinder.Eval(Container.DataItem,"ClassName")%></td>
                <td><%#DataBinder.Eval(Container.DataItem,"StudentAddress")%></td>
                <td>
                    <asp:Button ID="EditBtn" runat="server" Text="编辑"  CommandName="Upt" CommandArgument='<%# Eval("StudentID") %>'/>
                </td>
                 <td>
                     <asp:Button ID="DeleteBtn" runat="server" Text="删除"  CommandName="Del" CommandArgument='<%# Eval("StudentID") %>'/>
                 </td>
                </tr>
            </ItemTemplate>
            <FooterTemplate>
            </table>
            </FooterTemplate>
        </asp:DataList>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

2.Repeater

<asp:Repeater  id="cdcatalog" runat="server">
            <HeaderTemplate>
            <table width="100%" border="1" cellspacing="0" cellpadding="4" style="border-collapse:collapse">
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>身份证号</th>
                <th>出生日期</th>
                <th>联系电话</th>
                <th>班级</th>
                 <th>住址</th>
            </tr>
            </HeaderTemplate>
            <ItemTemplate>
            <tr>
            <td><%#DataBinder.Eval(Container.DataItem,"StudentID")%></td>
            <td><%#DataBinder.Eval(Container.DataItem,"StudentName")%></td>
            <td><%#DataBinder.Eval(Container.DataItem,"Gender")%></td>
            <td><%#DataBinder.Eval(Container.DataItem,"Age")%></td>
            <td><%#DataBinder.Eval(Container.DataItem,"StudentIdNO")%></td>
            <td><%#DataBinder.Eval(Container.DataItem,"Birthday","{0:yyyy-mm-dd}")%></td>
            <td><%#DataBinder.Eval(Container.DataItem,"PhoneNumber")%></td>
             <td><%#DataBinder.Eval(Container.DataItem,"ClassName")%></td>
            <td><%#DataBinder.Eval(Container.DataItem,"StudentAddress")%></td>
            </tr>
            </ItemTemplate>
            <AlternatingItemTemplate>
            <tr bgcolor="#e8e8e8">
            <td><%#Container.DataItem("title")%> </td>
            <td><%#Container.DataItem("artist")%> </td>
            <td><%#Container.DataItem("company")%> </td>
            <td><%#Container.DataItem("price")%> </td>
            </tr>
            </AlternatingItemTemplate>
            <FooterTemplate>
            </table>
            </FooterTemplate>
        </asp:Repeater>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

3.GridView

后续持续更新…