NavigationManager.NavigateTo not functional while using Grid components

Niklas Teich

Asked On September 20, 2019 10:44 AM UTC

Hello.

I have pages with grids, and on those pages, the NavigationManager.NavigateTo function does not work.

I can reproduce this error - pages without a grid can use the NavigationManager without any problems.

Sadly, i can't post my error log in this thread "You have tried to enter a word or URL that is not allowed on this site."

How can i solve this issue?

Greetings,

Niklas

Reply | Reply with quote

James Cockerill

Replied On September 20, 2019 10:37 PM UTC

I'm seeing the same problem on the latest version of the ej2-blazor-samples.

The sample project compiles but throws an exception immediately when run.

The index page attempts to navigate to a grid based page:

protected override void OnInitialized(){

UriHelper.NavigateTo("Grid/DefaultFunctionalities?theme=material");

}

which throws a Microsoft.AspNetCore.Components.NavigationException

Reply | Reply with quote

Uwe Hein

Replied On September 21, 2019 08:08 AM UTC

Hi @Niklas, @James,

I tried with the samples form Sept. 19 using RC1 and VS 16.3.0 preview 4 without any problems.

regards

Uwe

Reply | Reply with quote

Niklas Teich

Replied On September 23, 2019 09:16 AM UTC

I created a new Client-Side Blazor app and everything the docs suggest.
The samples are not using web assembly (Server-Side Blazor App).
Like i said, the Navigation crashes when a grid is on the page.
If no grid is on the page, i can use the NavigationTo function without any problems.

Niklas

Reply | Reply with quote

Rahul Narayanasamy [Syncfusion]

Replied On September 23, 2019 11:59 AM UTC

Hi James,

Greetings from Syncfusion.

Query: “which throws a Microsoft.AspNetCore.Components.NavigationException”

We are able to reproduce the reported issue at our end too, when trying to navigate to another page in OnInitialized method. This is because you are trying to navigate before component is being initialized. So we suggest you to achieve your requirement using OnAfterRender method of Blazor. Refer the below code example.

protected override void OnAfterRender(bool firstRender)

{

Navigation.NavigateTo("/fetchdata");

}

Kindly download the sample from below

Sample: https://www.syncfusion.com/downloads/support/forum/147702/ze/James-366432859

Please get back to us if you have further queries.

Regards,

Rahul

Reply | Reply with quote

Rahul Narayanasamy [Syncfusion]

Replied On September 23, 2019 12:01 PM UTC

Hi Niklas,

Greetings from Syncfusion.

Query: NavigationManager.NavigateTo not functional while using Grid components in Client Side Blazor

We have validated your query and we are able to reproduce the reported problem at our end. Currently we are validating the reported problem at our end and we will further update you on September 25, 2019. Until then we appreciate your patience.

Regards,

Rahul

Reply | Reply with quote

Vignesh Natarajan [Syncfusion]

Replied On September 24, 2019 09:27 AM UTC

Hi Niklas,

Thanks for the patience.

Query: “NavigationManager.NavigateTo not functional while using Grid components in Client Side Blazor”

While navigating with Grid component in client side application, we suggest you to use NavLink routing component of Microsoft ASP.NET Core instead of Navigation Manager. Using NavLink you can navigate to another page along with parameters also. Refer the below code example.

@*render navLink as EjsButton*@

<EjsButton>

<NavLink rel='nofollow' href="@link">

Navigate To

</NavLink>

</EjsButton>

@*to pass parameters on click*@

<EjsButton OnClick="Check">Pass Parameters</EjsButton>

<EjsGrid DataSource="@Orders" AllowPaging="true">

…………………………………..

</EjsGrid>

@code{

public List<Order> Orders { get; set; }

public string link = "fetchdata";

public string a = "check";

public void Check()

{

link = $"fetchdata/{a}";

}

. . . . . . . .

}

Refer the below screenshot for the output

On Clicking the Navigate to button for first time. It will be navigated to below url

Then click on Pass Parameters button to change the rel='nofollow' href value. Now clicking on Navigate To will navigate to fetchdata along with parameter passed. Refer the below screenshot.

For your convenience we have prepared a client side application which can be downloaded from below.

Sample: https://www.syncfusion.com/downloads/support/forum/147702/ze/ClientApp-729411084

Also refer the below documentation for your reference

https://docs.microsoft.com/en-us/aspnet/core/blazor/routing?view=aspnetcore-3.0#navlink-component

Please get back to us if you have further queries.

Regards,

Vignesh Natarajan.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
147702	Sep 20,2019 10:44 AM UTC	Sep 24,2019 09:27 AM UTC	Blazor	6

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US