Blazor Cheatsheet

Two-Way binding i DotNet 7

Custom component

<input 
	@bind:event="oninput"
	@bind:get="SearchText"
	@bind:set="SearchTextChanged"/>

@code{
	[Parameter]
	 public string SearchText { get; set; } = string.Empty;

	[Parameter]
	 public EventCallback<string> SearchTextChanged { get; set; }
	 
}

Bruk i parent

<SearchInput 
	@bind-SearchText="@searchText"/>

Gammel måte

Før ble det gjort slik som nedenfor. Det gjør man ikke lenger, da det er fort gjort å lage en evig loop

Two-Way binding i komponent

@* MyInput.razor *@
@using Microsoft.AspNetCore.Components  

<input type="text"  
	@bind-Value="TextValue"/>  
               
  
@code {  
  
  
    [Parameter]  
    public EventCallback<string> TextValueChanged { get; set; }  
  
    [Parameter]  
    public string? TextValue  
    {  
        get => _textValue;  
        set  
        {  
            if (_textValue == value) return; //Important. Endless loop if not there 
            _textValue = value;  
            TextValueChanged.InvokeAsync(value);  
        }  
    }  
  
    private string? _textValue;  
  
}

<MyInput @bind-TextValue="@MyObject.MyString" />