How to navigate backward across multiple pages?

[SSzretter]

Is there a breadcrumb or similar system for Oqtane that will allow navigation backward when multiple pages are opened?

For example, if I navigate to a page with a module (index.razor) and an 'edit' button is clicked on that module it will navigate to a new page (edit.razor). The returnUrl parameter can be used for action buttons and others and that works to navigate backward one level. However, if we go one level deeper, say there is a button on the edit page to view a related record (editrelated.razor), that page can go back one level, back to edit.razor but now the returnurl is gone and edit has no way to go backward (and I do not want to assume edit always goes back to index).

[sbwalker]

@SSzretter if you want to navigate to a specific location you can add a link or button to your component and set the Url using the EditUrl() helper method. It has a lot of overload parameters so you set the Url based on your specific needs.

[sbwalker]

The EditUrl() method has a "querystring" parameter, so pass the "returnurl" to the next component:

ie. EditUrl("Edit", "returnurl=" + WebUtility.UrlEncode(YourReturnUrl));

Or use the ActionLink component which also has a "ReturnUrl" parameter:

<ActionLink Action="Edit" ReturnUrl="@YourReturnUrl" />

[SSzretter]

Yes, I am familiar with that -

So using my example from earlier, here are 4 pages. Each page has a button that connects to the next.

Index > Details > Edit > Invoices

1. Index.razor has a: <ActionLink Action="Details" Text="Details" Parameters="..." ReturnUrl="@(EditUrl(PageState.Page.Path, ModuleState.ModuleId, "Index", $"_ItemId={_ItemId}"))" />

2. Details.razor : <ActionLink Action="Edit" Text="Edit" Parameters="..." ReturnUrl="@(EditUrl(PageState.Page.Path, ModuleState.ModuleId, "Details", $"_ItemId={_ItemId}"))" />

3. Edit.razor: <ActionLink Action="Invoices" Text="Invoices" Parameters="..." ReturnUrl="@(EditUrl(PageState.Page.Path, ModuleState.ModuleId, "Edit", $"_ItemId={_ItemId}"))" />

4. Invoices.razor: ...

At the Invoices page, if you click the x to go back it brings you back to Edit.razor like it should. However, there is no return URL as I assume that state is gone so the x to close the window does nothing and there is no returnurl variable.

[sbwalker]

Yes that is because you not passing the returnurl parameter. Oqtane is not able to pass the returnurl in every scenario - in some scenarios you need to specify the returnurl explicitly yourself - which is what I explained above.

[SSzretter]

But I have the "ReturnUrl" in my examples (1-4). The issue is that returnurl is passed forward and you can only go back one page. If you go forward two pages (1-2-3) the app no longer has the returnurl to go back two pages (3-2-1), is that not true?

I suppose a work-around would be for me to pass an array of URL's in a separate parameter instead of a single returnurl, pushing and popping them off that array stack. Though I know I am then going to have to start overriding the default close button and possibly other logic. I am just checking to see if I am missing something before looking at that.

[sbwalker]

Yes, the ReturnUrl concept only supports the ability to navigate back to the previous Url. Routing is stateless... and Oqtane does not maintain a collection of every route which a visitor navigates to. So if you have a chain of Urls as part of your user experience - either forward or backward - you will need to manually generate the specific Urls in your code. The EditUrl() method can still be helpful for this as it creates Urls using the conventions in Oqtane.