【ASP.NET】第二课——ASP.NET WebForm中的控件，掌握基本的Web服务器控件

最新推荐文章于 2023-01-12 10:28:42 发布

ba_wang_mao

最新推荐文章于 2023-01-12 10:28:42 发布

阅读量5.5k

点赞数 15

分类专栏： ASP.NET

本文链接：https://blog.csdn.net/ba_wang_mao/article/details/106085197

版权

ASP.NET 专栏收录该内容

79 篇文章 68 订阅

订阅专栏

知识点：

理解 ASP.NET 的控件的分类、掌握服务器控件和页面回发的原理、掌握基本的 Web 服务器控件、掌握服务器控件的客户端事件处理。

在第一课【使用ASP.NET开发Web项目】第一课——初识ASP.NET中，我么创建了第一个ASP.NET程序，也已经初步认识到了 ASP.NET WebForm 中的 Button、Label 和 TextBox 控件。Asp.net之所以开发方便和快捷，关键是它有一组强大的控件库，包括 HTML 控件、HTML 服务器控件和 Web服务器控件。

我们经常使用的是 Web 服务器控件，根据它们功能的侧重点不同，Web 服务器控件可以分为标准控件、具有强大数据绑定功能的数据控件、用于检测输入的验证控件等。通过本章的学习，可以掌握所有 ASP.NET 控件的共有特性、常用的标准控件及服务器控件的客户端事件处理的方式。

1、控件概述

在 ASP.NET 中，控件分为HTML 控件、HTML服务器控件和Web服务器控件。不管什么控件，最终会生成 HTML 代码，由浏览器根据 HTML 代码解析后呈现。

1.1 ASP.NET中的客户端和服务端

客户端一般由浏览器来充当，服务端一般由IIS 这类的服务器和网站代码来实现！用于提供浏览服务的服务器端软件，称为 Web 服务器。

常用的web服务器： IIS 微软集成在Windows Server 服务器上的 Web 服务器软件，全称为 Internet Information Server，又称互联网信息服务器。 ASP.NET Development Server 集成在 Visual Studio 2005 和 2008 中的 Web 服务器，可以处理本机的请求，用于 Web 应用程序开发中使用。

ASP.NET中客户端控件和服务端控件的区别

客户端控件：即普通Html控件，使用script控制操作，由客户端浏览器解释执行。
服务端控件：即Asp.Net的控件，这些控件在服务器端解释执行，生成根据用户的浏览器而定的html元素。

1.2 HTML 控件

HTML 标签，比如<input type=”text” />是一个文本框标签，在 ASP.NET 中，这种标签称作 HTML 控件。ASP.NET 不会对这种控件做处理，即在客户端运行，我们也无法为 HTML 控件绑定服务器端事件，即在服务器端无法用代码捕获它，只能在客户端通过 javascript 等程序语言来控制。因为 HTML 控件不消耗服务器资源，所以如果仅仅强调客户端的应用，那么用 HTML 控件即可。

1.3 HTML 服务器控件

我们可以将 HTML 控件转换为 HTML 服务器控件，方法是在 HTML 标签中添加runat="server"的属性，这个属性声明了该控件在服务器端运行。在 ASP.NET 执行的过程中，ASP.NET 将创建包含runat="server"属性的元素实例，如果需要在后置代码中使用此实例，则需要为控件分配id 属性。

示例练习1：HTML服务器控件的使用

示例效果：用户在输入框里输入姓名，点击【确定】按钮时，输出针对该姓名的欢迎语。

第一步：在VS中新建asp.net web项目，并添加一个web窗体，使用HTML服务器控件，制作基本界面。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication18.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title> HTML服务器控件的使用 </title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            请输入姓名：<input id="txtName" type="text" runat="server" name="txtName" />
            <input type="button" value="确定" runat="server" id="btnSure" onserverclick="btnSure_ServerClick" />
        </div>
    </form>
</body>
</html>

代码提示：

具有runat="server"属性的所有控件都必须放在具有runat="server"属性的 form 中。
onserverclick是HTML服务器控件的单击事件。

第二步：在解决方案资源管理器中，找到当前WebForm1.aspx，点击左侧的三角形，双击打开文件WebForm1.aspx.cs，编写代码。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication18
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btnSure_ServerClick(object sender,EventArgs e)
        {
            Response.Write("欢迎您！" + txtName.Value);
        }
    }
}

注意：

这里的事件，需要自己在WebForm1.aspx.cs文件里写。

1.4 Web服务器控件

与HTML服务器控件不同，Web 服务器控件不是由 HTML 元素直接转换而来的，而是微软重新定义的一套控件。第一章使用的 TextBox、Label 和 Button 都是 Web 服务器控件。Web 服务器控件提供统一的编程模型、包含方法以及与之相关的事件处理程序，并且这些代码都在服务器端执行。在 ASP.NET 中，我们平时使用的都是 Web 服务器控件。Web 服务器控件的标签都是以“asp:” 开头，称为标记前缀，后面是控件类型，如：<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> 。

注意：

虽然runat="server"是 Web 服务器控件的默认属性，但该属性不能省略不写，否则会出现编译错误。

1.5 HTML控件、HTML服务器控件、web服务器控件之间的区别

html控件：<input type="button" name="b1">，运行在客户端
html服务器控件：<input type="button" name="b1" runat="sever">，在服务器端运行
web服务器控件：<asp:Button id="b1" runat="server">，在服务器端运行

HTML 服务器控件和 Web 服务器控件都是在服务器端运行，它们通过设置 id 属性，在服务器端用id来自动捕获它们。

2、Web服务器控件的应用

2.1 显示文本控件

（1） Label控件

Label 控件是 ASP.NET 中最常用的控件之一，用于将文本内容显示在网页上，支持以编程方式动态修改显示的内容。Label 控件常用的成员如表所示。

示例练习2：Label控件的使用

示例效果：网页运行后，用户通过快捷键“Alt+U”，快速访问文本框。

第一步：在当前项目中，新添加一个web窗体，并命名为Example2，如下图所示

第二步：Web窗体添加成功后，默认打开源代码界面，我们可以单击下方的【设计】，切换界面。然后从工具箱里分别拖一个Label控件和一个TextBox控件，并进行相关属性设置。

TextBox控件：ID属性设置为：txtName
Label控件： ID属性设置为：lblName，AccessKey属性设置为：U，AssociatedControlID属性设置为：txtName，Text属性设置为：用户名（U）

第三步：启动运行调试，查看效果。效果出现后，可以在VS中，回到【源代码】界面，查看代码的变化。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example2.aspx.cs" Inherits="WebApplication19.Example2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
        </div>
        <asp:TextBox ID="txtName" runat="server" Width="202px"></asp:TextBox>
        <asp:Label ID="lblName" runat="server" AccessKey="U" AssociatedControlID="txtName" Text="用户名（U）"></asp:Label>
    </form>
</body>
</html>

注意：当我们在设计界面拖放控件，并设置属性时，会自动在aspx页面生成对应代码。

提示：Label控件的Text属性中如果包含HTML标签，则会被浏览器解析并执行。

思考：在浏览器中查看页面源代码，看看两个源代码之间有什么区别，为什么？

（2） TextBox控件

在页面中，使用 TextBox 控件收集用户输入的信息或者显示文本。它可以配置为单行、多行或者密码类型。TextBox 常用的成员如表所示。

示例练习3：TextBox控件的使用

示例效果：网页运行后，用户按照提示输入用户名、密码和留言，当用户留言结束离开TextBox控件时（失去焦点），触发OnTextChanged事件，显示欢迎语。

第一步：在当前项目中，新添加一个web窗体，并命名为Example3，然后在body里写一个4行2列的表格，做基础界面设计。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example3.aspx.cs" Inherits="WebApplication20.Example3" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table>
                <tr>
                    <td>用户名：</td>
                    <td>
                        <asp:TextBox ID="txtName" runat="server" Class="txt"></asp:TextBox></td>              
                </tr>
                    <tr>
                        <td>密码：</td>
                        <td>
                            <asp:TextBox ID="txtPwd" runat="server" TextMode="Password" Class="txt"></asp:TextBox></td>
                    </tr>
                        <tr>
                            <td>留言：</td>
                            <td>
                                <asp:TextBox ID="txtContent"  runat="server" TextMode="MultiLine" Rows="7"  Columns="45" Class="txt"  OnTextChange="txtContent_TextChanged"  AutoPostBack="true" ></asp:TextBox> </td>
                        </tr>
                    <tr>
                        <td colspan="2">
                            <asp:Label ID="lblInfo" runat="server" Text=""></asp:Label></td>
                    </tr>
            </table>
        </div>
    </form>
</body>
</html>

第二步：在head标签里，写一对style标签，写css样式，来控制表格的样式。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example3.aspx.cs" Inherits="WebApplication20.Example3" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>  TextBox控件的使用练习 </title>
    <style type="text/css">
        table {border:1px solid black; border-collapse:collapse; width:490px;}
        td    {border:1px solid black; padding:10px;}
        .txt  {border:1px solid black;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table>
                <tr>
                    <td>用户名：</td>
                    <td>
                        <asp:TextBox ID="txtName" runat="server" Class="txt"></asp:TextBox></td>              
                </tr>
                    <tr>
                        <td>密码：</td>
                        <td>
                            <asp:TextBox ID="txtPwd" runat="server" TextMode="Password" Class="txt"></asp:TextBox></td>
                    </tr>
                        <tr>
                            <td>留言：</td>
                            <td>
                                <asp:TextBox ID="txtContent"  runat="server" TextMode="MultiLine" Rows="7"  Columns="45" Class="txt"  OnTextChange="txtContent_TextChanged"  AutoPostBack="true" ></asp:TextBox> </td>
                        </tr>
                    <tr>
                        <td colspan="2">
                            <asp:Label ID="lblInfo" runat="server" Text=""></asp:Label></td>
                    </tr>
            </table>
        </div>
    </form>
</body>
</html>

第三步：点击【设计】，进入设计界面，选中留言对应的TextBox控件（ID属性被设置为txtContent），在属性面板点击【事件】，找到该控件的TextChanged事件，双击进入。（注意，这时候事件后面有事件名，是因为我们在第一步写源代码时，已经写好了事件名称。）

在txtContent_TextChanged事件中，编写代码：

protected void txtContent_TextChanged(object sender, EventArgs e)
        {
            lblInfo.Text = "您好：" + txtName.Text + "，您的留言是:" + txtContent.Text;
        }

第四步：启动运行调试，查看效果。

示例代码分析：

（1）OnTextChanged 事件在输入焦点离开 TextBox 时才被引发。

（2）AutoPostBack 属性用于设置当触发文本框的 OnTextChanged 事件时，是否自动产生向服务器的回发。为了避免由于回发引起页面的刷新，默认把 AutoPostBack 属性设置为false。

（3）本例中，将用于输入留言的 TextBox 的 AutoPostBack 属性设置为 true，使 TextBox失去焦点后自动回发到服务器，以便立即处理 OnTextChanged 事件。

2.2 显示图片控件

开发网站时，常常用到各种图片。Image 控件用于在网页上呈现图片，最终生成<img>元素，支持以编程的方式管理显示的图片。Image 控件常用成员如表所示。

示例练习4：Image控件的使用

示例效果：网页运行后，会随机显示一张图片，鼠标移动到图片上面，会出现该图片的说明性文字。刷新页面，会随机显示新的图片，同样，鼠标移动到该图片上也有提示文字。

第一步：在当前项目中，新添加一个web窗体，并命名为Example4，然后在设计界面，拖放一个Image控件，并设置属性。ID属性：imgWuhan、Height属性：200px、Width属性：300px

切换到源代码模式，会看到我们添加的Image控件，已经被自动添加。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example4.aspx.cs" Inherits="WebApplication21.Example4" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
        </div>
        <asp:Image ID="imgWuhan" runat="server" Height="200px" Width="300px" />
    </form>
</body>
</html>

第二步：在解决方案资源管理器中，鼠标右键单击当前项目名称WebApplication21，依次选择【添加】——【新建文件夹】——【将新建的文件夹命名为img】。然后鼠标右键单击文件夹【img】，再单击【在文件资源管理器中打开文件夹】，然后将自己需要的图片，存放在该文件夹里。

第三步：在解决方案资源管理器中，鼠标单击Example4.aspx文件前面的三角形，找到他对应的Example4.aspx.cs文件，双击进入，在Page_Load事件里编写代码。

     protected void Page_Load(object sender, EventArgs e)
     {

            Random num = new Random();
            int i = num.Next(1, 5);//随机产生1到5之间的整数
            imgWuhan.ImageUrl = "img/" + i + ".jpg";//构造图片的相对路径
            switch (i)
            {
                case 1:
                    imgWuhan.ToolTip = "凌波门";//设置图片的ToolTip属性
                    break;
                case 2:
                    imgWuhan.ToolTip = "武汉关";
                    break;
                case 3:
                    imgWuhan.ToolTip = "黄鹤楼";
                    break;
                case 4:
                    imgWuhan.ToolTip = "鹦鹉洲大桥";
                    break;
            }
        }

第四步：启动运行调试，查看效果。

2.3 控件的超级链接

HyperLink 控件用于在网页上以图片或文本方式呈现一个链接，常用成员如表所示。

示例练习5：HyperLink控件的使用

示例效果：网页运行后，看到一个文本超链接“百度首页”、一张图片超链接，分别点击他们，都可以打开百度首页。

第一步：在当前项目中，新添加一个web窗体，并命名为Example5，然后在设计界面，拖放一个HyperLink控件，并设置属性。ID属性：hlkText、NavigateUrl属性：http://www.baidu.com、Target属性：_blank、Text属性：百度首页。

第二步：在设计界面新增加一个img文件夹，拷贝一个baidu.png图片到img文件夹

第二步：在设计界面，继续拖放一个HyperLink控件，并设置属性。ID属性：hlkImage、ImageHeight属性：100px、ImageUrl属性：img/baidu.png、ImageWidth属性：200px、NavigateUrl属性：http://www.baidu.com、Target属性：_blank。

（注意：这里设置ImageUrl属性时，采用的是相对路径，可以提前在自己项目的img文件夹中存放一张图片。如果自己练习时的图片名称、格式等不一致时，要学会自己更改，否则可能会导致图片不可见）

第三步：切换到源代码界面，查看代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example5.aspx.cs" Inherits="WebApplication22.Example5" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
        </div>
        <asp:HyperLink ID="hlkText" runat="server" NavigateUrl="http://www.baidu.com" Target="_blank">百度首页</asp:HyperLink>
        <p>
            &nbsp;</p>
        <p>
            &nbsp;</p>
        <p>
            <asp:HyperLink ID="hlkImage" runat="server" ImageHeight="100px" ImageUrl="img/baidu.png" ImageWidth="200px" NavigateUrl="http://www.baidu.com" Target="_blank">HyperLink</asp:HyperLink>
        </p>
    </form>
</body>
</html>

HyperLink 使用 Text 属性时，呈现一个文本方式的链接，最终会生成一个包含文本的<a>标签（<a id="hlkText" href="http://www.baidu.com" target="_blank">百度首页</a> ）。同时使用 ImageUrl 属性和Text 属性时，程序会优先显示 ImageUrl 属性中的图片，当图片不可用时则显示 Text 属性中的文字，HyperLink 控件会为 ImageUrl 属性生成<img>标签，并使用<a>标签嵌套（<a id="hlkImage" href="http://www.baidu.com" target="_blank"><img src="img/baidu.png" alt="HyperLink" style="height:100px;width:200px;" /></a> ）。

第四步：启动运行调试，查看效果。

点击《百度首页》即可自动跳转到百度网站首页。

2.4 单选按钮的应用

在 ASP.NET WebForm 中，单选按钮主要有 RadioButton 控件提供。RadioButton 控件用于在页面创建一个单选项，可以使用GroupName属性，将多个单选项分为一组来创建多个互斥的选项。RadioButton 常用成员如表所示。

示例练习6：RadioButton控件的使用

示例效果：网页运行后，有一组单选按钮选项，默认选项“男”被选中，用户可以根据需要，点选不同的选项，每次只能选中一个。

第一步：在当前项目中，新添加一个web窗体，并命名为Example6，然后在设计界面，拖一个Label，Label的TEXT属性写上文字“性别：”，再文字后面拖放一个RadioButton控件，并设置属性。ID属性：rdoSexM、Checked属性：True、GroupName属性：gender、Text属性：男。

第二步：在当前设计界面，继续拖放一个RadioButton控件，并设置属性。ID属性：rdoSexW、GroupName属性：gender、Text属性：女。

第三步：启动运行调试，查看效果。（可以切换到源代码界面，查看代码）

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example6.aspx.cs" Inherits="WebApplication23.Example6" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
        </div>
        <p>
            <asp:Label ID="Label1" runat="server" Text="性别"></asp:Label>
            <asp:RadioButton ID="rdoSexM" runat="server" Checked="True" GroupName="gender" Text="男" />
            <asp:RadioButton ID="rdoSexW" runat="server" GroupName="gender" Text="女" />
        </p>
        <p>
            &nbsp;</p>
        <p>
            &nbsp;</p>
    </form>
</body>
</html>

运行效果

2.5 复选框的应用

在 ASP.NET WebForm 应用程序中，CheckBox 控件用来在页面中创建复选框，常用成员见表所示。

示例练习7：CheckBox控件的使用

示例效果：网页运行后，有一组复选框按钮选项，默认选项“篮球”被选中，用户可以根据需要，点选不同的选项，选中以后，单击确定按钮，会输出用户选中的选项。

第一步：在当前项目中，新添加一个web窗体，并命名为Example7，然后在设计界面，拖一个Label，Label的TEXT属性写上文字“请选择你喜欢的运动：”，在文字后面拖放一个CheckBox控件，并设置属性。ID属性：chkSport1、Checked属性：True、Text属性：篮球。

继续添加两个CheckBox控件，分别设置他们的属性：

ID属性：chkSport2、Text属性：足球

ID属性：chkSport3、Text属性：乒乓球

第二步：在当前设计界面，换行以后，继续拖放Button控件，并设置其属性，ID属性：btnSure、Text属性：确定。

第三步：在当前设计界面，换行以后，输入文字“你选择的爱好是：”，然后再文字后面拖放一个Label控件，并设置其属性，ID属性：lblState、Text属性：（设置为空）。

可以查看一下此时的源代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example7.aspx.cs" Inherits="WebApplication24.Example7" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
        </div>
        <asp:Label ID="Label1" runat="server" Text="请选择你喜欢的运动"></asp:Label>
        <asp:CheckBox ID="chkSport1" runat="server" Checked="True" Text="篮球" />
        <asp:CheckBox ID="chkSport2" runat="server" Text="足球" />
        <asp:CheckBox ID="chkSport3" runat="server" Text="乒乓球" />
        <br />
        <asp:Button ID="btnSure" runat="server" Text="确定" />
        <p>
            <asp:Label ID="Label2" runat="server" Text="你选择的爱好是："></asp:Label>
            <asp:Label ID="lblState" runat="server"></asp:Label>
        </p>
    </form>
</body>
</html>

第四步：在当前设计界面，双击Button控件，进入该控件的事件，编写代码。

  protected void btnSure_Click(object sender, EventArgs e)
        {
            foreach(Control ct in form1.Controls)
            {
                if (ct.GetType().ToString().Equals("System.Web.UI.WebControls.CheckBox"))
                {
                    CheckBox cb = (CheckBox)ct;
                    if (cb.Checked==true)
                    {
                        lblState.Text += cb.Text + " ";
                    }
                }
             }
        }

代码解析：

foreach (Control ct in form1.Controls){}；使用foreach循环，遍历指定元素中的所有控件。（注意：本示例里使用的是form1.Controls，因为我们的源代码里默认的是 <form id="form1" runat="server">，如果使用其他id，请注意替换。）
GetType()方法：GetType()方法继承自Object，所以C#中任何对象都具有GetType()方法，它的作用和typeof()相同，返回Type类型的当前对象的类型。（区别：typeof(x)中的x，必须是具体的类名、类型名称等，不可以是变量名称。）
ToString()方法：用于将对象实例以字符串的形式显式。（区别：GetType()方法用于获取对象实例的类型）
Equals()方法： 用来比较引用相等，意味着比较的不是两个对象，而是两个对象的引用，比较两个对象指向的内存空间的内容是不是相同。

注意：

CheckBox 最终生成的 HTML 元素是<input type=”checkbox”>和<label>，如示例 6中，用来选择“篮球”的 CheckBox 产生的 HTML 代码是：<input id="chkSport1" type="checkbox" name="chkSport1" checked="checked" /><label for="chkSport1">篮球</label>

第五步：运行效果

点击【确定】

选择【足球】，点击【确定】

2.6 列表控件

列表控件主要用于显示若干个选项，让用户选择其中一项或多项，具体过程取决于列表控件允许单选还是多项。列表控件常用的成员如表所示。

在 ASP.NET 中，列表控件包括 DropDownList 控件、ListBox 控件、RadioButtonList 控件和CheckBoxList 控件。

DropDownList 控件：用来制作下拉列表框，默认情况下，其选项都是第一项（索引为 0 的项）。该控件最终会生成一个<select>HTML 元素，Items 属性中的每个选项都将生成一个<option>元素，但默认状况下它只支持单项选择模式，不支持多项选择模式。使用多项选择模式时可以使用ListBox 控件。
ListBox 控件：是允许用户选择一项或多项的列表控件，该控件最终会生成<select>HTMl 元素，Items 属性中的每一个选项都将生成<option>元素。除了列表控件的常用成员之外，ListBox控件还包含一个常用成员——Rows 属性，用于设置和获取 ListBox 中显示列表项的数目。将ListBox 控件的 Rows 属性设置为 1 时，其外观将与 DropDownList 相同。
RadioButtonList 控件：用于在页面上创建一组单选按钮，可以设置选项的排列与布局。
CheckBoxList 控件：用于在页面上创建一组复选框，可以设置选项的排列与布局。

除了列表控件常用的成员之外， RadioButtonList 与 CheckBoxList 的常用成员见表所示。

示例练习8：列表控件的使用

示例效果：网页运行后，显示各种类型的列表控件，用户可以根据需要进行选择。

第一步：根据案例要求准备好数据库文件。（推荐阅读：SQL Server数据库第三课2：使用create语句新建数据库、数据库表）

在这里，我是用MySQL创建数据库。

我用MySQL数据库创建了一个数据库CarSYS，数据库CarSYS内有一个表名为Brand，有2个字段：BrandId是整数，就主键，标记序号；BrandName是汽车名称，是字符串。

第二步：设计前台界面，在当前项目中，新添加一个web窗体，并命名为Example8。

在设计界面，写上文字“DropDownList控件：”，在文字后面拖放一个DropDownList控件，并设置属性。ID属性：ddlCarType、Height属性：30px、Width属性：176px。

换行以后继续输入文字“ListBox控件：”，然后在文字后面拖放一个ListBox控件，并设置属性。ID属性：lbCarType、Height属性：86px、Width属性：122px、Rows属性：5。

换行以后继续输入文字“RadioButtonList控件：”，然后在文字后面拖放一个RadioButtonList控件，并设置属性。ID属性：rblCarType、RepeatColumns属性：5、RepeatDirection属性：Horizontal。

换行以后继续输入文字“CheckBoxList控件：”，然后在文字后面拖放一个CheckBoxList控件，并设置属性。ID属性：cblCarType、RepeatColumns属性：5、RepeatDirection属性：Horizontal。

此时预览网页，看一下效果，由于没有绑定数据库，所以控件里的内容都是空的

第三步：添加MySQL数据库的引用

添加MySQL.Data.dll

第四步：连接数据库，在解决方案资源管理器中，鼠标单击Example8.aspx文件前面的三角形，找到他对应的Example8.aspx.cs文件，双击进入，在Page_Load事件里编写代码。（数据库连接操作，推荐阅读：ADO.NET数据库开发（三）DataSet 对象和DataAdapter 对象的使用）

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using MySql.Data.MySqlClient;   //我使用的是MySQL数据库


namespace WebApplication25
{
    public partial class Example8 : System.Web.UI.Page
    {
       
        protected void Page_Load(object sender, EventArgs e)

        {

            string constr = "Server=localhost;UserId=root;Password=68331;Database=CarSYS;pooling=false;CharSet=utf8;port=3306";//声明一个字符串用来存放连接数据库的信息
            string sql = "select * from Brand";//声明一个字符串，用来存放查询数据库表语句
            MySqlConnection con = new MySqlConnection(constr);//创建一个SqlConnection对象，由于我使用的是MySQL数据库，因此注意要引用using MySql.Data.MySqlClient;

            try       //将可能出错的语句放在try语句里
            {
                con.Open();//打开数据连接
                MySqlDataAdapter sda = new MySqlDataAdapter(sql, con);//创建一个SqlDataAdapter对象，
                DataSet ds = new DataSet();//创建一个DataSet对象，注意要引用using System.Data;
                sda.Fill(ds);

                //用DropDownList显示品牌
                ddlCarType.DataSource = ds.Tables[0]; //设置表格对象，列表控件从该对象中检索其数据项列表
                ddlCarType.DataTextField = "BrandName";//设置为列表项提供文本内容的数据源字段
                ddlCarType.DataValueField = "BrandId";//设置为列表项提供值的数据源字段
                ddlCarType.DataBind();//将数据源绑定到控件中
                ddlCarType.Items.Insert(0, new ListItem("请选择", "-1"));//插入"请选择"项，必须放到数据绑定之后：

                //用ListBox显示品牌
                lbCarType.DataSource = ds.Tables[0];
                lbCarType.DataTextField = "BrandName";
                lbCarType.DataValueField = "BrandId";
                lbCarType.DataBind();

                //用RadioButtonList显示品牌
                rblCarType.DataSource = ds.Tables[0];
                rblCarType.DataTextField = "BrandName";
                rblCarType.DataValueField = "BrandId";
                rblCarType.DataBind();
                rblCarType.SelectedIndex = 0;

                //用CheckBoxList显示品牌
                cblCarType.DataSource = ds.Tables[0];
                cblCarType.DataTextField = "BrandName";
                cblCarType.DataValueField = "BrandId";
                cblCarType.DataBind();
                cblCarType.SelectedIndex = 0;
            }

            catch (Exception ex)
            {
                Response.Write(ex.Message);
            }

            finally
            {
                con.Close();//关闭数据库连接
            }
        }
    }
}

2.6 HiddenField控件

HiddenField 控件是 ASP.NET 表单类控件，它没有用户界面，包含一个常用属性 Value。HiddenField 控件会生成“type=’hidden’”的 input 元素。

在实际项目中，为了避免页面回发时使数据恢复初始化的状态，可以使用 HiddenField 控件来保存这些数据。

示例练习9：HiddenField控件的使用

示例效果：单击 Button 时，Label 显示的数据从 0 开始，以 1 的步长逐步递增的功能。

第一步：在当前项目中，新添加一个web窗体，并命名为Example9，然后在设计界面，拖放一个HiddenField控件，并设置属性。ID属性：hfNumber、Value属性：0。

继续拖放一个Label控件，并设置属性。ID属性：lblCount、Text属性为：累计到：0。

继续拖放一个Button控件，并设置属性。ID属性：btnAdd、Text属性为：累计。

第二步：在解决方案资源管理器中，鼠标单击Example9.aspx文件前面的三角形，找到他对应的Example9.aspx.cs文件，双击进入，编写代码。

       public int i
        {
            get
            {
                return int.Parse(hfNumber.Value);
            }

            set
            {
                hfNumber.Value = value.ToString();
            }

        }

第三步：在解决方案资源管理器中，切换到Example9.aspx文件的设计界面，双击Button按钮进入Click事件，编写代码。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication26
{
    public partial class Example9 : System.Web.UI.Page
    {

        public int i
        {
            get
            {
                return int.Parse(hfNumber.Value);
            }

            set
            {
                hfNumber.Value = value.ToString();
            }

        }

        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btnAdd_Click(object sender, EventArgs e)
        {
            i++;
            lblCount.Text = "累计到：" + i;
        }
    }
}

下面是运行结果

3、服务器控件的客户端事件处理

ASP.NET 事件主要是指在服务器端处理的事件，但对有些服务器控件的操作并不会触发页面回发，可以将服务器控件的 AutoPostback 属性设置为 true，使该控件立即触发页面回发，以便服务器端处理操作引发的事件。但是回发会导致整个页面的频繁刷新，降低客户的体验度，也会增加服务器的负担，所以可以将一些工作借助客户端事件进行处理。

客户端事件在浏览器中引发后立即捕获，由浏览器中的 javascript 脚本负责处理；在ASP.NET 中，服务器控件借助 Attributes 属性来支持客户端的各种事件。

Attributes 属性由 System.Web.UI.WebControls.WebControl 类提供，所有呈现为 HTMl 标签的 Web 服务器控件都拥有此属性。Attributes 属性是在服务器端为服务器控件添加客户端处理代码的解决方案。

示例练习10：服务器控件的客户端事件处理

示例效果：单击 Web 服务器控件 Button 时，首先弹出对话框，提示用户“您确认删除吗”，如果用户单击“确定”，则提示“正在执行删除操作”。

第一步：在当前项目中，新添加一个web窗体，并命名为Example10，然后在设计界面，拖放一个Button控件，并设置属性。ID属性：btnDel、Text属性：删除。

第二步：在解决方案资源管理器中，鼠标单击Example10.aspx文件前面的三角形，找到他对应的Example10.aspx.cs文件，双击进入，编写代码。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication27
{
    public partial class Example10 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
               //使用Attributes属性为服务器控件添加onclick客户端事件的处理
               btnDel.Attributes.Add("onclick", "javascript:return confirm('您确认删除吗？')");
        }
    }
}

第三步：在解决方案资源管理器中，切换到Example10.aspx文件的设计界面，双击Button按钮进入Click事件，编写代码。

 protected void btnDel_Click(object sender, EventArgs e)
        {
            Response.Write("正在执行删除操作！");
        }

下面是运行结果

注意：案例中，Button 服务器控件既写了客户端单击事件, 又写了服务器端单击事件。那么当单击该 Button 时，先执行客户端单击事件“return confirm('您确认删除吗？')”，如果返回的是 false，则不会触发服务器端的单击事件，也不会导致回发。如果返回的是 true，那么在执行完客户端脚本之后进行回发。注意回发时，也要先触发 Page_Load 事件，然后再触发服务器端的单击事件。

————————————————

版权声明：本文为CSDN博主「逍遥小丸子」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/dnruanjian/article/details/102465685

https://blog.csdn.net/dnruanjian/article/details/102465685