CODEWITHSUNDEEP
c#htmlonchangeblazor
psclp
psclp

Reputation: 55

OnChange for whole page: Blazor

I want an alert if a user want to leave the page and doesnt save the changes in blazor.

How can i detect the change with high performance (dont want to check the database)?

In blazor the @bind values updating automatically. I guess there is a service that checked already something changed.

How can i get this information?

Upvotes: 3

Views: 1993

Answers (1)

tbdrz
tbdrz

Reputation: 2190

You could use the IsModified() from the EditContext:

@if (_editContext.IsModified())
{
    <p>You have made changes. Any unsaved changes will be lost!</p>
}

<EditForm EditContext="_editContext" OnValidSubmit="OnValidSumit">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <InputText @bind-Value="Model.Something" />
    <button type="submit">Add</button>
</EditForm>


@code {
    public Model Model { get; set; } = new Model();

    private EditContext _editContext;

    protected override void OnInitialized()
    {
        _editContext = new EditContext(Model);
    }
}

For checking if the user wants to navigate to another page, here is a great article: https://chrissainty.com/an-in-depth-look-at-routing-in-blazor/ and: https://blazor-university.com/routing/detecting-navigation-events/

Upvotes: 4

Related Questions