.NET Core Blazor 应用程序：如何在页面之间传递数据？

Question

我刚开始学习如何使用Blazor模板制作网站，但不知道如何将数据从一个页面传递到另一个页面。这与.NET CORE MVC Web应用程序有些不同，我找不到相关示例。

    <p>Solve This problem: @rnd1 * @rnd2 = ?</p>

    <input type="text" name="result" bind="@result" />
    <input type="button" onclick="@calculate" value="Submit" />

我想把文本框里的值发送到另一个页面，应该怎么做？

- jorjj

---

如果您想在查询字符串中传递多个参数，可以查看 https://dev59.com/IVQJ5IYBdhLWcg3weVy7#57914502。 - Antonio Correia

可能是 https://dev59.com/VXQOtIcB2Jgan1zniV4F#72183754 的重复问题。 - James Heffer

Answer 1

你可以将它作为参数传递。

在你想要导航到的页面中，将该参数添加到你的路由中：

@page "/navigatetopage/{myvalue}"

确保参数存在于该页面中：

[Parameter]
private string myvalue{ get; set; }

在同一页上，您可以找到并选择：

protected override void OnParametersSet()
{
    //the param will be set now
    var test = myvalue;
}

现在在您的起始页面中，请确保导航到包括该值的第二个页面：

uriHelper.NavigateTo($"/navigatetopage/{result}");

uriHelper需要这样注入：

@inject Microsoft.AspNetCore.Blazor.Services.IUriHelper uriHelper

更新预览-9 在预览-9版本中，您应该使用navigationManager而不是uriHelper，它还具有NavigateTo方法。

@inject Microsoft.AspNetCore.Components.NavigationManager navigationManager

- Flores

---

不，只要在路由和参数处都进行调整，你可以将其设为camelCase。 - Flores

有没有办法在导航时将 object 传递到下一页？我尝试了 Parameter 和 CascadeParameter，但无法访问它。 - Venkata Dorisala

如果您想传递自定义模型，有没有方法可以做到这一点？ - Jeremy S.

如果我想将参数传递给某个目标页面，但允许该页面重新加载（而不必再次传递参数），有什么方法可以“清除”URL参数吗？ - ed22

@JeremyS. 在页面之间传递整个数据模型是不好的，因为它可能会打开恶意攻击或窃取数据的方式。当您通过URL传递参数时，最好使用引用数据的某些内容（通常只是一些数字），而不是数据本身。然后，您可以使用该引用来检索新页面所需的数据。在此过程中还要考虑使用数据传输对象（DTOs）。 - Tyson Gibby

Answer 2

更近期的版本支持以下功能：

您正在浏览的页面：

<NavLink href="/somepage/1">Navigate to page 1</NavLink>

您正在导航到的页面：

@page "/somepage/{childId:int}"

<h1>Some Page</h1>

<p role="status">Current child: @childId</p>

@code {
    [Parameter]
    public int childId { get; set; }
}

- user0000001

Answer 3

我个人更喜欢在URL中添加查询字符串。

例如，当我想要在页面加载时预先选择选项卡：

调用此URL：http://localhost:5000/profile?TabIndex=2

在您的代码中，您可以使用NavigationManager和QueryHelpers来解析它。

添加 using Microsoft.AspNetCore.WebUtilities;

然后重写其中一个生命周期方法并解析查询参数。

protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            Uri uri = this.Nav.ToAbsoluteUri(this.Nav.Uri);
            if (QueryHelpers.ParseQuery(uri.Query).TryGetValue("TabIndex", out StringValues values))
            {
                if (values.SafeAny())
                {
                    _ = int.TryParse(values.First(), out int index);
                    this.TabIndex = index;
                }
            }
        }
    }

- Nikolay Rogchev

Answer 4

我在测试 Flores 的答案时遇到了一个错误，这发生在我们传递数据的页面上。

以下是当前页面。

@inject Microsoft.AspNetCore.Components.NavigationManager navigationManager

Int64 Id {get;set;}

<MudMenuItem @onclick="@(() => NextPage(@Id))">Next Page</MudMenuItem>

//So Here I am passing the ID which is long
private void NextPage(Int64 Id){
    navigationManager.NavigateTo($"/secondPage/{Id}");
}

第二页

Instead of using -Id only you need to cast it to long or else it throws an error

-From
@page "/pettyCashAuditTrail/{Id}"
-To
@page "/pettyCashAuditTrail/{Id:long}"

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

- Cyrille Con Morales