如何将URL输入参数值传递给Blazor页面？

Question

这将一个值传递到Blazor组件中

[Parameter]
public string Id { get; set; }

但是如何从URL输入参数传递值呢？

- 001

---

添加一个 @page "/path/to/page/{id:string}"？ - itminus

https://dev.to/bradwellsb/pass-data-between-blazor-pages-using-route-parameters-3p85 - jazb

尝试使用 await Http.PutJsonAsync($"/path/to/page/{Id}, value); - CHanaka

Answer 1

使用参数属性注解定义在组件中的公共属性，可以用于存储从父组件传递给子组件的组件参数。例如，以下代码将一个字符串参数从父组件传递给其子组件。

ParentComponent.razor

<ChildComponent Title="我是子组件" />

ChildComponent.razor

<p>@Title</p>

@code{
     Public string Title { get; set; } = "Default Title";
}

或者，存储路由数据的值，例如，在url中的路由数据Start https://localhost:44396/counter/123 ，如果定义了一个名为Start的公共属性，并使用Parameter属性进行注释，则框架会自动完成：

Counter.razor

    @page "/counter"
@page "/counter/{start:int}"

<h1>Counter</h1>

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

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {

    [Parameter]
    public int Start { get; set; }


    private void IncrementCount()
    {
        Start++;
    }
}

注意，计数器组件的定义包含两个路由模板。第一个路由模板设置为使用Start属性的默认值；即值为0。但用户可以通过在url中提供路由参数来更改默认值，例如：https://localhost:44396/counter/123。现在当按钮被点击时，起始值为123，而不是0。仅供参考，第二个模板包含一个路由约束，该约束将应用程序限制为仅使用int值。

- enet

---

请问您能否告诉我解决多个变量的方法？谢谢。 - undefined

Answer 2

相关内容在文档中: 组件路由

- agua from mars

---

路由在主布局中不起作用？ :) 只在 Razor 组件中起作用！ - 001

@001 - 如果这是问题的话，那么你需要提出一个更好的问题。 - H H

Answer 3

一个 Blazor 页面实际上是一个以 @page 指令开头的 Blazor 组件。

事实上，所有的 Blazor 组件都只是带有 .razor 扩展名的 Razor 组件。

所以，当你使用 URL 通过 URL 重定向页面时，你应该 重写 OnParameterSet() 或 OnParameterSetAsync() 方法。

这是我作为我的 Blazor 经验总结的理解。请随时提出任何更正。

- Berkay