blazor

Blazor: How to use the onchange event in when using @bind also?

@bind is essentially equivalent to the having both value and @onchange, e.g.: <input @bind=”CurrentValue” /> Is equivalent to: <input value=”@CurrentValue” @onchange=”@((ChangeEventArgs e) => CurrentValue = e.Value.ToString())” /> Since you’ve already defined @onchange, instead of also adding @bind, just add value to prevent the clash: <select value=”@SelectedCustID” @onchange=”@CustChanged” class=”form-control”> @foreach (KeyGuidPair i in CustList) { <option … Read more

Embedding a Leaflet map on a Blazor SPA

Note: The sample code below was created and tested in a WebAssembly Blazor App stand alone… An object reference is required for the nonstatic field, method, or property ‘member’ Let’s create the object class, whose object reference will be passed to your JavaScript’s object when initialized. When the user clicks on a location on the … Read more

Blazor component : refresh parent when model is updated from child component

Create a shared service. Subscribe to the service’s RefreshRequested event in the parent and Invoke() from the child. In the parent method call StateHasChanged(); public interface IMyService { event Action RefreshRequested; void CallRequestRefresh(); } public class MyService: IMyService { public event Action RefreshRequested; public void CallRequestRefresh() { RefreshRequested?.Invoke(); } } //child component MyService.CallRequestRefresh(); //parent component … Read more

Best way to share data between two child components in Blazor

You may define a class service that implements the State pattern and the Notifier pattern to handle the state of your objects, pass state to objects, and notify subscriber objects of changes. Here’s a simplified example of such service, which enables a parent component to communicate with his children. NotifierService.cs public class NotifierService { private … Read more

Get Current User in a Blazor component

There are three possibilities for getting the user in a component (a page is a component): Inject IHttpContextAccessor and from it access HttpContext and then User; need to register IHttpContextAccessor in Startup.ConfigureServices, normally using AddHttpContextAccessor. Edit: according to the Microsoft docs you must not do this for security reasons. Inject an AuthenticationStateProvider property, call GetAuthenticationStateAsync … Read more

How do I access HttpContext in Server-side Blazor?

Add the following to Blazor.Web.App.Startup.cs: services.AddHttpContextAccessor(); You also need this in <component-name>.cshtml @using Microsoft.AspNetCore.Http @inject IHttpContextAccessor httpContextAccessor Note: At the time when this answer was written, accessing the HttpContext was done as described above. Since then, Blazor has been under rapid development, and has fundamentally changed. It is definitely deprecated the usage described above, but … Read more

How to make two-way binding on Blazor component

Quick answer Quoting Blazor docs: Component parameters Binding recognizes component parameters, where @bind-{property} can bind a property value across components. For your page: <EditForm Model=”model” OnValidSubmit=”Submit”> <MyInputComponent @bind-BindingValue=”model.Name” /> </EditForm> The child component MyInputComponent: <div> <InputText type=”text” @bind-Value=”@BindingValue” /> </div> @code { private string _value; [Parameter] public string BindingValue { get => _value; set { … Read more