So erhalten Sie eine Variable aus einer HTML-Eingabe in Blazor C#

Blazor ist ein leistungsstarkes Framework zum Erstellen interaktiver Webanwendungen mit C# anstelle von JavaScript. Eine der Kernfunktionen von Blazor ist die Möglichkeit, C#-Code mit HTML-Elementen zu verknüpfen, sodass Sie Benutzereingaben einfach erfassen und in Ihrer Anwendung verwenden können. In diesem Artikel erfahren Sie, wie Sie eine Variable aus einem HTML-Eingabeelement in Blazor abrufen, sowohl in Blazor Server- als auch in Blazor WebAssembly-Anwendungen.

Einführung in die bidirektionale Datenbindung von Blazor

Blazor bietet eine Funktion namens „Zwei-Wege-Datenbindung“, die es ermöglicht, dass Änderungen an der Benutzeroberfläche (UI) die zugrunde liegende C#-Variable automatisch aktualisieren und umgekehrt. Dies ist äußerst nützlich, wenn Sie vom Benutzer in ein HTML-Eingabefeld eingegebene Daten erfassen und diese Änderungen sofort in Ihrem C#-Code widerspiegeln möchten.

Erste Schritte

Um eine Variable aus einem HTML-Eingabefeld abzurufen, benötigen Sie einige Schlüsselkomponenten:

1. HTML-Eingabe : Das Eingabefeld, in das der Benutzer Daten eingibt.
2. C#-Variable : Die C#-Variable, die die Daten aus der Eingabe speichert.
3. Datenbindung : Die Verbindung zwischen dem Eingabefeld und der C#-Variablen, normalerweise über die @bind -Direktive in Blazor.

In den folgenden Abschnitten werden wir verschiedene Beispiele durchgehen, um zu demonstrieren, wie das funktioniert.

Beispiel 1: Einfache Texteingabebindung

Der einfachste Weg, die Eingaben eines Benutzers zu erfassen, ist die Verwendung der @bind -Direktive. Dadurch wird ein HTML-Eingabeelement automatisch an eine C#-Variable gebunden.

Codebeispiel (Razor-Komponente)

 @page "/input-example" <h3>Simple Input Binding in Blazor</h3> <label for="userName">Enter your name:</label> <input type="text" @bind="userName" /> <p>Hello, @userName!</p> @code { private string userName = string.Empty; }

Erläuterung:

1. Die @bind Direktive bindet das input an die Variable userName in C#. Immer wenn der Benutzer etwas in das Eingabefeld eingibt, wird die Variable userName automatisch aktualisiert.
2. Der Absatz <p>Hello, @userName!</p> zeigt dynamisch den Wert von userName an und zeigt den aktualisierten Text in Echtzeit an, während der Benutzer tippt.

In diesem Beispiel ist die Variable userName an das Eingabefeld gebunden, und die bidirektionale Bindung von Blazor stellt sicher, dass der Wert von userName in Echtzeit aktualisiert wird, wenn der Benutzer den Text ändert.

Beispiel 2: Abrufen und Verwenden von Eingaben beim Klicken auf eine Schaltfläche

Manchmal müssen Sie Aktionen für die vom Benutzer eingegebenen Daten ausführen, z. B. das Klicken auf eine Schaltfläche, um den Wert zu übermitteln oder ihn weiter zu verarbeiten. Dies kann auch in Blazor problemlos erreicht werden.

Codebeispiel (Razor-Komponente)

 @page "/submit-input" <h3>Submit Input in Blazor</h3> <label for="age">Enter your age:</label> <input type="number" @bind="age" /> <button @>Submit</button> <p>You entered: @age</p> @code { private int age; private void SubmitAge() { // Do something with the age variable (eg, validation, submission, etc.) Console.WriteLine($"User's age is {age}"); } }

Erläuterung:

1. Die @bind="age" -Direktive bindet das Eingabefeld an die age .
2. Das @ bindet das Klickereignis der Schaltfläche an die SubmitAge -Methode.
3. Wenn der Benutzer auf die Schaltfläche klickt, wird die SubmitAge -Methode aufgerufen, die das eingegebene Alter auf der Konsole ausgibt.

In diesem Beispiel kann der Benutzer sein Alter eingeben und wenn er auf die Schaltfläche „Senden“ klickt, wird die SubmitAge -Methode ausgelöst, um eine Aktion mit der age auszuführen.

Beispiel 3: Eingabevalidierung

Mit Blazor können Sie die Eingabevalidierung einfach durchführen, indem Sie die Datenbindung mit Formularkomponenten wie <EditForm> kombinieren.

Codebeispiel (Razor-Komponente)

 @page "/validation-example" <h3>Input Validation in Blazor</h3> <EditForm Model="@person" OnValidSubmit="HandleValidSubmit"> <DataAnnotationsValidator /> <ValidationSummary /> <label for="firstName">First Name:</label> <InputText @bind-Value="person.FirstName" /> <ValidationMessage For="@(() => person.FirstName)" /> <button type="submit">Submit</button> </EditForm> <p>You entered: @person.FirstName</p> @code { private Person person = new Person(); private void HandleValidSubmit() { // Process the valid input Console.WriteLine($"First Name: {person.FirstName}"); } public class Person { [Required] public string FirstName { get; set; } } }

Erläuterung:

1. Die <EditForm> -Komponente wird verwendet, um die Eingabefelder zu umschließen und eine Validierung durchzuführen.
2. Der @bind-Value="person.FirstName" bindet das Eingabefeld an die FirstName Eigenschaft des person .
3. Die DataAnnotationsValidator Komponente verwendet Datenanmerkungen (z. B. [Required] ), um die Eingabe zu validieren.
4. Wenn die Eingabe gültig ist und das Formular gesendet wird, wird die Methode HandleValidSubmit aufgerufen und verarbeitet die Daten.

Validierung:

• Wenn der Benutzer keinen Vornamen angibt (aufgrund der Anmerkung [Required] ), wird die Validierungsmeldung angezeigt und das Formular wird erst gesendet, wenn die Eingabe gültig ist.

Erweiterte Bindung mit anderen Eingabetypen

Blazor unterstützt eine Vielzahl von Eingabetypen, wie z. B. Textfelder, Kontrollkästchen, Optionsfelder, Dropdowns usw. Sie können Variablen auf ähnliche Weise an jedes dieser Elemente binden.

Beispiel: Kontrollkästchenbindung

 @page "/checkbox-example" <h3>Checkbox Binding in Blazor</h3> <label for="subscribe">Subscribe to newsletter:</label> <input type="checkbox" @bind="isSubscribed" /> <p>You are @(isSubscribed ? "subscribed" : "not subscribed") to the newsletter.</p> @code { private bool isSubscribed = false; }

In diesem Beispiel ist das Kontrollkästchen an die Variable isSubscribed gebunden, und wenn der Benutzer das Kontrollkästchen aktiviert oder deaktiviert, wird der Wert von isSubscribed automatisch aktualisiert.

Abschluss

Dank der leistungsstarken bidirektionalen Datenbindung von Blazor ist das Abrufen einer Variablen aus einer HTML-Eingabe in Blazor einfach und effizient. Mithilfe der @bind -Direktive können Sie Eingabefelder schnell mit C#-Variablen verknüpfen und so sicherstellen, dass Änderungen in der Benutzeroberfläche in Ihrem Code widergespiegelt werden und umgekehrt.

Unabhängig davon, ob Sie einfache Formulare oder komplexe Eingabevalidierungslogik erstellen, vereinfachen die Datenbindungsfunktionen von Blazor die Arbeit mit Benutzereingaben. Von Textfeldern bis hin zu Kontrollkästchen übernimmt Blazor die nahtlose Integration zwischen HTML und C# und ist damit eine hervorragende Wahl für die Erstellung interaktiver Webanwendungen.