如何将URL输入参数值传递给Blazor页面？ [英] How to pass a URL input parameter value to Blazor page?

问题描述

这会将值传递到Blazor组件

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

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

推荐答案

在组件中定义并使用Parameter属性批注的公共属性用于存储从父组件传递给子组件的组件参数，例如，下面的代码将字符串参数从父组件传递给子组件。

ParentComponent.razor

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

ChildComponent.razor

<p>@Title</p>

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

或者，存储路由数据的值，例如，路由数据从urlhttps://localhost:44396/counter/123开始，如果您定义了一个名为start的公共属性，并使用Parameter属性对其进行注释：

，则框架会自动执行此操作

计数器剃须刀

    @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值。

这篇关于如何将URL输入参数值传递给Blazor页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！