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

为 Web Forms 添加 ASP.Net 控件

ASP.Net 能够将文本框和标签等控件添加到窗体中。

让我们看看 Web Forms 中可用的其他控件,并了解它们的一些常用属性。

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

  1. 用户输入姓名的能力。
  2. 选择用户居住城市的选项
  3. 用户输入性别选项的能力。
  4. 选择用户想学习的课程的选项。将同时提供 C# 和 ASP.Net 的选项

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

步骤 1) 第一步是打开 Demo Web 窗体的 Forms Designer。完成后,您就可以将控件从工具箱拖放到 Web 窗体上。

打开 Designer Web 窗体,

  • 在 Solution Explorer 中右键单击 Demo.aspx 文件,然后
  • 选择菜单选项 View Designer。

Adding ASP.Net Controls to Web Forms

执行上述步骤后,您将看到如下所示的 Form Designer。

Adding ASP.Net Controls to Web Forms

现在让我们开始一个一个地添加控件

Label 控件

Label 控件用于在窗体上向用户显示文本或消息。Label 控件通常与其他控件一起使用。常见的例子是,Label 和 textbox 控件一起添加。Label 向用户指示将在 textbox 中填写什么。让我们通过下面的示例了解如何实现这一点。我们将使用一个名为“name”的 label。它将与后续部分中将添加的 textbox 控件结合使用。

步骤 1) 第一步是从工具箱将“label”控件拖到 Web Form 上,如下所示。

Label Control

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

  1. 通过右键单击 Label 控件进入属性窗口
  2. 选择 Properties 菜单选项

Label Control

步骤 3) 在属性窗口中,将 Text 属性的名称更改为 Name

Label Control

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

Label Control

进行上述更改后,您将看到以下输出:

输出:-

Label Control

您将看到 Web Form 上出现了 Name Label。

文本框

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

步骤 1) 第一步是从工具箱将 textbox 控件拖到 Web Form 上,如下所示。

Textbox

当 Textbox 控件在窗体上时,它在窗体设计器中的样子如下。

Textbox

步骤 2) 添加 Textbox 后,您需要更改 ID 属性。

  • 通过右键单击 Textbox 控件进入属性窗口,然后
  • 选择 Properties,然后
  • 将文本框的 id 属性更改为 txtName。

Textbox

进行以上更改后,您将看到以下输出。

输出:-

Textbox

列表框

Listbox 用于在 Web Form 上展示项目列表。让我们通过下面的示例了解如何实现这一点。我们将向窗体添加一个列表框来存储一些城市位置。

步骤 1) 第一步是从工具箱将 list box 控件拖到 Web Form 上,如下所示。

List box

步骤 2) 将 listbox 拖到窗体后,会出现一个单独的侧边菜单。在此菜单中选择“Edit Items”菜单。

List box

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

  1. 单击 Add 按钮添加列表项。
  2. 为列表项的文本值命名 – 在我们的例子中是 Mumbai。重复步骤 1 和 2 以添加 Mangalore 和 Hyderabad 的列表项。
  3. 单击 OK 按钮

List box

步骤 4) 进入属性窗口,将控件的 ID 属性值更改为 lstLocation

List box

进行上述更改后,您将看到以下输出:

输出:-

List box

从输出中,您可以清楚地看到 Listboxes 已添加到窗体中。

单选按钮

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

步骤 1) 第一步是从工具箱将“radiobutton”控件拖到 Web Form 上。(见下图)。确保添加 2 个单选按钮,一个用于“Male”选项,另一个用于“Female”。

RadioButton

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

  • 通过单击“Radiobutton control”进入属性窗口。
  • 将单选按钮的 text 属性更改为“Male”。
  • 重复相同的步骤,将其更改为“Female”。
  • 同样,将相应控件的 ID 属性更改为 rdMale 和 rdFemale。

RadioButton

进行上述更改后,您将看到以下输出:

输出:-

RadioButton

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

复选框

Checkbox 用于提供一个选项列表,用户可以选择多个选项。让我们通过下面的示例了解如何实现这一点。我们将向我们的 Web Forms 添加 2 个复选框。这些复选框将为用户提供一个选项,询问他们是否想学习 C# 或 ASP.Net。

步骤 1) 第一步是从工具箱将 checkbox 控件拖到 Web Form 上,如下所示。

Checkbox

步骤 2) 添加 Checkboxes 后,将 checkbox id 属性更改为“chkASP”。

  • 通过单击 Checkbox 控件进入属性窗口。
  • 将相应控件的 ID 属性更改为“chkC”和“chkASP”。

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

  1. 将 checkbox 的 ID 属性更改为“chkASP”

Checkbox

  1. 将 checkbox 的 ID 属性更改为 chkC

Checkbox

Checkbox

进行上述更改后,您将看到以下输出:

输出:-

Checkbox

从输出中,您可以清楚地看到 Checkboxes 已添加到窗体中。

按钮

Button 用于允许用户单击一个按钮,该按钮将启动窗体的处理。让我们通过我们当前的示例了解如何实现这一点,如下所示。我们将添加一个名为“Submit”的简单按钮。它将用于提交窗体上的所有信息。

步骤 1) 第一步是从工具箱将 button 控件拖到 Web Form 上,如下所示。

Button

步骤 2) 添加按钮后,通过单击按钮控件进入属性窗口。将按钮控件的 text 属性更改为 Submit。同样,将按钮的 ID 属性更改为“btnSubmit”。

Button

进行上述更改后,您将看到以下输出:

输出:-

Button

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

ASP.Net 中的事件处理程序

在处理 Web Form 时,您可以为控件添加事件。事件是在执行操作时发生的事情。最常见的操作可能是单击窗体上的按钮。

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

我们将使其简单化。只需为按钮控件添加一个事件,以显示用户输入的姓名。让我们按照以下步骤来实现。

步骤 1) 首先,您需要双击 Web Form 上的 Button。这将打开 Visual Studio 中按钮的事件代码。

Event Handler in ASP.Net

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

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

Event Handler in 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;
}

代码解释:

  1. 上面的代码行执行最简单的操作。它获取 Name 文本框控件的值,并通过 Response 对象将其发送到客户端。因此,如果您想在 name 文本框中输入字符串“Guru99”,则 txtName 的值。文本将是“Guru99”。
  2. 下一行代码通过“lstLocation.SelectedItem.text”属性获取列表框的选定值。然后,它通过 Response.Write 方法将该值写回客户端。
  3. 最后,我们将窗体上的所有控件设为不可见。如果我们不这样做,所有控件以及我们的响应值将一起显示。通常,当一个人在窗体上输入所有信息,如姓名、位置、性别等时,然后显示给用户的新页面应该只包含未输入的信息。用户不想再次看到姓名、性别、位置控件。但 ASP.Net 不知道这一点,因此,默认情况下,当用户单击 Submit 按钮时,它将再次显示所有控件。因此,我们需要编写代码来确保所有控件都隐藏起来,以便用户仅看到期望的输出。

进行上述更改后,您将看到以下输出。

输出:-

Event Handler in ASP.Net

在输出屏幕中,请执行以下步骤。

  1. 在 name 文本框中输入 Guru99
  2. 在列表框中选择 Bangalore
  3. 单击 Submit 按钮

Event Handler in ASP.Net

完成此操作后,您将在页面上看到“Guru99”和位置“Bangalore”。

摘要

  • ASP.Net 中,您可以将标准控件添加到窗体,如 labels、textboxes、listboxes 等。
  • 每个控件都可以关联一个事件。最常见的事件是按钮点击事件。当信息需要提交到 Web 服务器时使用它。