如何在 Blazor 中的页面之间从编辑表单发送值答案

【问题标题】：How to send value from edit form between pages in Blazor如何在 Blazor 中的页面之间从编辑表单发送值
【发布时间】：2021-08-16 12:00:42
【问题描述】：

所以，我在 Blazor Server 中有一个应用程序，我有两个页面。在第一页上，用户介绍了他的用户名，在他单击登录按钮后，我想在第二页上显示他介绍的用户名。我尝试使用路由参数，但我不知道这是否正确，因为我是 Blazor 新手。

@page "/firstPage"

<EditForm Model="@user" OnValidSubmit="@Login">
                        <label class="form-control-label text-muted">Username</label> <input type="text" id="username" name="username" @bind="user.Username"> 

                        <button class="btn-block btn-color">Login</button>
</EditForm>


@page "/secondPage"

//here I want to show the username from the first page

【问题讨论】：

有很多选择，但我建议阅读 .net 中的 TempData。
您是否使用 ASP.NET Core Identity 的内置身份验证？用户详细信息存储在哪里？在 EF Core 托管数据库中？
@AmalK 不，我没有使用内置身份验证，我使用的是自定义身份验证，是的，我有一个用户类和一个存储数据的 EF Core 托管数据库跨度>
如果你只想传递用户名，可以在url中作为参数传递，参考this。

标签： c# asp.net-core blazor

【解决方案1】：

您的user 模型需要在范围数据服务中。

你可以这样做：

namespace Blazor.App
{
     // Add to services as a scoped service
    public class UserDataService
    {
        public User User { get; set; } = new User();
    }

    public class User
    {
        public string UserName { get; set; }
    }
}

然后注入页面：

@page "/firstPage"
<EditForm Model="@DataService.User" OnValidSubmit="@Login">
                        <label class="form-control-label text-muted">Username</label> <input type="text" id="username" name="username" @bind="DataService.User.Username"> 

                        <button class="btn-block btn-color">Login</button>
</EditForm>
@code {
[Inject] private UserDataService DataService {get; set;}
}

@page "/SecondPage"
<div>@DataService.User.UserName</div>
@code {
[Inject] private UserDataService DataService {get; set;}
}

【讨论】：

我已经有了 User 类和 UserService 类来管理数据库中的数据，抱歉我没有指定
[礼貌] 那么你的问题在哪里？您将编辑表单指向用户类？您可以在服务中使用 LoginAttemptUserName 属性，用于进行身份验证并填充您的用户类。

【解决方案2】：

如果您的应用程序相对简单（很好的问题，简单对某人意味着什么）......但在这种情况下，您可以做一些事情：

不使用页面，而是使用组件。因为 Balzor 是一个基于组件的框架。因此，在同一页面上，您可以拥有多个组件（<component1 /> 和 <component2 />）并且只渲染/显示需要的组件。并且组件可以有参数与一个或两个被绑定。所以你可以读取用户值表单<component1 />并将其传递给<component2 />
您还可以使用建议的自定义服务来存储数据。

两种解决方案都适用于真正简单的应用。但是当您需要将数据传递到多个地方时，它就变成了一场噩梦...您的应用程序状态将一团糟。所以建议检查immutability 和state store 等。React 具有 Flux 扩展，与 Blazor 非常相似，也称为 Fluxor。建议查看他们的文档并尝试将其用于“中等”复杂应用程序。

【讨论】：