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

Question

这会将一个值传递给 blazor 组件

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

但是从 URL 输入参数传递一个值呢？

Answer 1

它在文档中：components routing

Answer 2

A public 属性在组件中定义，并使用 Parameter 属性进行注释，用于存储从其父组件传递给子组件的组件参数，例如，以下代码将字符串参数从父组件传递到其子组件。

ParentComponent.razor

<ChildComponent Title="I'm a child component" />

ChildComponent.razor

<p>@Title</p>

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

或者，存储路由数据的值，例如，路由数据开始于url https://localhost:44396/counter/123，这是框架自动完成的，如果你定义了一个public属性命名为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++;
    }
}

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

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

How to pass a URL input parameter value to Blazor page?

c#

asp.net

asp.net-core

blazor

ParentComponent.razor

ChildComponent.razor

Counter.razor