ASP.NET-Steuerelemente: ÜberprüfenBox, RadioButton, ListeBox, Textfeld, Beschriftung
Jacob Lee
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 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 der folgenden Funktionalität.
- Die Möglichkeit für den Benutzer, seinen Namen einzugeben.
- Eine Option zur Auswahl der Stadt, in der der Benutzer wohnt
- Die Möglichkeit für den Benutzer, eine Option für das Geschlecht einzugeben.
- 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.
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.
Sobald Sie den obigen Schritt ausgeführt haben, wird Ihr Formular-Designer wie unten gezeigt angezeigt.
Beginnen wir nun damit, unsere Steuerelemente nacheinander hinzuzufügen
Etikettenkontrolle
Das Beschriftungssteuerelement wird verwendet, um dem Benutzer einen Text oder eine Nachricht auf dem Formular anzuzeigen. Das Beschriftungssteuerelement wird normalerweise zusammen mit anderen Steuerelementen verwendet. Häufige Beispiele sind, wenn zusammen mit dem Textfeldsteuerelement ein Beschriftungselement hinzugefügt wird. Das Beschriftungselement gibt dem Benutzer einen Hinweis darauf, was in das Textfeld eingetragen werden soll. Sehen wir uns anhand des unten gezeigten Beispiels an, wie wir dies implementieren können. Wir verwenden ein Beschriftungselement namens „Name“. Dieses wird in Verbindung mit den Textfeldsteuerelementen verwendet, die im späteren Abschnitt hinzugefügt werden.
Schritt 1) Der erste Schritt besteht darin, das Steuerelement „Label“ aus der Toolbox auf das Webformular zu ziehen, wie unten gezeigt.
Schritt 2) Nachdem das Etikett hinzugefügt wurde, führen Sie die folgenden Schritte aus.
- Gehen Sie zum Eigenschaftenfenster, indem Sie mit der rechten Maustaste auf das Label-Steuerelement klicken
- Wählen Sie die Menüoption Eigenschaften
Schritt 3) Ändern Sie im Eigenschaftenfenster den Namen 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, sehen Sie die folgende Ausgabe
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 gezeigt
Unten sehen Sie, wie dies im Formular-Designer 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.
- Gehen Sie zum Eigenschaftenfenster, indem Sie mit der rechten Maustaste auf das Textbox-Steuerelement klicken und
- Wählen Sie dann Eigenschaften
- Ä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 gezeigt
Schritt 2) Sobald Sie die Listbox in das Formular ziehen, wird ein separates Seitenmenü angezeigt. Wählen Sie in diesem Menü das Menü „Elemente bearbeiten“.
Schritt 3) Ihnen wird nun ein Dialogfeld angezeigt, in dem Sie die Listenelemente zur Listbox hinzufügen können.
- Klicken Sie auf die Schaltfläche „Hinzufügen“, um ein Listenelement hinzuzufügen.
- 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.
- Klicken Sie auf die Schaltfläche OK
Schritt 4) Gehen Sie zum Eigenschaftenfenster und ändern Sie den ID-Eigenschaftswert des Steuerelements in lstLocation.
Sobald Sie die oben genannten Änderungen vorgenommen haben, sehen Sie die folgende Ausgabe
Ausgabe:-
Anhand der Ausgabe können Sie deutlich erkennen, dass die Listboxen zum Formular hinzugefügt wurden.
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 Steuerelement „Radiobutton“ aus der Toolbox auf das Webformular zu ziehen (siehe Abbildung unten). Achten Sie darauf, zwei Radiobuttons hinzuzufügen, einen für die Option „Männlich“ und einen 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 ihn in „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, sehen Sie die folgende Ausgabe
Ausgabe:-
Anhand der Ausgabe können Sie deutlich erkennen, dass das Optionsfeld zum Formular hinzugefügt wurde
Checkbox
Ein Kontrollkästchen wird verwendet, um eine Liste von Optionen bereitzustellen, aus denen der Benutzer mehrere Optionen auswählen kann. Sehen wir uns an, wie wir dies anhand eines unten gezeigten Beispiels implementieren können. Wir werden unseren Webformularen zwei Kontrollkästchen hinzufügen. Diese Kontrollkästchen bieten dem Benutzer die Möglichkeit, zu entscheiden, ob er 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 gezeigt
Schritt 2) Nachdem die Kontrollkästchen hinzugefügt wurden, ändern Sie die Kontrollkästchen-ID-Eigenschaft in „chkASP“.
- 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“.
- Ändern Sie die ID-Eigenschaft des Kontrollkästchens in „chkASP“.
- Ändern Sie die ID-Eigenschaft des Kontrollkästchens in chkC
Sobald Sie die oben genannten Änderungen vorgenommen haben, sehen Sie die folgende Ausgabe
Ausgabe:-
Anhand der Ausgabe können Sie deutlich erkennen, dass dem Formular die Kontrollkästchen hinzugefügt wurden.
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ächen-Steuerelement aus der Toolbox auf das Webformular zu ziehen, wie unten gezeigt
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, sehen Sie die folgende Ausgabe
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 Ereignis btnSubmit_Click wird von Visual Studio automatisch hinzugefügt, wenn Sie im Webformular-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-Erklärung:-
- Die obige Codezeile erledigt die einfachste Aufgabe. Sie nimmt den Wert des Textfeld-Steuerelements „Name“ und sendet ihn über das Antwortobjekt an den Client. Wenn Sie also die Zeichenfolge „Guru99“ in das Textfeld „Name“ eingeben möchten, wäre der Wert von txtName. Ein Text wäre „Guru99“.
- Die nächste Codezeile übernimmt den ausgewählten Wert der Listbox über die Eigenschaft „lstLocation.SelectedItem.text“ und schreibt diesen Wert anschließend über die Methode Response.Write zurück an den Client.
- Schließlich machen wir alle Steuerelemente im Formular unsichtbar. Wenn wir dies nicht tun, werden alle Steuerelemente und unsere Antwortwerte zusammen angezeigt. Normalerweise sollte die nächste Seite, die dem Benutzer angezeigt wird, nur die Informationen enthalten, die nicht eingegeben wurden, wenn eine Person alle Informationen wie Name, Ort, Geschlecht usw. in das Formular eingibt. Der Benutzer möchte die Steuerelemente Name, Geschlecht und Ort nicht erneut sehen. ASP.Net weiß dies jedoch nicht und zeigt daher standardmäßig alle Steuerelemente erneut an, wenn der Benutzer auf die Schaltfläche „Senden“ klickt. Daher müssen wir Code schreiben, um sicherzustellen, dass alle Steuerelemente ausgeblendet sind, damit der Benutzer nur die gewünschte Ausgabe sieht.
Wenn Sie die oben genannten Änderungen vornehmen, wird die folgende Ausgabe angezeigt.
Ausgabe:-
Führen Sie im Ausgabebildschirm die folgenden Schritte aus
- Geben Sie im Namenstextfeld den Namen Guru99 ein.
- Wählen Sie einen Ort in der Listbox von Bangalore
- Klicken Sie auf die Schaltfläche Senden
Sobald Sie dies tun, sehen Sie „Guru99“ und der Standort „Bangalore“ wird auf der Seite angezeigt.
Zusammenfassung
- In ASP.Netkönnen Sie einem Formular Standardsteuerelemente wie Beschriftungen, Textfelder, Listenfelder usw. hinzufügen.
- 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.
