Open page in new tab, weird page behavior

1 Answer 44 Views
Window
MIS
Top achievements
Rank 1
MIS asked on 28 May 2024, 10:24 PM | edited on 29 May 2024, 08:01 AM

I've got a Blazor WebApp and want to open a page (with several Telerik components) in a new tab. Unfortunately I can't use NavLink or NavigationManager.NavigateTo(url) as they won't open in a new tab/window.

After googling I realized the general consensus is to use javascript: await JS.InvokeVoidAsync("open", <url>, "_blank");

This works fine as long as the page url doesn't contain any parameters (url "/TestPage") but whenever I pass along a parameter (url "/TestPage/dummyParam") the page loads but the styling for the Telerik components are wrong (missing?)

As a sidenote, I get exactly the same weird behavior with a <a href="/TestPage/dummyParam" target="_blank"> so not an option.

Depending on what kind of Telerik components I've added to the opened page I get different errors.
A TelerikButton simply looks ugly but if I add a TelerikTextBox I get an exception  "Error: Microsoft.JSInterop.JSException: Could not find 'TelerikBlazor.initTextBox' ('TelerikBlazor' was undefined)."

Were thinking maybe components were rendered too early so tried to show them only after OnAfterRender(), but still the same problems. Changing to prerender: false ( @rendermode="new InteractiveServerRenderMode(prerender: false) ) didn't help at all but I'm mostly grabbing at straws at this time..

I've made a very simple sample app demonstrating this problem, see zip.

1. Start page, all looks ok.

2. Pressing  "open in new tab, no param" button, the TestPage is opened in new tab and everything looks fine, correct visuals etc.

3. Back to Home, press "open in new tab, one param" button, exactly the same TestPage is opened in a new tab but styles are now missing, layout is wrong and exceptions reported depending on what controls have been added.

4. Back to Home, pressing the href link, same behavior as nr 3.

Does the "open in new tab" break the SPA boundaries? The answer to my problem is probably obvious, but I just can't see it at the moment.

1 Answer, 1 is accepted

Sort by
1
Accepted
Nadezhda Tacheva
Telerik team
answered on 31 May 2024, 09:38 AM

Hello Mikael,

Thank you for sharing a runnable sample! I reproduced the issue on my end, too.

The behavior that you are getting, indicates the client assets that the components need (the theme stylesheet and the JS Interop file) are not loaded when passing the parameter. This, however, does not depend on the UI for Blazor product but rather on the general configuration of the app and how parameters are passed in the URL.

I researched the matter for you and I found the following resources that may help you move forward with the configuration:

It looks like the base href has to be the first line in the <head> - I tested this and it works on my end.

Regards,
Nadezhda Tacheva
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Tags
Window
Asked by
MIS
Top achievements
Rank 1
Answers by
Nadezhda Tacheva
Telerik team
Share this question
or