ASP.NET 控件:复选框、单选按钮、列表框、文本框、标签
为 Web Forms 添加 ASP.Net 控件
ASP.Net 能够将文本框和标签等控件添加到窗体中。
让我们看看 Web Forms 中可用的其他控件,并了解它们的一些常用属性。
在我们的示例中,我们将创建一个具有以下功能的窗体。
- 用户输入姓名的能力。
- 选择用户居住城市的选项
- 用户输入性别选项的能力。
- 选择用户想学习的课程的选项。将同时提供 C# 和 ASP.Net 的选项
让我们详细了解每个控件。让我们逐一添加它们来构建具有上述功能的窗体。
步骤 1) 第一步是打开 Demo Web 窗体的 Forms Designer。完成后,您就可以将控件从工具箱拖放到 Web 窗体上。
打开 Designer Web 窗体,
- 在 Solution Explorer 中右键单击 Demo.aspx 文件,然后
- 选择菜单选项 View Designer。
执行上述步骤后,您将看到如下所示的 Form Designer。
现在让我们开始一个一个地添加控件
Label 控件
Label 控件用于在窗体上向用户显示文本或消息。Label 控件通常与其他控件一起使用。常见的例子是,Label 和 textbox 控件一起添加。Label 向用户指示将在 textbox 中填写什么。让我们通过下面的示例了解如何实现这一点。我们将使用一个名为“name”的 label。它将与后续部分中将添加的 textbox 控件结合使用。
步骤 1) 第一步是从工具箱将“label”控件拖到 Web Form 上,如下所示。
步骤 2) 添加 Label 后,请按照以下步骤操作。
- 通过右键单击 Label 控件进入属性窗口
- 选择 Properties 菜单选项
步骤 3) 在属性窗口中,将 Text 属性的名称更改为 Name
同样,也将控件的 ID 属性值更改为 lblName。通过为控件指定有意义的 ID,在编码阶段访问它们会更容易。如下所示。
进行上述更改后,您将看到以下输出:
输出:-
您将看到 Web Form 上出现了 Name Label。
文本框
文本框用于允许用户在 Web 窗体应用程序中输入文本。让我们通过下面的示例了解如何实现这一点。我们将向窗体添加一个文本框,用户可以在其中输入他们的姓名。
步骤 1) 第一步是从工具箱将 textbox 控件拖到 Web Form 上,如下所示。
当 Textbox 控件在窗体上时,它在窗体设计器中的样子如下。
步骤 2) 添加 Textbox 后,您需要更改 ID 属性。
- 通过右键单击 Textbox 控件进入属性窗口,然后
- 选择 Properties,然后
- 将文本框的 id 属性更改为 txtName。
进行以上更改后,您将看到以下输出。
输出:-
列表框
Listbox 用于在 Web Form 上展示项目列表。让我们通过下面的示例了解如何实现这一点。我们将向窗体添加一个列表框来存储一些城市位置。
步骤 1) 第一步是从工具箱将 list box 控件拖到 Web Form 上,如下所示。
步骤 2) 将 listbox 拖到窗体后,会出现一个单独的侧边菜单。在此菜单中选择“Edit Items”菜单。
步骤 3) 现在会出现一个对话框,您可以在其中将列表项添加到 listbox 中。
- 单击 Add 按钮添加列表项。
- 为列表项的文本值命名 – 在我们的例子中是 Mumbai。重复步骤 1 和 2 以添加 Mangalore 和 Hyderabad 的列表项。
- 单击 OK 按钮
步骤 4) 进入属性窗口,将控件的 ID 属性值更改为 lstLocation。
进行上述更改后,您将看到以下输出:
输出:-
从输出中,您可以清楚地看到 Listboxes 已添加到窗体中。
单选按钮
Radio button 用于展示一个项目列表,用户可以从中选择一项。让我们通过下面的示例了解如何实现这一点。我们将为男性/女性选项添加一个单选按钮。
步骤 1) 第一步是从工具箱将“radiobutton”控件拖到 Web Form 上。(见下图)。确保添加 2 个单选按钮,一个用于“Male”选项,另一个用于“Female”。
步骤 2) 添加 Radiobutton 后,更改“text”属性。
- 通过单击“Radiobutton control”进入属性窗口。
- 将单选按钮的 text 属性更改为“Male”。
- 重复相同的步骤,将其更改为“Female”。
- 同样,将相应控件的 ID 属性更改为 rdMale 和 rdFemale。
进行上述更改后,您将看到以下输出:
输出:-
从输出中,您可以清楚地看到单选按钮已添加到窗体中。
复选框
Checkbox 用于提供一个选项列表,用户可以选择多个选项。让我们通过下面的示例了解如何实现这一点。我们将向我们的 Web Forms 添加 2 个复选框。这些复选框将为用户提供一个选项,询问他们是否想学习 C# 或 ASP.Net。
步骤 1) 第一步是从工具箱将 checkbox 控件拖到 Web Form 上,如下所示。
步骤 2) 添加 Checkboxes 后,将 checkbox id 属性更改为“chkASP”。
- 通过单击 Checkbox 控件进入属性窗口。
- 将相应控件的 ID 属性更改为“chkC”和“chkASP”。
同样,将 Checkbox 控件的 text 属性更改为“C#”。对另一个 Checkbox 控件执行相同的操作,并将其更改为“ASP.Net”。
- 将 checkbox 的 ID 属性更改为“chkASP”
- 将 checkbox 的 ID 属性更改为 chkC
进行上述更改后,您将看到以下输出:
输出:-
从输出中,您可以清楚地看到 Checkboxes 已添加到窗体中。
按钮
Button 用于允许用户单击一个按钮,该按钮将启动窗体的处理。让我们通过我们当前的示例了解如何实现这一点,如下所示。我们将添加一个名为“Submit”的简单按钮。它将用于提交窗体上的所有信息。
步骤 1) 第一步是从工具箱将 button 控件拖到 Web Form 上,如下所示。
步骤 2) 添加按钮后,通过单击按钮控件进入属性窗口。将按钮控件的 text 属性更改为 Submit。同样,将按钮的 ID 属性更改为“btnSubmit”。
进行上述更改后,您将看到以下输出:
输出:-
从输出中,您可以清楚地看到按钮已添加到窗体中。
ASP.Net 中的事件处理程序
在处理 Web Form 时,您可以为控件添加事件。事件是在执行操作时发生的事情。最常见的操作可能是单击窗体上的按钮。
在 Web Forms 中,您可以将代码添加到相应的 aspx.cs 文件中。当窗体上的按钮被按下时,此代码可用于执行某些操作。这通常是 Web Forms 中最常见的事件。让我们看看如何实现这一点。
我们将使其简单化。只需为按钮控件添加一个事件,以显示用户输入的姓名。让我们按照以下步骤来实现。
步骤 1) 首先,您需要双击 Web Form 上的 Button。这将打开 Visual Studio 中按钮的事件代码。
当您在 Web Forms 设计器中双击按钮时,Visual Studio 会自动添加 btnSubmit_Click 事件。
步骤 2) 让我们现在向 submit 事件添加代码,以显示姓名文本框的值和用户选择的位置。
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; }
代码解释:
- 上面的代码行执行最简单的操作。它获取 Name 文本框控件的值,并通过 Response 对象将其发送到客户端。因此,如果您想在 name 文本框中输入字符串“Guru99”,则 txtName 的值。文本将是“Guru99”。
- 下一行代码通过“lstLocation.SelectedItem.text”属性获取列表框的选定值。然后,它通过 Response.Write 方法将该值写回客户端。
- 最后,我们将窗体上的所有控件设为不可见。如果我们不这样做,所有控件以及我们的响应值将一起显示。通常,当一个人在窗体上输入所有信息,如姓名、位置、性别等时,然后显示给用户的新页面应该只包含未输入的信息。用户不想再次看到姓名、性别、位置控件。但 ASP.Net 不知道这一点,因此,默认情况下,当用户单击 Submit 按钮时,它将再次显示所有控件。因此,我们需要编写代码来确保所有控件都隐藏起来,以便用户仅看到期望的输出。
进行上述更改后,您将看到以下输出。
输出:-
在输出屏幕中,请执行以下步骤。
- 在 name 文本框中输入 Guru99
- 在列表框中选择 Bangalore
- 单击 Submit 按钮
完成此操作后,您将在页面上看到“Guru99”和位置“Bangalore”。
摘要
- 在 ASP.Net 中,您可以将标准控件添加到窗体,如 labels、textboxes、listboxes 等。
- 每个控件都可以关联一个事件。最常见的事件是按钮点击事件。当信息需要提交到 Web 服务器时使用它。