ASP.NET-Steuerelemente: ÜberprüfenBox, RadioButton, ListeBox

Hinzufügen von ASP.Net-Steuerelementen zu Webformularen

ASP.NET bietet die Möglichkeit, einem Formular Steuerelemente wie Textfelder und Beschriftungen hinzuzufügen.

Schauen wir uns nun die anderen für Web Forms verfügbaren Steuerelemente an und betrachten wir einige ihrer gemeinsamen Eigenschaften.

In unserem Beispiel erstellen wir ein Formular mit der folgenden Funktionalität.

1. Die Möglichkeit für den Benutzer, seinen Namen einzugeben.
2. Eine Option zur Auswahl der Stadt, in der der Nutzer wohnt.
3. Die Möglichkeit für den Benutzer, eine Option für das Geschlecht einzugeben.
4. Eine Option zur Auswahl eines Kurses, den der Benutzer lernen möchte. Für beides wird es Auswahlmöglichkeiten geben C# und ASP.NET.

Schauen wir uns jedes Steuerelement im Detail an. Fügen wir sie hinzu, um das Formular mit der oben genannten Funktionalität zu erstellen.

Schritt 1) Der erste Schritt besteht darin, den Formular-Designer für das Demo-Webformular zu öffnen. Sobald Sie dies getan haben, können Sie Steuerelemente aus der Toolbox in das Web-Formular.

So öffnen Sie das Designer-Webformular:

• Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die Datei Demo.aspx, und
• Wählen Sie die Menüoption Designer anzeigen.

Sobald Sie den obigen Schritt ausgeführt haben, wird Ihr Formular-Designer wie unten gezeigt angezeigt.

Jetzt fügen wir nacheinander unsere Steuerelemente hinzu.

Etikettenkontrolle

Das Label-Steuerelement dient dazu, dem Benutzer auf dem Formular einen Text oder eine Nachricht anzuzeigen. Es wird üblicherweise zusammen mit anderen Steuerelementen verwendet. Ein gängiges Beispiel ist die Verwendung eines Labels neben einem Textfeld. Das Label gibt dem Benutzer einen Hinweis darauf, was im Textfeld eingegeben werden soll. Im folgenden Beispiel sehen wir uns die Implementierung an. Wir verwenden ein Label namens „Name“. Dieses wird zusammen mit den Textfeldern verwendet, die später hinzugefügt werden.

Schritt 1) Der erste Schritt besteht darin, das Steuerelement „label“ aus der Toolbox auf das Webformular zu ziehen, wie unten dargestellt.

Schritt 2) Nachdem das Etikett hinzugefügt wurde, führen Sie die folgenden Schritte aus.

1. Klicken Sie mit der rechten Maustaste auf das Label-Steuerelement, um zum Eigenschaftenfenster zu gelangen.
2. Wählen Sie die Menüoption Eigenschaften.

Schritt 3) Ändern Sie im Eigenschaftenfenster den Wert der Eigenschaft „Text“ in „Name“.

Ändern Sie auf ähnliche Weise auch den ID-Eigenschaftswert des Steuerelements in lblName. Durch die Angabe einer aussagekräftigen ID für Steuerelemente wird der Zugriff darauf während der Codierungsphase einfacher. Dies wird unten gezeigt.

Sobald Sie die oben genannten Änderungen vorgenommen haben, wird Ihnen die folgende Ausgabe angezeigt.

Ausgabe:-

Sie werden sehen, dass die Bezeichnung „Name“ im Webformular angezeigt wird.

Textfeld

Ein Textfeld ermöglicht es einem Benutzer, Text in die Webformularanwendung einzugeben. Sehen wir uns anhand des unten gezeigten Beispiels an, wie wir dies implementieren können. Wir werden dem Formular ein Textfeld hinzufügen, in das der Benutzer seinen Namen eingeben kann.

Schritt 1) Der erste Schritt besteht darin, das Textfeld-Steuerelement aus der Toolbox auf das Webformular zu ziehen, wie unten dargestellt.

Nachfolgend sehen Sie, wie dies im Formulardesigner aussehen würde, sobald sich das Textfeld-Steuerelement im Formular befindet.

Schritt 2) Nachdem das Textfeld hinzugefügt wurde, müssen Sie die ID-Eigenschaft ändern.

• Klicken Sie mit der rechten Maustaste auf das Textfeld-Steuerelement, um das Eigenschaftenfenster zu öffnen, und
• Wählen Sie Eigenschaften, dann
• Ändern Sie die ID-Eigenschaft des Textfelds in txtName.

Sobald Sie die oben genannten Änderungen vorgenommen haben, sehen Sie die folgende Ausgabe.

Ausgabe:-

Listenfeld

Eine Listbox wird verwendet, um eine Liste von Elementen im Webformular anzuzeigen. Sehen wir uns anhand des unten gezeigten Beispiels an, wie wir dies implementieren können. Wir werden dem Formular eine Listbox hinzufügen, um einige Städtestandorte zu speichern.

Schritt 1) Der erste Schritt besteht darin, das Listenfeld-Steuerelement aus der Toolbox auf das Webformular zu ziehen, wie unten dargestellt.

Schritt 2) Sobald Sie die Auswahlliste in das Formular gezogen haben, erscheint ein separates Seitenmenü. Wählen Sie in diesem Menü den Menüpunkt „Elemente bearbeiten“.

Schritt 3) Ihnen wird nun ein Dialogfeld angezeigt, in dem Sie die Listenelemente zur Listbox hinzufügen können.

1. Klicken Sie auf die Schaltfläche „Hinzufügen“, um ein Listenelement hinzuzufügen.
2. Geben Sie dem Textwert des Listenelements einen Namen – in unserem Fall Mumbai. Wiederholen Sie die Schritte 1 und 2, um Listenelemente für Mangalore und Hyderabad hinzuzufügen.
3. Klicken Sie auf die Schaltfläche OK.

Schritt 4) Wechseln Sie zum Eigenschaftenfenster und ändern Sie den Wert der ID-Eigenschaft des Steuerelements in lstLocation.

Sobald Sie die oben genannten Änderungen vorgenommen haben, wird Ihnen die folgende Ausgabe angezeigt.

Ausgabe:-

Aus der Ausgabe ist deutlich ersichtlich, dass die Listbox dem Formular hinzugefügt wurde.

RadioButton

Mit einem Optionsfeld wird eine Liste von Elementen angezeigt, aus denen der Benutzer eines auswählen kann. Sehen wir uns anhand des unten gezeigten Beispiels an, wie wir dies umsetzen können. Wir werden ein Optionsfeld für eine männliche/weibliche Option hinzufügen.

Schritt 1) Im ersten Schritt ziehen Sie das Optionsfeld-Steuerelement aus der Toolbox auf das Webformular (siehe Abbildung unten). Fügen Sie zwei Optionsfelder hinzu, eines für die Option „Männlich“ und das andere für „Weiblich“.

Schritt 2) Sobald der Radiobutton hinzugefügt wurde, ändern Sie die Eigenschaft „text“.

• Gehen Sie zum Eigenschaftenfenster, indem Sie auf das „Radiobutton-Steuerelement“ klicken.
• Ändern Sie die Texteigenschaft des Optionsfelds in „Männlich“.
• Wiederholen Sie den gleichen Schritt, um die Einstellung auf „Weiblich“ zu ändern.
• Ändern Sie außerdem die ID-Eigenschaften der jeweiligen Steuerelemente in rdMale und rdFemale.

Sobald Sie die oben genannten Änderungen vorgenommen haben, wird Ihnen die folgende Ausgabe angezeigt.

Ausgabe:-

Aus der Ausgabe ist deutlich zu erkennen, dass dem Formular ein Optionsfeld hinzugefügt wurde.

Checkbox

Eine Checkbox dient dazu, eine Liste von Optionen bereitzustellen, aus der der Benutzer mehrere auswählen kann. Sehen wir uns anhand des folgenden Beispiels an, wie wir dies umsetzen können. Wir fügen unseren Webformularen zwei Checkboxen hinzu. Diese Checkboxen bieten dem Benutzer die Möglichkeit an, anzugeben, ob er etwas lernen möchte. C# oder ASP.Net.

Schritt 1) Der erste Schritt besteht darin, das Kontrollkästchen-Steuerelement aus der Toolbox auf das Webformular zu ziehen, wie unten dargestellt.

Schritt 2) Sobald die Kontrollkästchen hinzugefügt wurden, ändern Sie die Kontrollkästchen-ID-Eigenschaft.

• Gehen Sie zum Eigenschaftenfenster, indem Sie auf das Kontrollkästchen-Steuerelement klicken.
• Ändern Sie die ID-Eigenschaften der jeweiligen Steuerelemente in „chkC“ und „chkASP“.

Ändern Sie außerdem die Texteigenschaft des Kontrollkästchen-Steuerelements in „C#“. Machen Sie dasselbe für das andere Kontrollkästchen-Steuerelement und ändern Sie es in „ASP.Net“.

1. Ändern Sie die ID-Eigenschaft des Kontrollkästchens in 'chkASP'.

2. Ändern Sie die ID-Eigenschaft des Kontrollkästchens in chkC.

Sobald Sie die oben genannten Änderungen vorgenommen haben, wird Ihnen die folgende Ausgabe angezeigt.

Ausgabe:-

Aus der Ausgabe ist deutlich zu erkennen, dass dem Formular Kontrollkästchen hinzugefügt wurden.

Taste

Mithilfe eines Buttons kann der Benutzer auf eine Schaltfläche klicken, wodurch die Verarbeitung des Formulars gestartet wird. Sehen wir uns an, wie wir dies in unserem Beispiel unten umsetzen können. Wir fügen einen einfachen Button namens „Absenden“ hinzu. Mit diesem Button werden alle Informationen im Formular übermittelt.

Schritt 1) Der erste Schritt besteht darin, das Schaltflächen-Steuerelement aus der Toolbox auf das Webformular zu ziehen, wie unten dargestellt.

Schritt 2) Sobald die Schaltfläche hinzugefügt wurde, wechseln Sie zum Eigenschaftenfenster, indem Sie auf das Schaltflächensteuerelement klicken. Ändern Sie die Texteigenschaft des Schaltflächensteuerelements in „Senden“. Ändern Sie außerdem die ID-Eigenschaft der Schaltfläche in „btnSubmit“.

Sobald Sie die oben genannten Änderungen vorgenommen haben, wird Ihnen die folgende Ausgabe angezeigt.

Ausgabe:-

Anhand der Ausgabe können Sie deutlich erkennen, dass die Schaltfläche zum Formular hinzugefügt wurde.

Event-Handler in ASP.Net

Wenn Sie mit einem Webformular arbeiten, können Sie Ereignisse zu Steuerelementen hinzufügen. Ein Ereignis ist etwas, das passiert, wenn eine Aktion ausgeführt wird. Die wohl häufigste Aktion ist das Klicken auf eine Schaltfläche in einem Formular.

In Webformularen können Sie der entsprechenden aspx.cs-Datei Code hinzufügen. Dieser Code kann verwendet werden, um bestimmte Aktionen auszuführen, wenn eine Schaltfläche im Formular gedrückt wird. Dies ist im Allgemeinen das häufigste Ereignis in Web Forms. Mal sehen, wie wir das erreichen können.

Wir machen es einfach. Fügen Sie einfach ein Ereignis zur Schaltflächensteuerung hinzu, um den vom Benutzer eingegebenen Namen anzuzeigen. Befolgen Sie die folgenden Schritte, um dies zu erreichen.

Schritt 1) Zuerst müssen Sie auf die Schaltfläche im Webformular doppelklicken. Dadurch wird der Ereigniscode für die Schaltfläche in Visual Studio angezeigt.

Das btnSubmit_Click-Ereignis wird von Visual Studio automatisch hinzugefügt, wenn Sie im Web Forms Designer auf die Schaltfläche doppelklicken.

Schritt 2) Fügen wir nun dem Übermittlungsereignis Code hinzu, um den Wert des Namenstextfelds und den vom Benutzer gewählten Speicherort anzuzeigen.

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 Erläuterung:-

1. Die obige Codezeile erledigt die einfachste Aufgabe. Sie liest den Wert des Textfelds „Name“ aus und sendet ihn über das Response-Objekt an den Client. Wenn Sie also die Zeichenkette „Guru99” im Namenstextfeld, der Wert von txtName.Text wäre 'Guru99 '.
2. Die nächste Codezeile liest den ausgewählten Wert der Listbox über die Eigenschaft 'lstLocation.SelectedItem.Text' aus. Anschließend sendet sie diesen Wert über die Methode Response.Write zurück an den Client.
3. Abschließend blenden wir alle Steuerelemente des Formulars aus. Andernfalls werden alle Steuerelemente zusammen mit den Antwortwerten angezeigt. Normalerweise sollte die nächste Seite, nachdem ein Benutzer alle Informationen wie Name, Ort, Geschlecht usw. eingegeben hat, nur die nicht eingegebenen Daten enthalten. Der Benutzer möchte die Steuerelemente für Name, Geschlecht und Ort nicht erneut sehen. ASP.NET berücksichtigt dies jedoch nicht und zeigt daher standardmäßig alle Steuerelemente wieder an, sobald der Benutzer auf die Schaltfläche „Absenden“ klickt. Daher müssen wir Code schreiben, der sicherstellt, dass alle Steuerelemente ausgeblendet werden, sodass der Benutzer nur die gewünschte Ausgabe sieht.

Sobald Sie die oben genannten Änderungen vorgenommen haben, wird Ihnen die folgende Ausgabe angezeigt.

Ausgabe:-

Führen Sie im Ausgabefenster die folgenden Schritte aus:

1. Gib einen Namen an Guru99 im Namensfeld.
2. Wählen Sie einen Standort aus der Liste Bangalore aus.
3. Klicken Sie auf die Schaltfläche Senden.

Sobald Sie dies getan haben, werden Sie sehen:Guru99' und der auf der Seite angezeigte Standort 'Bangalore'.

Häufig gestellte Fragen