ASP.NET 控件:检查Box、单选按钮、列表Box

⚡ 智能摘要

ASP.NET控件允许您通过拖动标签、文本框和列表来构建交互式Web表单。Box在页面上添加单选按钮、复选框和按钮控件,设置它们的属性,并连接按钮点击事件处理程序来处理用户输入。

  • 🏷️ 标签和文本框: 标签显示静态文本;文本框允许用户输入内容,每个文本框都有一个有意义的 ID。
  • 📋 列表Box: 一个列表Box 显示通过“编辑项目”对话框添加的可选项目,例如城市位置。
  • 🔘 单选按钮和复选框: 单选按钮只允许选择一个选项;复选框允许选择多个选项。
  • 🔲 按钮: 按钮提交表单并触发服务器端处理。
  • 事件处理程序: Double-单击按钮会创建一个 Click 事件,其中代码通过 Response 对象读取控件值。

ASP.NET 控件:检查Box、单选按钮、列表Box、文本框、标签

向 Web 表单添加 ASP.Net 控件

ASP.Net 能够向表单添加控件,例如文本框和标签。

让我们来看看 Web 表单中可用的其他控件,并了解它们的一些共同属性。

在我们的示例中,我们将创建一个具有以下功能的表单。

  1. 用户可以输入自己的姓名。
  2. 可以选择用户居住的城市。
  3. 用户可以输入性别选项。
  4. 选择用户想要学习的课程的选项。 C# 以及 ASP.Net。

让我们详细了解每个控件。让我们添加它们来构建具有上述功能的表单。

步骤1) 第一步是打开演示 Web 表单的表单设计器。完成此操作后,您将能够将控件从工具箱拖到 网络表格.

打开设计器网页表单:

  • 在解决方案资源管理器中右键单击 Demo.aspx 文件,然后
  • 选择菜单选项视图设计器。

向 Web 表单添加 ASP.Net 控件

完成上述步骤后,您将能够看到表单设计器,如下所示。

向 Web 表单添加 ASP.Net 控件

现在让我们开始逐一添加控件。

标签控制

标签控件用于在表单上向用户显示文本或消息。标签控件通常与其他控件一起使用。一个常见的例子是将标签添加到文本框控件旁边。标签会提示用户文本框中应该填写什么内容。让我们通过下面的示例来了解如何实现这一点。我们将使用一个名为“名称”的标签。它将与文本框控件一起使用,文本框控件将在后面的部分中添加。

步骤1) 第一步是从工具箱中将“标签”控件拖到 Web 表单上,如下图所示。

标签控制

步骤2) 添加标签后,请按照以下步骤操作。

  1. 右键单击标签控件,打开属性窗口。
  2. 选择“属性”菜单选项。

标签控制

步骤3) 在属性窗口中,将“文本”属性的值更改为“名称”。

标签控制

同样,将控件的 ID 属性值也更改为 lblName。通过为控件指定有意义的 ID,在编码阶段访问它们变得更加容易。如下所示。

标签控制

完成上述更改后,您将看到以下输出。

输出:-

标签控制

您将看到名称标签出现在 Web 表单上。

文本框

文本框用于允许用户在 Web 表单应用程序上输入一些文本。让我们通过以下示例了解如何实现这一点。我们将在表单中添加一个文本框,用户可以在其中输入自己的姓名。

步骤1) 第一步是从工具箱中将文本框控件拖到 Web 表单上,如下图所示。

文本框

下面展示的是将文本框控件添加到窗体后,在窗体设计器中的显示效果。

文本框

步骤2) 添加文本框后,您必须更改 ID 属性。

  • 右键单击文本框控件,打开属性窗口,然后
  • 选择“属性”,然后选择
  • 将文本框的 ID 属性更改为 txtName。

文本框

一旦完成上述更改,您将看到以下输出。

输出:-

文本框

列表框

列表框用于在 Web 表单上显示项目列表。让我们通过以下示例了解如何实现此操作。我们将向表单添加一个列表框来存储一些城市位置。

步骤1) 第一步是从工具箱中将列表框控件拖到 Web 表单上,如下图所示。

列表框

步骤2) 将列表框拖到窗体后,会出现一个单独的侧边菜单。在该菜单中,选择“编辑项目”菜单。

列表框

步骤3) 现在您将看到一个对话框,您可以在其中将列表项添加到列表框。

  1. 单击添加按钮来添加列表项。
  2. 为列表项的文本值命名——在本例中为“孟买”。重复步骤 1 和 2,添加“芒格洛尔”和“海得拉巴”的列表项。
  3. 点击确定按钮。

列表框

步骤4) 转到属性窗口,将控件的 ID 属性值更改为 lstLocation。

列表框

完成上述更改后,您将看到以下输出。

输出:-

列表框

从输出结果可以清楚地看出,列表框已添加到表单中。

单选按钮

单选按钮用于显示用户可以从中选择一个项目的列表。让我们通过下面的示例看看如何实现这一点。我们将添加一个用于男/女选项的单选按钮。

步骤1) 第一步是从工具箱中将“单选按钮”控件拖到 Web 表单上(见下图)。请确保添加两个单选按钮,一个用于“男”,另一个用于“女”。

单选按钮

步骤2) 添加 Radiobutton 后,更改“text”属性。

  • 单击“单选按钮控件”转到属性窗口。
  • 将单选按钮的文本属性更改为“男”。
  • 重复上述步骤,将其更改为“女性”。
  • 另外,将相应控件的 ID 属性更改为 rdMale 和 rdFemale。

单选按钮

完成上述更改后,您将看到以下输出。

输出:-

单选按钮

从输出结果可以清楚地看出,单选按钮已添加到表单中。

复选框

复选框用于提供选项列表,用户可以从中选择多个选项。让我们通过下面的示例看看如何实现它。我们将向 Web 表单添加两个复选框。这些复选框将为用户提供一个选项,让他们选择是否要学习 C# 或 ASP.Net。

步骤1) 第一步是从工具箱中将复选框控件拖到 Web 表单上,如下图所示。

复选框

步骤2) 添加复选框后,更改复选框 ID 属性。

  • 通过单击 Checkbox 控件转到属性窗口。
  • 将各个控件的ID属性更改为“chkC”和“chkASP”。

另外,将 Checkbox 控件的文本属性更改为“C#”。对另一个 Checkbox 控件执行相同操作,并将其更改为“ASP.Net”。

  1. 将复选框的 ID 属性更改为“chkASP”。

复选框

  1. 将复选框的 ID 属性更改为 chkC。

复选框

复选框

完成上述更改后,您将看到以下输出。

输出:-

复选框

从输出结果可以清楚地看出,复选框已添加到表单中。

按键

按钮用于允许用户点击,点击后即可开始处理表单。让我们看看如何在下面的示例中实现这一点。我们将添加一个名为“提交”的简单按钮。此按钮将用于提交表单中的所有信息。

步骤1) 第一步是从工具箱中将按钮控件拖到 Web 表单上,如下图所示。

按键

步骤2) 添加按钮后,单击按钮控件进入属性窗口。将按钮控件的文本属性更改为 Submit。此外,将按钮的 ID 属性更改为“btnSubmit”。

按键

完成上述更改后,您将看到以下输出。

输出:-

按键

从输出中,您可以清楚地看到按钮已添加到表单中。

ASP.Net 中的事件处理程序

使用 Web 表单时,您可以向控件添加事件。事件是执行操作时发生的事件。最常见的操作可能是单击表单上的按钮。

在 Web 表单中,您可以向相应的 aspx.cs 文件中添加代码。此代码可用于在表单上按下按钮时执行某些操作。这通常是 Web 表单中最常见的事件。让我们看看如何实现这一点。

我们将简化这一过程。只需向按钮控件添加一个事件,以显示用户输入的名称。让我们按照以下步骤实现这一点。

步骤1) 首先,您必须双击 Web 窗体上的按钮。这将在 Visual Studio 中调出该按钮的事件代码。

ASP.Net 中的事件处理程序

当您在 Web 表单设计器中双击按钮时,Visual Studio 会自动添加 btnSubmit_Click 事件。

步骤2) 现在让我们向提交事件添加代码以显示名称文本框的值和用户选择的位置。

ASP.Net 中的事件处理程序

protected void btnSubmit_Click(object sender, EventArgs e)
{
	Response.Write(txtName.Text + "<br/>");

	Response.Write(lstLocation.SelectedItem.Text + "<br/>");

	lblName.Visible = false;
	txtName.Visible = false;
	lstLocation.Visible = false;
	chkC.Visible = false;
	chkASP.Visible = false;
	rdFemale.Visible = false;
	btnSubmit.Visible = false;
}

Code 解释:-

  1. 上面的代码执行的是最简单的操作。它获取“名称”文本框控件的值,并通过 Response 对象将其发送给客户端。因此,如果您想输入字符串“Guru如果名称文本框中的值为“99”,则 txtName.Text 的值将为“Guru99 '。
  2. 下一行代码通过属性“lstLocation.SelectedItem.Text”获取列表框的选定值。然后,它通过 Response.Write 方法将此值写回客户端。
  3. 最后,我们将表单上的所有控件都隐藏起来。如果不这样做,所有控件以及响应值都会同时显示。通常情况下,当用户在表单上输入姓名、地点、性别等信息后,下一页应该只显示用户未输入的信息。用户不希望再次看到姓名、性别和地点控件。但是 ASP.NET 并不了解这一点,因此默认情况下,当用户点击“提交”按钮时,它会再次显示所有控件。所以,我们需要编写代码来确保所有控件都被隐藏,以便用户只看到所需的输出。

完成上述更改后,您将看到以下输出。

输出:-

ASP.Net 中的事件处理程序

在“输出”屏幕中,执行以下步骤:

  1. 请说出名字 Guru在名称文本框中输入 99。
  2. 在班加罗尔的列表框中选择一个地点。
  3. 单击“提交”按钮。

ASP.Net 中的事件处理程序

这样做之后,你就会看到“Guru页面上显示数字“99”和地点“班加罗尔”。

常见问题

是的。AI 助手可以根据描述生成标签、文本框和按钮的 aspx 标记,以及相应的后台事件处理程序代码。 Rev查看生成的控件 ID 和事件连接,确保它们与您的表单匹配。

是的。请描述您需要的输入,人工智能工具可以推荐合适的控件,例如用于单选的单选按钮或复选框。Box 对于多选题,请确认建议符合您的验证和辅助功能要求。

HTML控件在客户端作为普通的HTML元素运行。服务器控件具有runat="server"属性,因此ASP.NET会在服务器端处理它们,为它们分配一个唯一的ID,并公开可在代码隐藏中处理的属性和事件。

使用 SelectedItem 属性,例如,使用 lstLocation.SelectedItem.Text 获取显示文本,或使用 lstLocation.SelectedValue 获取值。在用户做出选择后,在服务器事件(例如按钮点击事件处理程序)中读取该属性。

总结一下这篇文章: