备案控制台
开发者社区 开发与运维 文章 正文

全网最全面的ASP.NET标准控件介绍及代码演示（下）

2023-01-11 129
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 全网最全面的ASP.NET标准控件介绍及代码演示（下）

6.2. 单选按钮组 RadioButtonList控件


RadioButtonList控件表示封装的一组单选按钮控件的列表控件，可以简单的看做是自动分组的RadioButton。


它有两个主要属性和一个主要事件：


ltems属性，获取列表控件项的集合

SelectedIndex属性，获取选中项的索引位置

SelectedIndexChanged事件，在单选按钮组中的选定或取消选定时触发

例如下面的代码


// .apsx文件
...
<body>
   <form id="form1" runat="server" aria-live="off">
        <div><asp:Label ID="Label1" runat="server" Text="Label">选择用户登录角色</asp:Label</div>      
        <div>
            <asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
                <asp:ListItem>管理员</asp:ListItem>
                <asp:ListItem>教师</asp:ListItem>
                <asp:ListItem>学生</asp:ListItem>
                <asp:ListItem>游客</asp:ListItem>
            </asp:RadioButtonList>
        </div> 
        <div>
            <asp:Label ID="Label2" runat="server" Text="你选择的角色是："></asp:Label>
            <asp:Label ID="Label3" runat="server"></asp:Label>
        </div>  
    </form>
</body>
...
// .aspx.cs文件
protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e){
    Label3.Text = RadioButtonList1.SelectedItem.Text;
}


效果如图所示，与上图RadioButton效果一致：


0a2653c851af460fa595bd959398a8f1.png


6.3. 复选框 CheckBox控件


CheckBox控件用于在页面上创建复选框。如果将复选框分组，则可以使用这些复选框代表一系列不互斥的选项，并可以同时选择多个复选框。


它有一个主要属性和一个主要事件：


Checked属性，指示是否已选中CheckBox控件

CheckedChanged事件，响应复选框的选中状态更改事件

如下面代码：


// .aspx文件
...
<body>
    <form id="form1" runat="server" aria-live="off">
        <div>
            <asp:Label ID="Label1" runat="server" Text="Label">选择要买的书</asp:Label>
        </div>      
        <div><asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="True" OnCheckedChanged="CheckBox1_CheckedChanged" Text="面向百度绝症治疗方案" /></div> 
        <div><asp:CheckBox ID="CheckBox2" runat="server" AutoPostBack="True" OnCheckedChanged="CheckBox2_CheckedChanged" Text="家猪优选优育指南" /></div> 
        <div><asp:CheckBox ID="CheckBox3" runat="server" AutoPostBack="True" OnCheckedChanged="CheckBox3_CheckedChanged" Text="知乎装逼宝典" /></div> 
        <div><asp:CheckBox ID="CheckBox4" runat="server" AutoPostBack="True" OnCheckedChanged="CheckBox4_CheckedChanged" Text="微博喷子话术大全" /></div> 
        <div>
            <asp:Label ID="Label2" runat="server" Text="你选择的角色是："></asp:Label>
            <asp:Label ID="Label3" runat="server"></asp:Label>
        </div>  
    </form>
</body>
...
// .aspx.cs文件
protected void CheckBox1_CheckedChanged(object sender, EventArgs e){
    if (CheckBox1.Checked){
        if (Label3.Text.IndexOf(CheckBox1.Text) < 0) {
            Label3.Text += (CheckBox1.Text + ";");
        }
    }else {
        Label3.Text = Label3.Text.Replace(CheckBox1.Text + ";", "");
    }
}
protected void CheckBox2_CheckedChanged(object sender, EventArgs e){
    if (CheckBox2.Checked){
        if (Label3.Text.IndexOf(CheckBox2.Text) < 0){
            Label3.Text += (CheckBox2.Text + ";");
        }
    }else{
        Label3.Text = Label3.Text.Replace(CheckBox2.Text + ";", "");
    }
}
protected void CheckBox3_CheckedChanged(object sender, EventArgs e){
    if (CheckBox3.Checked){
        if (Label3.Text.IndexOf(CheckBox3.Text) < 0){
            Label3.Text += (CheckBox3.Text + ";");
        }
    }else{
        Label3.Text = Label3.Text.Replace(CheckBox3.Text + ";", "");
    }
}
protected void CheckBox4_CheckedChanged(object sender, EventArgs e){
    if (CheckBox4.Checked){
        if (Label3.Text.IndexOf(CheckBox4.Text) < 0){
            Label3.Text += (CheckBox4.Text + ";");
        }
    }else{
        Label3.Text = Label3.Text.Replace(CheckBox4.Text + ";", "");
    }
}


效果如图所示：


2d65d23f6d4748949b924e4057485923.png


6.4. 复选框组 CheckBoxList控件


CheckBoxList控件表示封装的一组复选框控件的列表控件。


它有一个主要属性和一个主要事件


ltems属性，列表控件项的集合

SelectedindexChanged事件，在复选框中的选项选定或取消选定时触发

例如下面代码：


// .aspx文件
...
<body>
    <form id="form1" runat="server" aria-live="off">
        <div>
            <asp:Label ID="Label1" runat="server" Text="Label">选择要买的书</asp:Label>
        </div>      
        <div>
            <asp:CheckBoxList ID="CheckBoxList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged">
                <asp:ListItem>面向百度绝症治疗方案</asp:ListItem>
                <asp:ListItem>家猪优选优育指南</asp:ListItem>
                <asp:ListItem>知乎装逼宝典</asp:ListItem>
                <asp:ListItem>微博喷子话术大全</asp:ListItem>
            </asp:CheckBoxList>
        </div>
        <div>
            <asp:Label ID="Label2" runat="server" Text="你选择的书有："></asp:Label>
            <asp:Label ID="Label3" runat="server"></asp:Label>
        </div>  
    </form>
</body>
...
// .aspx.cs文件
protected void CheckBoxList1_SelectedIndexChanged(object sender, EventArgs e){
    String books = "";
    foreach (ListItem item in CheckBoxList1.Items) {
        if (item.Selected) {
            books += item.Text + ";";
        }
    }
    Label3.Text = books;
}


效果如图所示，与上图CheckBox效果一致：


6de278e6d6694ce5bb08e7e842b7e74b.png


6.5. 列表项 ListBox控件


ListBox控件用于显示一组列表项，用户可以从中选择一或多项， 如果列表项的总数超出可以显示的项数，那么ListBox控件会自动添加滚动条。


它有四个主要功能，通过2个方法和7个属性实现


添加和移除项，Items属性的Add()方法和Remove()方法

选择项，SelectedIndex、SelectedValue和Selectedltem属性

选择多项，SelectionMode属性

数据绑定，DataSource、DataTextField和DataValueField属性

例如下面代码，模拟了一个用户授权模块


// .aspx文件
...
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        div {
            display:inline;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server" aria-live="off">
        <div class="auto-style1">         
            <div style="float:left"> 
              <!-- 一个ListBox -->
                <asp:ListBox ID="ListBox1" runat="server" Height="105px" Width="100px" AutoPostBack="True" SelectionMode="Multiple"></asp:ListBox>
            </div>                
            <div style="float:left; text-align:center">                   
                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="&gt;" /><br />
                <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="&lt;" />
            </div>
            <div style="float:left">
              <!-- 一个ListBox -->
                <asp:ListBox ID="ListBox2" runat="server" Height="105px" Width="100px" AutoPostBack="True" SelectionMode="Multiple"></asp:ListBox>
            </div>
        </div>
    </form>
</body>
...
// .aspx.cs文件
protected void Page_Load(object sender, EventArgs e){
    if (!IsPostBack){
        ListBox1.Items.Add("管理员");
        ListBox1.Items.Add("教师");
        ListBox1.Items.Add("学生");
        ListBox1.Items.Add("游客");
  }
}
protected void Button1_Click(object sender, EventArgs e){
    //获取列表框的选项数
    int count = ListBox1.Items.Count;
    int index = 0;
    //循环判断各个项的选中状态
    for (int i = 0; i < count; i++){
        ListItem Item = ListBox1.Items[index];
        //如果选项为选中状态从源列表框中删除并添加到目的列表框中
        if (ListBox1.Items[index].Selected == true){
            ListBox1.Items.Remove(Item);
            ListBox2.Items.Add(Item);
            //将当前选项索引值减1
            index--;
        }
        //获取下一个选项的素引值
        index++;
    }            
}
protected void Button2_Click(object sender, EventArgs e){
    //获取列表框的选项数
    int count = ListBox2.Items.Count;
    int index = 0;
    //循环判断各个项的选中状态  
    for (int i = 0; i < count; i++){
        ListItem Item = ListBox2.Items[index];
        //如果选项为选中状态从源列表框中删除并添加到目的列表框中
        if (ListBox2.Items[index].Selected == true){
            ListBox2.Items.Remove(Item);
            ListBox1.Items.Add(Item);
            //将当前选项索引值减1
            index--;
        }
        //获取下一个选项的素引值
        index++;
    }            
}


效果如图所示


8ec4f2997fb246878c34ecd6d122b7c6.png


6.6. 下拉选择列表 DropDownList控件


DropDownList控件与ListBox控件的使用很类似，但是DropDownList控件只允许每次从列表中选择一项， 而且只在框中显示选定项。


它有一个主要事件：


SelectedIndexChanged事件，在DropDownList中的选项选定时触发

例如下面的代码，实现了一个选择省份的功能


// .aspx文件
...
<body>
  <form id="form1" runat="server" aria-live="off">
    <div>
        <asp:Label ID="Label1" runat="server" Text="Label">请选择所在省份</asp:Label>
    </div>
    <div>
        <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
            <asp:ListItem>湖北</asp:ListItem>
            <asp:ListItem>河南</asp:ListItem>
            <asp:ListItem>江西</asp:ListItem>
            <asp:ListItem>湖南</asp:ListItem>
            <asp:ListItem>安徽</asp:ListItem>
        </asp:DropDownList>
        <asp:Label ID="Label2" runat="server" Text="Label">所在省份:</asp:Label>
        <asp:Label ID="Label3" runat="server" Text=""></asp:Label>
    </div>
  </form>
</body>
...
// .aspx.cs文件
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
  String province = DropDownList1.SelectedValue.ToString();
    Label3.Text = province;
}


效果如图所示：


12c3b7f3f8814309a195c64f051d4445.png



7. 图像 Image控件

Image控件是一个基于HTML img元素的控件，主要用来在网页上显示图像。


它有三个常用属性：


image.png


例如下面代码，设置AlternateText为“图像描述”，这时，若图像没有加载出来，那就默认显示“图像描述”四个字：


...
<body>
    <form id="form1" runat="server" aria-live="off">
        <div>
            <asp:Image ID="Image1" runat="server" AlternateText="图像描述" />
        </div>            
    </form>
</body>
...


0a2653c851af460fa595bd959398a8f1.png


下面代码设置了ImageUrl，这时网页上显示该Image控件时，就会显示ImageURL关联的图像：


...
<body>
    <form id="form1" runat="server" aria-live="off">
        <div>
            <asp:Image ID="Image1" runat="server" ImageUrl="~/timg.jpg" AlternateText="图像描述" Height="175px" Width="175px" />
        </div>            
    </form>
</body>
...


2d65d23f6d4748949b924e4057485923.png


下面代码将Image控件的ImageAlign设置为了Right(右对齐)，这时，图像会显示在浏览器的右端


...
<body>
    <form id="form1" runat="server" aria-live="off">
        <div>
            <asp:Image ID="Image1" runat="server" ImageUrl="~/timg.jpg" ImageAlign="Right" AlternateText="图像描述" Height="175px"   Width="175px" />
        </div>            
    </form>
</body>
...


6de278e6d6694ce5bb08e7e842b7e74b.png


8. 容器 Panel控件

Panel控件是一个容器控件，它可以当作静态文本和其他控件的父级控件，用来把静态文本或其他控件装在里面。


它有两个主要属性：


GroupingText属性，设置面板控件中包含的控件组的标题

ScrollBars属性，设置Panel控件中滚动条的可见性和位置，有Horizontal、Vertical、Both、Auto、None五个枚举值可供选择，一般情况下使用Auto即可

例如下面的代码，将三个Label、三个TextBox和一个Button放在了一个Panel容器中：


...
<body>
    <form id="form1" runat="server">
    <div>
      <!-- 一个panel容器 -->
        <asp:Panel ID="Panel1" runat="server" Height="150px" Width="215px" ScrollBars="Both">
            <asp:Label ID="Label1" runat="server" Text="Label">用户名:</asp:Label>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <br />                
            <asp:Label ID="Label2" runat="server" Text="Label">密码：</asp:Label>
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            <br />                
            <asp:Label ID="Label3" runat="server" Text="Label">手机号：</asp:Label>
            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
            <br />
            <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="注册" />
        </asp:Panel>
    </div>            
    </form>
</body>
...


效果如图所示，左图是一个足够大的panel容器，可以显示里面所有的控件；右图高度不够，因此会显示竖向的滚动条


8ec4f2997fb246878c34ecd6d122b7c6.png


9. 文件上传 FileUpload控件

FileUpload控件的主要功能是向指定目录上传文件，这个控件包括一个文本和一个浏览按钮。用户可以在文本框中输入完整的文件路径，或者通过“浏览按钮”浏览并选择需要上传的文件。


FileUpload控件不能自动上传文件，必须设置相关的事件处理程序，并在程序中实现文件上传。


它有四个主要属性和一个主要方法

image.png

如下例代码：


// .aspx文件
...
<body>
    <form id="form1" runat="server">
        <div>
            <asp:FileUpload ID="FileUpload1" runat="server" />
            <asp:Button ID="Button1" runat="server" Text="文件上传" OnClick="Button1_Click1" />
        </div> 
        <div>
            <asp:Image ID="Image1" runat="server" />
        </div>
        <div>
            <asp:Label ID="Label1" runat="server"></asp:Label>
        </div>
    </form>
</body>
...
// .aspx.cs文件
protected void Button1_Click1(object sender, EventArgs e){
    bool fileIsValid = false;
    //如果确认了上传文件，则判断文件类型是否符合要求
    if (this.FileUpload1.HasFile){
        //获取上传文件的后缀
        String fileExtension = System.IO.Path.GetExtension(this.FileUpload1.FileName).ToLower();
        String[] restrictExtension = { ".gif' ", ".jpg", ".bmp", ".png" };
        //判断文件类型是否符合要求
        for (int i = 0; i < restrictExtension.Length; i++){
            if (fileExtension == restrictExtension[i]){
                fileIsValid = true;
            }
        }
        //如果文件类型符合要求,调用SaveAs方法实现上传,并显示相关信息
        if (fileIsValid == true){
            try{
                this.Image1.ImageUrl = "/images/" + FileUpload1.FileName;
                this.FileUpload1.SaveAs(Server.MapPath("~/images/") + FileUpload1.FileName);
                this.Label1.Text = "文件上传成功";
                this.Label1.Text += "<Br/>";
                this.Label1.Text += "<li>" + "原文件路径:" + this.FileUpload1.PostedFile.FileName;
                this.Label1.Text += "<Br/>";
                this.Label1.Text += "<li>" + "文件大小:" + this.FileUpload1.PostedFile.ContentLength + "字节";
                this.Label1.Text += "<Br/>";
                this.Label1.Text += "<li>" + "文件类型:" + this.FileUpload1.PostedFile.ContentType;
            }
            catch (Exception ex) {
                this.Label1.Text = "无法上传文件" + ex.Message;
            }
        }
    }
}


效果如下图，上图是原始状态，下图是已上传文件后的状态

0a2653c851af460fa595bd959398a8f1.png



文章标签：
.NET
容器
索引
开发框架
关键词：
ASP控件
.NET控件
ASP.NET控件
ASP.NET代码
ASP.NET控件代码
白水你要努力啊
目录
相关文章
红目香薰
|
3月前
|
SQL 开发框架 前端开发
ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
红目香薰
36 0
亚丁号
|
4月前
|
SQL 开发框架 JavaScript
分享33个ASP.NET电子商务源码和40个ASP.NET控件组件源码，总有一款适合您
分享33个ASP.NET电子商务源码和40个ASP.NET控件组件源码，总有一款适合您
亚丁号
32 0
_揽
|
5月前
|
JavaScript C#
【傻瓜级JS-DLL-WINCC-PLC交互】2.wincc使用C#开发的.net控件
【傻瓜级JS-DLL-WINCC-PLC交互】2.wincc使用C#开发的.net控件
_揽
43 0
_揽
|
5月前
|
JavaScript Linux C#
【傻瓜级JS-DLL-WINCC-PLC交互】1.C#用windows窗体控件创建.net控件
【傻瓜级JS-DLL-WINCC-PLC交互】1.C#用windows窗体控件创建.net控件
_揽
69 0
Zh.晨光
|
5月前
|
开发框架 .NET 数据安全/隐私保护
Asp.Net第二章服务器端控件
Asp.Net第二章服务器端控件
Zh.晨光
28 0
Zh.晨光
|
5月前
|
开发框架 JavaScript .NET
Asp.Net就业课之三验证控件
Asp.Net就业课之三验证控件
Zh.晨光
45 0
Zh.晨光
|
5月前
|
开发框架 .NET
Asp.Net就业课堂之模板控件
Asp.Net就业课堂之模板控件
Zh.晨光
42 1
空白_d
|
5月前
|
XML 数据可视化 数据库
VB.NET—DataGridView控件教程详解
VB.NET—DataGridView控件教程详解
空白_d
153 0
编程乐趣
|
6月前
|
开发框架 前端开发 JavaScript
Asp.net动态加载用户自定义控件,并转换成HTML代码
Asp.net动态加载用户自定义控件,并转换成HTML代码
编程乐趣
27 0
亚丁号
|
4月前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
亚丁号
47 0

热门文章

最新文章

  • 1
    Asp.Net4.0/VS2010新变化(4):SEO的改进
  • 2
    win10 uwp 使用 asp dotnet core 做图床服务器客户端
  • 3
    Advantages and disadvantages of ASP.NET Server Controls and HTML Server Controls
  • 4
    几个常用的ASP木马
  • 5
    ASP.NET MVC Model绑定(五)
  • 6
    一起谈.NET技术，System.DateTime 详解(续）
  • 7
    Net设计模式实例之抽象工厂模式(Abstract Factory Pattern)
  • 8
    .net平台性能很不错的轻型ORM类Dapper
  • 9
    日期 Date－－ESBasic 可复用的.NET类库（02）
  • 10
    安全的发布 .NET 应用的改动到产品服务器环境
  • 1
    ASP.NET体检中心源码，实现检前、检中、检后全流程管理
    38
  • 2
    C# .NET面试系列七：ASP.NET Core
    84
  • 3
    C# .NET面试系列六：ASP.NET MVC
    113
  • 4
    ASP.NET云LIS区域检验云SaaS平台源码
    49
  • 5
    ASP.NET实验室LIS系统源码 Oracle数据库
    41
  • 6
    ASP.NET WEB+EntityFramework数据持久化——考核练习库——1、用户管理系统(考点：查询列表、增加、删除)
    72
  • 7
    ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
    36
  • 8
    ASP.NET WEB——项目中Cookie与Session的用法
    41
  • 9
    ASP.NET WEB——项目创建与文件上传操作
    48
  • 10
    ASP.NET Web——GridView完整增删改查示例(全篇幅包含sql脚本)大二结业考试必备技能
    37

    • 相关电子书

    更多
  • QQ移送页面框架优化实践
  • QQ移动页面框架优化实践
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • WEB网页编程实战
  • 函数计算进阶-IP查询工具开发
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）