Gegevensbinding en gebeurtenissen in Blazor Hybrid

U hebt de gebruikersinterface voor uw web-app gedefinieerd. Laten we nu eens kijken hoe u logica toevoegt aan de app. In een Blazor-app kunt u C#-code toevoegen in afzonderlijke .cs bestanden of inline in uw Razor-onderdelen.

C# inline in onderdelen

Het is gebruikelijk om HTML en C# te combineren in één Razor-onderdeelbestand. Voor eenvoudige onderdelen met lichtere codevereisten werkt deze aanpak goed. Als u code wilt toevoegen aan een Razor-bestand, gebruikt u de Razor-syntaxis.

Wat zijn Razor-instructies?

Razor-instructies zijn componentmarkeringen die worden gebruikt om C# inline met HTML toe te voegen. Met instructies kunnen ontwikkelaars afzonderlijke instructies, methoden of grotere codeblokken definiëren.

Code-richtlijnen

Ontwikkelaars die Razor hebben gebruikt in MVC of Pages, zouden bekend moeten zijn met coderichtlijnen.

U kunt @expression() gebruiken om een C#-instructie inline in HTML toe te voegen. Als u meer code nodig hebt, gebruikt u de @code instructie om meerdere instructies tussen haakjes toe te voegen.

U kunt ook een @functions sectie toevoegen aan de sjabloon voor methoden en eigenschappen. Ze worden toegevoegd aan het begin van de gegenereerde klasse, waar het document ernaar kan verwijzen.

Razor-gegevensbinding

Binnen Razor-onderdelen kunt u HTML-elementen binden aan gegevens in C#-velden, eigenschappen en Razor-expressiewaarden. Met gegevensbinding kunnen tweerichtingssynchronisatie tussen HTML en uw code worden uitgevoerd.

Gegevens worden gepusht van HTML naar .NET wanneer een onderdeel wordt weergegeven. Onderdelen worden weergegeven nadat de code van de gebeurtenis-handler wordt uitgevoerd. Daarom worden eigenschapsupdates direct nadat een gebeurtenis-handler is geactiveerd, doorgevoerd in de gebruikersinterface.

Gebruik @bind markeringen om een C#-variabele te binden aan een HTML-invoer. In de volgende oefening ziet u een voorbeeld van gegevensbinding.