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

简介: 全网最全面的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



相关文章
|
23天前
|
SQL 开发框架 前端开发
ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
25 0
|
2月前
|
SQL 开发框架 JavaScript
分享33个ASP.NET电子商务源码和40个ASP.NET控件组件源码,总有一款适合您
分享33个ASP.NET电子商务源码和40个ASP.NET控件组件源码,总有一款适合您
15 0
|
3月前
|
JavaScript C#
【傻瓜级JS-DLL-WINCC-PLC交互】2.wincc使用C#开发的.net控件
【傻瓜级JS-DLL-WINCC-PLC交互】2.wincc使用C#开发的.net控件
24 0
|
3月前
|
JavaScript Linux C#
【傻瓜级JS-DLL-WINCC-PLC交互】1.C#用windows窗体控件创建.net控件
【傻瓜级JS-DLL-WINCC-PLC交互】1.C#用windows窗体控件创建.net控件
40 0
|
3月前
|
开发框架 .NET 数据安全/隐私保护
Asp.Net第二章服务器端控件
Asp.Net第二章服务器端控件
17 0
|
3月前
|
开发框架 JavaScript .NET
Asp.Net就业课之三验证控件
Asp.Net就业课之三验证控件
39 0
|
3月前
|
开发框架 .NET
Asp.Net就业课堂之模板控件
Asp.Net就业课堂之模板控件
30 1
|
3月前
|
XML 数据可视化 数据库
VB.NET—DataGridView控件教程详解
VB.NET—DataGridView控件教程详解
87 0
|
4月前
|
开发框架 前端开发 JavaScript
Asp.net动态加载用户自定义控件,并转换成HTML代码
Asp.net动态加载用户自定义控件,并转换成HTML代码
23 0
|
9月前
|
开发框架 JavaScript .NET
Asp.net 控件用法汇总-RadioButtonList、DropDownList、button、Checkbox...(续)
Asp.net 控件用法汇总-RadioButtonList、DropDownList、button、Checkbox...(续)
79 0

相关产品

  • 云迁移中心
  • 相关实验场景

    更多