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

本文介绍了如何将URL输入参数值传递给Blazor页面？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这会将值传递到Blazor组件

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

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

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页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！

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

问题描述

推荐答案

ParentComponent.razor

ChildComponent.razor

计数器剃须刀

相关文档推荐