From a87c4ba12d68e8f856b096338031ebacc0f1592c Mon Sep 17 00:00:00 2001 From: KB Bot Date: Thu, 20 Mar 2025 14:21:32 +0000 Subject: [PATCH 1/2] Added new kb article form-prompt-unsaved-changes --- knowledge-base/form-prompt-unsaved-changes.md | 151 ++++++++++++++++++ 1 file changed, 151 insertions(+) create mode 100644 knowledge-base/form-prompt-unsaved-changes.md diff --git a/knowledge-base/form-prompt-unsaved-changes.md b/knowledge-base/form-prompt-unsaved-changes.md new file mode 100644 index 0000000000..083645d228 --- /dev/null +++ b/knowledge-base/form-prompt-unsaved-changes.md @@ -0,0 +1,151 @@ +--- +title: How to Prompt Users for Unsaved Changes on Navigation +description: A guide on how to implement a warning for unsaved changes when attempting to navigate away from a TelerikForm in Blazor applications. +type: how-to +page_title: How to Prompt Users for Unsaved Changes in Blazor TelerikForm +slug: form-kb-prompt-unsaved-changes +tags: blazor, form, navigation, unsaved changes +res_type: kb +ticketid: 1682122, 1629951 +--- + +## Environment + + + + + + + + +
ProductForm for Blazor
+ +## Description + +This knowledge base article answers the following questions: + +- How to detect unsaved changes in a Blazor TelerikForm? +- How to prompt users before navigating away from unsaved changes in Form? +- How to conditionally navigate away from a form? + +## Solution + +To prompt the users with a warning message when they attempt to navigate away from a page with unsaved changes in a TelerikForm, follow these steps: + +1. Inject [`NavigationManager`](https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-7.0#handleprevent-location-changes) to handle navigation +2. Register a handler using `NavigationManager.RegisterLocationChangingHandler()` to intercept navigation attempts +3. In [`LocationChangingHandler`](https://www.telerik.com/blogs/blazor-new-locationchanging-events-dotnet-7), check if the form has unsaved changes +4. Add a [``](slug:dialog-overview) to prompt the user when there are unsaved changes +5. Implement a `PreventLeaving()` method and `ProceedNavigation()` method to close the dialog without navigating and to manually navigate to the stored URL if the user confirms + +`````RAZOR +@implements IDisposable +@inject NavigationManager NavigationManager + + + + + + + + +Go To Other Page + + + + You have unsaved changes. Are you sure you want to leave this page? + + + No + Yes + + + +@code { + private Person Employee = new Person(); + private TelerikForm? FormRef { get; set; } + private IDisposable? NavEventRegistration; + private bool ShowNavigationDialog = false; + private string? NextUrl; + private bool isNavigationConfirmed = false; // Flag to track navigation confirmation + + private ValueTask LocationChangingHandler(LocationChangingContext args) + { + // Prevent the confirmation dialog from appearing again once the user confirmed navigation + if (isNavigationConfirmed) + { + return ValueTask.CompletedTask; + } + + if (FormRef?.EditContext.IsModified() ?? false) + { + // Prevent navigation and store the target URL + args.PreventNavigation(); + NextUrl = args.TargetLocation; + ShowNavigationDialog = true; + + // Force Blazor to re-render + InvokeAsync(StateHasChanged); + } + + return ValueTask.CompletedTask; + } + + private void PreventLeaving() + { + // Simply close the dialog without changing the page + ShowNavigationDialog = false; + StateHasChanged(); + } + + private void ProceedNavigation() + { + // Set the flag to indicate navigation is confirmed + isNavigationConfirmed = true; + + // Navigate manually to the stored target URL + if (!string.IsNullOrEmpty(NextUrl)) + { + NavigationManager.NavigateTo(NextUrl); + } + + // Close the dialog after confirming navigation + ShowNavigationDialog = false; + } + + protected override void OnInitialized() + { + Employee = new Person() + { + Id = 1, + FirstName = "John", + LastName = "Doe", + BirthDate = DateTime.Today.AddYears(-30) + }; + + // Register the navigation handler + NavEventRegistration = NavigationManager.RegisterLocationChangingHandler(LocationChangingHandler); + } + + public void Dispose() + { + NavEventRegistration?.Dispose(); + } + + public class Person + { + public int Id { get; set; } + public string FirstName { get; set; } = string.Empty; + public string LastName { get; set; } = string.Empty; + public DateTime BirthDate { get; set; } = DateTime.Today; + } +} +````` + +## See Also + +- [Blazor Form Overview](slug:form-overview) +- [Blazor Dialog Overview](slug:dialog-overview) From 389e83c008c695505b6fcaa9169013a3be913422 Mon Sep 17 00:00:00 2001 From: Hristian Stefanov Date: Fri, 28 Mar 2025 17:00:20 +0200 Subject: [PATCH 2/2] kb(Form): add suggestions as per comments --- knowledge-base/form-prompt-unsaved-changes.md | 26 ++++++++++++------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/knowledge-base/form-prompt-unsaved-changes.md b/knowledge-base/form-prompt-unsaved-changes.md index 083645d228..b20b913815 100644 --- a/knowledge-base/form-prompt-unsaved-changes.md +++ b/knowledge-base/form-prompt-unsaved-changes.md @@ -34,7 +34,7 @@ To prompt the users with a warning message when they attempt to navigate away fr 1. Inject [`NavigationManager`](https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-7.0#handleprevent-location-changes) to handle navigation 2. Register a handler using `NavigationManager.RegisterLocationChangingHandler()` to intercept navigation attempts -3. In [`LocationChangingHandler`](https://www.telerik.com/blogs/blazor-new-locationchanging-events-dotnet-7), check if the form has unsaved changes +3. Use the [`LocationChangingHandler`](https://www.telerik.com/blogs/blazor-new-locationchanging-events-dotnet-7) to check if the form has unsaved changes 4. Add a [``](slug:dialog-overview) to prompt the user when there are unsaved changes 5. Implement a `PreventLeaving()` method and `ProceedNavigation()` method to close the dialog without navigating and to manually navigate to the stored URL if the user confirms @@ -51,7 +51,10 @@ To prompt the users with a warning message when they attempt to navigate away fr -Go To Other Page + + Go To Other Page + + @@ -60,7 +63,7 @@ To prompt the users with a warning message when they attempt to navigate away fr No - Yes + Yes @@ -94,6 +97,11 @@ To prompt the users with a warning message when they attempt to navigate away fr return ValueTask.CompletedTask; } + private void NavigateToExternalPage() + { + NavigationManager.NavigateTo("https://www.telerik.com/blazor-ui/documentation/introduction", forceLoad: true); + } + private void PreventLeaving() { // Simply close the dialog without changing the page @@ -119,12 +127,12 @@ To prompt the users with a warning message when they attempt to navigate away fr protected override void OnInitialized() { Employee = new Person() - { - Id = 1, - FirstName = "John", - LastName = "Doe", - BirthDate = DateTime.Today.AddYears(-30) - }; + { + Id = 1, + FirstName = "John", + LastName = "Doe", + BirthDate = DateTime.Today.AddYears(-30) + }; // Register the navigation handler NavEventRegistration = NavigationManager.RegisterLocationChangingHandler(LocationChangingHandler);