Blazor: How to pass a parameter via URL to the ViewModel (not to the page/view)

Question

I know how to pass a parameter from the url to a blazor page like this:

@page "/myPage/{myParameter}"

@if(myParameter != null && myParameter != "")
{
  <p>@myParameter</p>
}

@code{
  [Parameter]
  public string myParameter {get; set;};
}

If I would enter something like this in the browser: www.xyz.com/mypage/TEST I could show 'TEST' on my page. But how can I pass a parameter directly to my injected ViewModel?

This doesn't work @page "/mypage/{ViewModel.myParameter}". The ViewModel is injected via Startup.cs and as a services.AddScoped.

I have a 'workaround':

@code {
    [Parameter]
    public string myParameter { get; set; }

    protected override void OnInitialized() //On Page Load
    {
        ViewModel.myParameter = myParameter;
    }
}

Is there a proper way to do this? Thx for help (still new to blazor)

You might try using the ViewModel as a backing property to your [Parameter]... { get => ViewModel.myParameter; set => ViewModel.myParameter = value; } I _think _ ViewModel should be injected already. — jhr
– jhr, Commented May 6, 2021 at 4:04
@jhr Sorry I don't understand what I should try. Where shall I put the 'backing property...' in the ViewModel.cs or in the View.razor @Code{...}? I would love to leave the hole @code{...} block blank as a true View-File with no code. — nogood
– nogood, Commented May 6, 2021 at 9:32
Till now I always used @bind in the editform in the View to get data to the ViewModel but this time I don't have a place to make that binding, because I don't use Userinput from the page. The only info that I want to pass is the Url-Parameter. — nogood
– nogood, Commented May 6, 2021 at 9:34

MrC aka Shaun Curtis · Accepted Answer · 2021-05-06 12:03:23Z

2

MyParameter is extracted from the Route by the Router and passed into the page component as a Parameter in SetParametersAsync. In theory you could put in on the setter for myParameter. Don't - this is very definitely not recommended practice.

Also, Lets say you're on "/mypage/1" and you navigate to "/mypage/2", OnInitialized won't be called. You may think you're navigating between pages, but in reality, your just calling SetParametersAsync on the same component with a new value for MyParameter.

Therefore something like:

    protected override void OnParametersSet() 
    {
        if (!ViewModel.myParameter.Equals(myParameter)) ViewModel.myParameter = myParameter;
    }

will ensure it is set if it changes, otherwise not (I don't know what getters/setters are on myParameter and what setting it every time on OnParametersSet precipitates!).

answered May 6, 2021 at 12:03

MrC aka Shaun Curtis

32.4k3 gold badges27 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nogood Over a year ago

Shaun: It is then impossible to leave the 'view.razor'-Page completly blank of any C# Code (besides the @inject MyViewModelService ViewModel)? And get the url-parameter to the ViewModel? And if I wanted to use that parameter in the viewModel. I should use OnParameterSet from inside the view.razor-page? Did I understand that correct?

MrC aka Shaun Curtis Over a year ago

Basically correct. You could 1. Put the code in a code-behind file 2. If you use the same myParameter on multiple pages build MyParameterComponentBase and then inherit.

Collectives™ on Stack Overflow

Blazor: How to pass a parameter via URL to the ViewModel (not to the page/view)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related