.NET Core Blazor App:如何在页面之间传递数据?
.NET Core Blazor App: How to pass data between pages?
我刚开始学习如何使用 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" />
我想将文本框中的值发送到另一个页面。我该怎么做?
您可以将其作为参数传递。
在您要导航到的页面中,将参数添加到您的路由:
@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
在 preview-9 上,你应该使用 navigationManager 而不是 uriHelper,它还有一个 NavigateTo
方法
@inject Microsoft.AspNetCore.Components.NavigationManager navigationManager
我个人更喜欢将查询字符串添加到 url。
例如,当我想在加载页面时预先 select 选项卡:
像 http://localhost:5000/profile?TabIndex=2
这样调用 url
在您的代码中,您可以使用 NavigationManager and 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;
}
}
}
}
我在页面中测试弗洛雷斯答案时出错,我们是否传递了数据
下面是当前页面
@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; }
我刚开始学习如何使用 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" />
我想将文本框中的值发送到另一个页面。我该怎么做?
您可以将其作为参数传递。
在您要导航到的页面中,将参数添加到您的路由:
@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
在 preview-9 上,你应该使用 navigationManager 而不是 uriHelper,它还有一个 NavigateTo
方法
@inject Microsoft.AspNetCore.Components.NavigationManager navigationManager
我个人更喜欢将查询字符串添加到 url。
例如,当我想在加载页面时预先 select 选项卡:
像 http://localhost:5000/profile?TabIndex=2
在您的代码中,您可以使用 NavigationManager and 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;
}
}
}
}
我在页面中测试弗洛雷斯答案时出错,我们是否传递了数据
下面是当前页面
@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; }