Is there a way to stop in a Blazor component method until a boolean is set?

Question

Is there a way to stop in a Blazor component method until a boolean is set?

David Thielen 3,211

This is for Blazor Server version 7. I have a situation where the user is deciding to navigate to another page on the site when they have entered fields on a form and have not saved them. I am using <NavigationLock ConfirmExternalNavigation="@_hasUnsavedChanges" OnBeforeInternalNavigation="OnBeforeInternalNavigation" /> to ask the user "Are you sure?" in OnBeforeInternalNavigation(). In that method I display a popup component. Once it is displayed, I want to stop execution in that method until the user clicks the Yes or No button. Once that is clicked I want to then resume execution in that method , calling context.PreventNavigation() if they clicked No. First off, is this a bad idea? The page logically is synchronous at this point where the only thing they can do on the page is click yes or no. Second, how can I do this? Are events the best approach? Semaphores? thanks - dave

Anonymous

2023-04-25T01:24:51.85+00:00

Hi David, normally, we will firstly display the popup are you sure, then inside that popup's yes button, we will bind a click event, inside that event we could get the form data and post to backend. Inside no button, we will close the popup and go back to the form.
David Thielen 3,211 Reputation points

2023-04-25T04:18:34.1066667+00:00

Brando - I think based on Bruce's answer below I can't pause processing in the async method.
AgaveJoe 30,126 Reputation points

2023-04-25T12:53:15.0333333+00:00

Seems to me you should refactor the method into at least two methods. One method handles the popup and the other method handles the processing. The popup component can make the decision if the second method is called or not.

1 answer

Your answer

Anonymous

2023-04-25T01:24:51.85+00:00

Hi David, normally, we will firstly display the popup are you sure, then inside that popup's yes button, we will bind a click event, inside that event we could get the form data and post to backend. Inside no button, we will close the popup and go back to the form.
David Thielen 3,211 Reputation points

2023-04-25T04:18:34.1066667+00:00

Brando - I think based on Bruce's answer below I can't pause processing in the async method.
AgaveJoe 30,126 Reputation points

2023-04-25T12:53:15.0333333+00:00

Seems to me you should refactor the method into at least two methods. One method handles the popup and the other method handles the processing. The popup component can make the decision if the second method is called or not.

Answer 1

Bruce (SqlWork.com) 78,086 Volunteer Moderator

As html and JavaScript calls (required to create the pop up) are async, you can not make the code sync. Also the virtual dom render would be blocked.

David Thielen 3,211 Reputation points

2023-04-25T04:16:53.6766667+00:00

I had a bad feeling that was the case. So what's my best approach here? Is it save LocationChangingContext.TargetLocation, return from OnBeforeInternalNavigation() and then if they say yes to discard the changes call NavigationManager.NavigateTo(url);? thanks - dave
Bruce (SqlWork.com) 78,086 Reputation points Volunteer Moderator

2023-04-25T20:01:46.82+00:00

you should follow the blazor paradigm. events should update state. state changes should trigger a re-render of a component. state always exists outside the component, and passed to the component via parameter binding.

a method should not open a popup. a method should set a state, that displays the popup. a button event of a popup should just set new state, including the "hide" popup state.

you should not change a components state during a render (as this just triggers a pre-render), only from async events. a component render can set properties of its children.

Share via

Is there a way to stop in a Blazor component method until a boolean is set?

1 answer

Your answer