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

Hinzufügen von ASP.Net-Steuerelementen zu Webformularen

ASP.Net bietet die Möglichkeit, Steuerelemente zu einem Formular wie Text hinzuzufügenboxEs und Etiketten.

Schauen wir uns die anderen für Webformulare verfügbaren Steuerelemente an und sehen wir uns einige ihrer gemeinsamen Eigenschaften an.

In unserem Beispiel erstellen wir ein Formular mit folgendem Inhaltwing Funktionalität.

  1. Die Möglichkeit für den Benutzer, seinen Namen einzugeben.
  2. Eine Option zur Auswahl der Stadt, in der der Benutzer 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 Forms Designer für das Demo-Webformular zu öffnen. Sobald Sie dies getan haben, können Sie Steuerelemente aus dem Tool ziehenbox zu den Web-Formular.

Um das Designer-Webformular zu öffnen,

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

Hinzufügen von ASP.Net-Steuerelementen zu Webformularen

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

Hinzufügen von ASP.Net-Steuerelementen zu Webformularen

Beginnen wir nun damit, unsere Steuerelemente nacheinander hinzuzufügen

Etikettenkontrolle

Das Label-Control wird verwendet, um dem Benutzer einen Text oder eine Nachricht auf dem Formular anzuzeigen. Das Label-Steuerelement wird normalerweise zusammen mit anderen Steuerelementen verwendet. Häufige Beispiele sind das Hinzufügen einer Beschriftung zusammen mit dem Textbox Kontrolle. Die Beschriftung gibt dem Benutzer einen Hinweis darauf, was im Text erwartet wirdbox. Sehen wir uns anhand des unten gezeigten Beispiels an, wie wir dies umsetzen können. Wir werden eine Bezeichnung namens „Name“ verwenden. Dies wird in Verbindung mit dem Text verwendetbox Steuerelemente, die in der hinzugefügt werden later .

Schritt 1) Der erste Schritt besteht darin, das „Label“-Steuerelement aus dem Tool auf das Webformular zu ziehenbox wie unten gezeigt.

Etikettenkontrolle

Schritt 2) Sobald das Etikett hinzugefügt wurde, befolgen Sie die folgenden Schrittewing Schritte.

  1. Gehen Sie zum Eigenschaftenfenster, indem Sie mit der rechten Maustaste auf das Label-Steuerelement klicken
  2. Wählen Sie die Menüoption Eigenschaften

Etikettenkontrolle

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

Etikettenkontrolle

Ä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.

Etikettenkontrolle

Sobald Sie die oben genannten Änderungen vorgenommen haben, wird Folgendes angezeigtwing Ausgabe

Ausgabe:-

Etikettenkontrolle

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

Textbox

Ein Text box wird für Allo verwendetwing einem Benutzer, Text in die Webformularanwendung einzugeben. Sehen wir uns anhand des unten gezeigten Beispiels an, wie wir dies umsetzen können. Wir werden einen Text hinzufügenbox zum Formular, in das der Benutzer seinen Namen eingeben kann.

Schritt 1) Der erste Schritt besteht darin, den Text zu ziehenbox Steuerung aus dem Tool auf das Webformular übertragenbox Wie nachfolgend dargestellt

Textbox

Unten sehen Sie, wie dies nach dem Text im Formulardesigner aussehen würdebox Die Kontrolle liegt auf dem Formular

Textbox

Schritt 2) Einmal der Textbox hinzugefügt wurde, müssen Sie die ID-Eigenschaft ändern.

  • Gehen Sie zum Eigenschaftenfenster, indem Sie mit der rechten Maustaste auf den Text klickenbox Kontrolle und
  • Wählen Sie dann Eigenschaften
  • Ändern Sie die ID-Eigenschaft des Textesbox zu txtName.

Textbox

Sobald Sie die oben genannten Änderungen vorgenommen haben, wird Folgendes angezeigtwing Ausgabe.

Ausgabe:-

Textbox

Liste box

Eine Listebox wird verwendet, um eine Liste von Elementen im Webformular anzuzeigen. Sehen wir uns anhand des unten gezeigten Beispiels an, wie wir dies umsetzen können. Wir werden eine Liste hinzufügen box zum Formular, um einige Stadtstandorte zu speichern.

Schritt 1) Der erste Schritt besteht darin, die Liste zu ziehen box Steuerung aus dem Tool auf das Webformular übertragenbox Wie nachfolgend dargestellt

Liste box

Schritt 2) Sobald Sie die Liste ziehenbox Zum Formular erscheint ein separates Seitenmenü. Wählen Sie in diesem Menü das Menü „Elemente bearbeiten“.

Liste box

Schritt 3) Nun wird Ihnen ein Dialog angezeigt box in dem Sie die Listenelemente zur Liste hinzufügen könnenbox.

  1. Klicken Sie auf die Schaltfläche „Hinzufügen“, um ein Listenelement hinzuzufügen.
  2. Geben Sie einen Namen für den Textwert des Listenelements ein – 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

Liste box

Schritt 4) Gehen Sie zum Eigenschaftenfenster und ändern Sie den ID-Eigenschaftswert des Steuerelements in lstLocation.

Liste box

Sobald Sie die oben genannten Änderungen vorgenommen haben, wird Folgendes angezeigtwing Ausgabe

Ausgabe:-

Liste box

Aus der Ausgabe können Sie deutlich erkennen, dass die Listeboxes wurde dem Formular hinzugefügt.

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) Der erste Schritt besteht darin, das „Radiobutton“-Steuerelement aus dem Tool auf das Webformular zu ziehenbox. (siehe Bild unten). Stellen Sie sicher, dass Sie zwei Optionsfelder hinzufügen, eines für die Option „Männlich“ und das andere für „Weiblich“.

RadioButton

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 ihn in „Weiblich“ zu ändern.
  • Ändern Sie außerdem die ID-Eigenschaften der jeweiligen Steuerelemente in rdMale und rdFemale.

RadioButton

Sobald Sie die oben genannten Änderungen vorgenommen haben, wird Folgendes angezeigtwing Ausgabe

Ausgabe:-

RadioButton

Anhand der Ausgabe können Sie deutlich erkennen, dass das Optionsfeld zum Formular hinzugefügt wurde

Shaubox

Ein Testbox wird verwendet, um eine Liste von Optionen bereitzustellen, in der der Benutzer mehrere Optionen auswählen kann. Sehen wir uns anhand des unten gezeigten Beispiels an, wie wir dies umsetzen können. Wir werden 2 Schecks hinzufügenboxes zu unseren Webformularen. Diese prüfenboxEs bietet dem Benutzer die Möglichkeit, zu entscheiden, ob er lernen möchte C# oder ASP.Net.

Schritt 1) Der erste Schritt besteht darin, den Scheck zu ziehenbox Steuerung aus dem Tool auf das Webformular übertragenbox Wie nachfolgend dargestellt

Shaubox

Schritt 2) Einmal der ScheckboxEs wurden hinzugefügt, ändern Sie das Häkchenbox id-Eigenschaft zu „chkASP“ hinzufügen.

  • Gehen Sie zum Eigenschaftenfenster, indem Sie auf „Prüfen“ klickenbox steuern.
  • Ändern Sie die ID-Eigenschaften der jeweiligen Steuerelemente in „chkC“ und „chkASP“.

Ändern Sie außerdem die Texteigenschaft des Schecksbox Steuerung auf „C#“. Machen Sie dasselbe für den anderen Scheckbox steuern und in „ASP.Net“ ändern.

  1. Ändern Sie die ID-Eigenschaft des Schecksbox zu 'chkASP'

Shaubox

  1. Ändern Sie die ID-Eigenschaft des Schecksbox zu chkC

Shaubox

Shaubox

Sobald Sie die oben genannten Änderungen vorgenommen haben, wird Folgendes angezeigtwing Ausgabe

Ausgabe:-

Shaubox

Aus der Ausgabe können Sie deutlich erkennen, dass der Checkboxes wurde dem Formular hinzugefügt.

Taste

Eine Schaltfläche wird verwendet, um dem Benutzer die Möglichkeit zu geben, auf eine Schaltfläche zu klicken, die dann die Verarbeitung des Formulars startet. Sehen wir uns an, wie wir dies anhand unseres aktuellen Beispiels wie unten gezeigt umsetzen können. Wir werden eine einfache Schaltfläche namens „Senden“ hinzufügen. Dies wird zur Übermittlung aller Informationen im Formular verwendet.

Schritt 1) Der erste Schritt besteht darin, das Schaltflächensteuerelement aus dem Tool auf das Webformular zu ziehenbox Wie nachfolgend dargestellt

Taste

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“.

Taste

Sobald Sie die oben genannten Änderungen vorgenommen haben, wird Folgendes angezeigtwing Ausgabe

Ausgabe:-

Taste

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 musst du double-Klicken Sie auf die Schaltfläche im Webformular. Dadurch wird der Ereigniscode für die Schaltfläche angezeigt Visual Studio.

Event-Handler in ASP.Net

Das btnSubmit_Click-Ereignis wird automatisch hinzugefügt von Visual Studio wenn Sie double Klicken Sie im Webformular-Designer auf die Schaltfläche.

Schritt 2) Fügen wir nun dem Submit-Ereignis Code hinzu, um den Namenstext anzuzeigenbox Wert und der vom Benutzer gewählte Ort.

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;
}

Code-Erklärung:-

  1. Die obige Codezeile macht das Einfachste. Es nimmt den Wert des Namenstextes anbox steuert und sendet es über das Response-Objekt an den Client. Wenn Sie also im Namenstext die Zeichenfolge „Guru99“ eingeben möchten box, der Wert von txtName. Ein Text wäre „Guru99“.
  2. Die nächste Codezeile übernimmt den ausgewählten Wert der Listebox über die Eigenschaft 'lstLocation.SelectedItem.text'. Anschließend schreibt es diesen Wert über die Response.Write-Methode zurück an den Client.
  3. Schließlich machen wir alle Steuerelemente im Formular unsichtbar. Wenn wir dies nicht tun, werden alle Steuerelemente und unsere Antwortwerte zusammen angezeigt. Normalerweise wird dem Benutzer die nächste Seite angezeigt, wenn eine Person alle Informationen in das Formular eingibt, z. B. Name, Standort, Geschlecht usw Es sollten nur die Informationen enthalten sein, die nicht eingegeben wurden. Der Benutzer möchte die Steuerelemente „Name“, „Geschlecht“ und „Standort“ nicht mehr sehen. Aber ASP.Net weiß das nicht und zeigt daher standardmäßig wieder alle Steuerelemente an, wenn der Benutzer auf die Schaltfläche „Senden“ klickt. Daher müssen wir Code schreiben, um sicherzustellen, dass alle Steuerelemente ausgeblendet sind, sodass der Benutzer nur die gewünschte Ausgabe sieht.

Sobald Sie die oben genannten Änderungen vorgenommen haben, wird Folgendes angezeigtwing Ausgabe

Ausgabe:-

Event-Handler in ASP.Net

Führen Sie im Ausgabebildschirm die folgenden Schritte auswing Schritte

  1. Geben Sie im Namenstext den Namen Guru99 anbox
  2. Wählen Sie einen Ort in der Liste ausbox von Bangalore
  3. Klicken Sie auf die Schaltfläche Senden

Event-Handler in ASP.Net

Sobald Sie dies tun, sehen Sie „Guru99“ und der Standort „Bangalore“ wird auf der Seite angezeigt.

Zusammenfassung

  • In ASP.Netkönnen Sie die Standardsteuerelemente zu einem Formular hinzufügen, z. B. Beschriftungen und Textboxes, Listeboxes usw.
  • Jedem Steuerelement kann ein Ereignis zugeordnet sein. Das häufigste Ereignis ist das Schaltflächenklickereignis. Dies wird verwendet, wenn Informationen an den Webserver übermittelt werden müssen.