How do I pass value from my razor page to another razor page?

Hi guys,

I'm new to programming and was introduced to razor by a friend so I think this might be a very simple question to answer.

If I have a variable from Index.razor page, for example:

Index.razor

@code {
       int userChoice = 5;
}

I made a new page called test.razor and I want to pass the userChoice from index.razor to my new razor page, how will I go about doing this?

Test.razor

@code {
      int theUserChoiceFromIndexPage = Index.userChoice;
}

Sorry and thank you in advance!

Hi @420BlazorIt,

Are you using Radzen to create those pages? The thread category suggests so but the code you have provided does not look as something Radzen would produce.

Hi @korchev,

I dont think I am using radzen, just visual studio and then created a razor page, maybe its blazor?
Sorry for the confusion.

In that case you should probably refer to the Blazor documentation.

Hello whether you are using Radzen or Visual Studio version of Blazor, you have three options

  1. Pass the value as a parameter. Look this up. But this is not secure because users can see the value you passed.
  2. Used Blazored.Session storage package from nuget. This also is not secure
    3.Use ProtectedSessionStorage from Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage package. This third option is secure. See code snippet below:-

//first page
using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage;

public partial class FirstPageComponent
{
[Inject]

    ProtectedSessionStorage sessionStorage { get; set; }

//code to pass value

private async Task SetOrderID()
{
int orderID=10;
await sessionStorage.SetAsync("NewOrderID", orderID);
UriHelper.NavigateTo("SecondPage");//code to redirect to second page
}

}
//second page
using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage;
public partial class SecondPageComponent
{
[Inject]

    ProtectedSessionStorage sessionStorage { get; set; }

//code to retrieve value

private async Task GetOrderID()
{
ProtectedBrowserStorageResult result = await sessionStorage.GetAsync("NewOrderID");

            if (result.Success)
            {
                .........................................
            }

}

}

1 Like

Hi,

will this sessionStorage retain value if the page is opened in a new browser TAB using JSRuntime.InvokeAsync ? Pls confirm.

Which nuget package do i need to download if any? When i type in the

using microsoft.aspnetcore.components.server

nothing comes up

The library is included by default in ASP .NET Core 3.0+ projects. In .NET namespaces, letter casing matters, so in your case it would be:

using Microsoft.AspNetCore.Components.Server;

If you're still missing the package, then simply run in a terminal in your .csproj folder:

dotnet add package Microsoft.AspNetCore.Components.Server

All of that works up until now, but benjamin suggested the .ProtectedBrowserStorage at the end of the Microsoft.AspNetCore.Components.Server and it can't find that or doesnt recognise it, am i doing something wrong?

@using Microsoft.AspNetCore.Components.Server;
//when i add .ProtectedBrowserStorage at the end of the using statement, 
//it doesnt recognise it

A quick google search shows that this is a class, not a namespace. With this namespace you should already be able to instantiate and use it.

Use the latest .NET 5.0 SDK or latest version of RADZEN. I can confirm that it is automatically available in the latest version of RADZEN. I will upload my video on this very soon and update you guys

I am not sure. Try it out

Guys the video tutorial is finally ready. How To Pass Data From One Blazor Page To Another Using ProtectedSessionStorage - YouTube

How to pass data from one page to another in blazor using protectedsessionstorage - Radzen IDE (Blazor server-side) - Radzen