Premature return to Index.razor
-
I have a new Blazor app with two Pages/Blazor components: index.razor and config.razor. The config.razor page lists the database objects that can be edited, and clicking on an object item in the list calls an async Task called ShowDetails that retrieves the details of the selected object to be displayed in an EditForm on the page. However, after retrieving the object data Blazor returns to index.razor. There is no code that navigates away from the component. No errors are caught. Is this normal behavior? Is there something I can add to stay on the config.razor page?
There are no solutions, only trade-offs.
- Thomas SowellA day can really slip by when you're deliberately avoiding what you're supposed to do.
- Calvin (Bill Watterson, Calvin & Hobbes) -
I have a new Blazor app with two Pages/Blazor components: index.razor and config.razor. The config.razor page lists the database objects that can be edited, and clicking on an object item in the list calls an async Task called ShowDetails that retrieves the details of the selected object to be displayed in an EditForm on the page. However, after retrieving the object data Blazor returns to index.razor. There is no code that navigates away from the component. No errors are caught. Is this normal behavior? Is there something I can add to stay on the config.razor page?
There are no solutions, only trade-offs.
- Thomas SowellA day can really slip by when you're deliberately avoiding what you're supposed to do.
- Calvin (Bill Watterson, Calvin & Hobbes)I found the answer and solution elsewhere, posted below in case this is useful to anyone else. The object in the second blazor component being clicked on was an HTML anchor element:
<a href="#" class="nav-link btn-link" @onclick="(()=>ShowDetails(app.Id))">
Because an anchor is a navigation element, it has a default action which is to navigate somewhere, in this case to "#" which means to stay on the current page. Blazor is a single-page application so navigating to itself reloads the default "page" which is Index.razor. To stop that default action the solution is to add the
@onclick:preventDefaultdirective to the anchor element:<a href="#" class="nav-link btn-link" @onclick="(()=>ShowDetails(app.Id))" @onclick:preventDefault>
Of course, another solution to consider is using a non-navigation HTML element such as a button.
There are no solutions, only trade-offs.
- Thomas SowellA day can really slip by when you're deliberately avoiding what you're supposed to do.
- Calvin (Bill Watterson, Calvin & Hobbes)