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

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

2023-01-11 151
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 全网最全面的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
容器
索引
开发框架
关键词：
.NET控件
ASP控件
ASP.NET控件
.NET代码
ASP.NET代码
白水你要努力啊
目录
相关文章
路边两盏灯
|
2月前
|
API
【Azure 媒体服务】Media Service的编码示例 -- 创建缩略图子画面的.NET代码调试问题
【Azure 媒体服务】Media Service的编码示例 -- 创建缩略图子画面的.NET代码调试问题
路边两盏灯
26 1
东方睿赢
|
2月前
|
开发框架 JavaScript 前端开发
震撼！破解 ASP.NET 服务器控件 Button 执行顺序之谜，颠覆你的开发认知！
【8月更文挑战第16天】在ASP.NET开发中，通过Button控件实现先执行JavaScript再触后台处理的需求十分常见。例如，在用户点击按钮前需前端验证或提示，确保操作无误后再传递数据至后台深度处理。此过程可通过设置Button的`OnClientClick`属性调用自定义JavaScript函数完成验证；若验证通过，则继续触发后台事件。此外，结合jQuery也能达到相同效果，利用`__doPostBack`手动触发服务器端事件。这种方式增强了应用的交互性和用户体验。
东方睿赢
40 8
mingupup
|
2月前
|
C# 开发者 Windows
在VB.NET项目中使用C#编写的代码
在VB.NET项目中使用C#编写的代码
mingupup
42 0
杀死一只知更鸟debug
|
9天前
|
C#
winform .net6 和 framework 的图表控件，为啥项目中不存在chart控件，该如何解决？
本文讨论了在基于.NET 6和.NET Framework的WinForms项目中添加图表控件的不同方法。由于.NET 6的WinForms项目默认不包含Chart控件，可以通过NuGet包管理器安装如ScottPlot等图表插件。而对于基于.NET Framework的WinForms项目，Chart控件是默认存在的，也可以通过NuGet安装额外的图表插件，例如LiveCharts。文中提供了通过NuGet添加图表控件的步骤和截图说明。
杀死一只知更鸟debug
32 0
winform .net6 和 framework 的图表控件，为啥项目中不存在chart控件，该如何解决？
东方睿赢
|
1月前
|
开发框架 JavaScript 前端开发
震撼！破解 ASP.NET 服务器控件 Button 执行顺序之谜，颠覆你的开发认知！
【9月更文挑战第2天】
东方睿赢
54 5
土木林森
|
2月前
|
Kubernetes 监控 Devops
【独家揭秘】.NET项目中的DevOps实践：从代码提交到生产部署，你不知道的那些事！
【8月更文挑战第28天】.NET 项目中的 DevOps 实践贯穿代码提交到生产部署全流程，涵盖健壮的源代码管理、GitFlow 工作流、持续集成与部署、容器化及监控日志记录。通过 Git、CI/CD 工具、Kubernetes 及日志框架的最佳实践应用，显著提升软件开发效率与质量。本文通过具体示例，助力开发者构建高效可靠的 DevOps 流程，确保项目成功交付。
土木林森
49 0
土木林森
|
2月前
|
XML 开发框架 .NET
.NET框架：软件开发领域的瑞士军刀，如何让初学者变身代码艺术家——从基础架构到独特优势，一篇不可错过的深度解读。
【8月更文挑战第28天】.NET框架是由微软推出的统一开发平台，支持多种编程语言，简化应用程序的开发与部署。其核心组件包括公共语言运行库（CLR）和类库（FCL）。CLR负责内存管理、线程管理和异常处理等任务，确保代码稳定运行；FCL则提供了丰富的类和接口，涵盖网络、数据访问、安全性等多个领域，提高开发效率。此外，.NET框架还支持跨语言互操作，允许开发者使用C#、VB.NET等语言编写代码并无缝集成。这一框架凭借其强大的功能和广泛的社区支持，已成为软件开发领域的重要工具，适合初学者深入学习以奠定职业生涯基础。
土木林森
90 1
路边两盏灯
|
2月前
|
API
【Azure Key Vault】.NET 代码如何访问中国区的Key Vault中的机密信息(Get/Set Secret)
【Azure Key Vault】.NET 代码如何访问中国区的Key Vault中的机密信息(Get/Set Secret)
路边两盏灯
32 3
路边两盏灯
|
2月前
|
存储 Linux 网络安全
【Azure App Service】.NET代码实验App Service应用中获取TLS/SSL 证书 (App Service Linux/Linux Container)
【Azure App Service】.NET代码实验App Service应用中获取TLS/SSL 证书 (App Service Linux/Linux Container)
路边两盏灯
30 0
路边两盏灯
|
2月前
|
网络安全 API 数据安全/隐私保护
【Azure App Service】.NET代码实验App Service应用中获取TLS/SSL 证书 (App Service Windows)
【Azure App Service】.NET代码实验App Service应用中获取TLS/SSL 证书 (App Service Windows)
路边两盏灯
32 0