Blazor C# 为什么路由参数总是 0 或 Null？

Question

I have the following code:

@using Maelstrom.UI.Web.Shared.Widgets
@using Maelstrom.UI.Web.Shared.Utility

@page "/backlog/{B}"


<ServiceItemWidget>
    <ServiceItemHeaderTemplate>
        <ServiceItemHeaderWidget ServiceItemIdentifier="@B" ServiceItemName="Test Backlog"/>
    </ServiceItemHeaderTemplate>
    <ServiceItemMenuTemplate>
        <ServiceMenuWidget Choices="_choices"/>
    </ServiceItemMenuTemplate>
    <ServiceItemContentTemplate>
        <Switch>
            <Route Template="@GetBacklogTemplate("Dashboard")">
                <BacklogItemDashboard/>
            </Route>
            <Route Template="@GetBacklogTemplate("Profile")">
                <BacklogItemProfile/>
            </Route>
            <Route Template="@GetBacklogTemplate("UserStories")">
                <BacklogItemUserStories/>
            </Route>
            <Route Template="@GetBacklogTemplate("Discussion")">
                <BacklogItemDiscussion/>
            </Route>
            <Route Template="@GetBacklogTemplate("Communication")">
                <BacklogItemCommunication/>
            </Route>
        </Switch>
    </ServiceItemContentTemplate>
</ServiceItemWidget>

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

    private static int _backlogId;

    protected override async Task OnInitializedAsync()
    {
        //_backlogId = B;
        //_backlogId = 1;
    }

    private string GetBacklogTemplate(string page)
    {
        var href = string.Empty;

        switch (page)
        {
            case "Dashboard":
                href = $@"/backlog/{_backlogId}/dashboard";
                break;
            case "Profile":
                href = $@"/backlog/{_backlogId}/profile";
                break;
            case "UserStories":
                href = $@"/backlog/{_backlogId}/userstories";
                break;
            case "Discussion":
                href = $@"/backlog/{_backlogId}/discussion";
                break;
            case "Communication":
                href = $@"/backlog/{_backlogId}/communication";
                break;
        }

        return href;
    }

    private readonly List<MenuChoice> _choices = new()
    {
        new MenuChoice()
        {
            To = $"/backlog/{_backlogId}/dashboard",
            Caption = "Dashboard"
        },
        new MenuChoice()
        {
            To = $"/backlog/{_backlogId}/profile",
            Caption = "Profile"
        },
        new MenuChoice()
        {
            To = $"/backlog/{_backlogId}/userstories",
            Caption = "User Stories"
        },
        new MenuChoice()
        {
            To = $"/backlog/{_backlogId}/discussion",
            Caption = "Discussion"
        },
        new MenuChoice()
        {
            To = $"/backlog/{_backlogId}/communication",
            Caption = "Communication"
        }
    };
}

The issue is that when I go to /backlog/1 for example parameter B is always 0 or null. I've tried declaring it as both an int and a string to see if that mattered. From what I've seen on Google, this should work. Can anyone spot something I'm missing? Thanks in advance.

Jason

Answer 1

I believe when you go back your component re-initializes and resets the value of B, you should use LocalStorage or SessionStorage to store the value of B and use get, set methods of these storage to update and use its value. docs

Answer 2

Answer was right here:

https://github.com/hez2010/BlazorRouter/blob/master/BlazorRouter.Sample/Pages/Counter.razor

<h1>Counter</h1>

<p>Current count: @CurrentCount</p>

<button class="btn btn-primary" @onclick="() => ChangeCount(CurrentCount + 1)">Click me</button>

@code {
    [Parameter] public int CurrentCount { get; set; } = 0;
    [Parameter] public EventCallback<int> CurrentCountChanged { get; set; }
    [Parameter] public Action<int> ChangeCount { get; set; }
    [CascadingParameter(Name = "RouteParameters")] IDictionary<string, object> parameters { get; set; }
    private bool parameterHasSet = false;

    protected override Task OnParametersSetAsync()
    {
        if (parameterHasSet) return Task.CompletedTask;
        parameterHasSet = true;
        base.OnParametersSetAsync();
        if (parameters != null)
        {
            CurrentCount = (int)parameters["init"];
            ChangeCount(CurrentCount);
        }
        return Task.CompletedTask;
    }
}

Answer 3

Is B always null or 0?

Maybe you can try to check if its null on InitializeAsync its because sometimes interface build faster than OnInitializedAsync

@code{
private bool dataFetch {get;set;}


   protected override async Task OnInitializedAsync()
   {
      while(!String.IsNullOrEmpty(B))
           dataFetch = true; //try to log the b if has value
   }
}

Then in your markup

@if(dataFetch)
{
  <ServiceItemWidget>
     ........
}else{
 //progress
}