Blazor：注入的服务数据在预渲染期间正常，但在第二次加载时消失

Question

我正在将组件渲染作为 ServerPrerender 运行。使用.Net 7。 我已将 HTTP Post 数据放入范围服务中，并将其注入 Razor 组件中。在预渲染期间，可以从该服务中很好地读取数据，但是当再次调用 OnInitializedAsync 时，来自该服务的值为 null。

如果我将组件渲染更改为服务器，则值始终为空。

我搜索过这个网站但无法解决这个问题。

我在页面中有一个表单，它向 Razor 组件页面执行 POST，该页面应该读取值并根据它们获取数据。

编辑1： 我的代码基于这里的答案： 如何在 Blazor 页面中使用从 POST 请求收到的表单数据？

我有一个 _Host.cshtml，它有一个模型，我在其中将 OnPostAsync 中的表单数据读取到作用域服务中。 然后将该服务注入到我的 .razor 组件中，我试图在其中读取数据。

编辑2： _主机.cshtml

@model HostPageModel
<component type="typeof(App)" render-mode="ServerPrerendered" />
or
<component type="typeof(App)" render-mode="Server" />

主机页面模型

// postFormService is injected by the DI
public HostPageModel(PostFormService postFormService)
{
    PostFormService = postFormService;
}

private PostFormService PostFormService { get; }

public async Task OnPostAsync()
{
    // store the post form in the PostFormService
    PostFormService.Form = Request.Form;
}

MyRazor.razor

@inject PostFormService PostFormService
@code {
  var loginUserId = PostFormService.Form?["LoginUserId"];
}

编辑3： 我也尝试过这种方法，但无法将任何数据传递到我的 Razor 组件。 _Host.csthml（Model.FormGuid 由模型的 OnPost 设置）

@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered, new { FormGuid = Model.FormGuid }))

App.razor（指南打印得很好）

<div>@this.FormGuid</div>
<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <NotAuthorized>
                    <h3>Not authorized</h3>
                    <Saga.Presentation.Web.Core.Pages.RedirectToLogin />
                </NotAuthorized>
                <Authorizing>
                    <p>Logging in...</p>
                </Authorizing>
            </AuthorizeRouteView>
        </Found>
        <NotFound>
            <PageTitle>Not found</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>Page not found.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

@code{
    [Parameter] 
    public Guid FormGuid { get; set; }

    protected override void OnInitialized()
    => this.FormDataService.GetFormData(FormGuid);
}

Component.razor（此处FormGuid为空）

@code {
    [CascadingParameter] public Guid FormGuid { get; set; }
}

Answer 1

因此，我按照问题作者在此处所做的操作来实现此目的：Blazor Server：范围服务问题

简而言之

1. 向我的数据服务添加一个名为 FormData 的属性，该属性保存要在 Razor 页面中使用的数据。

2. 我在 _Hosts.cshtml 文件的 Model 类中创建数据对象。 就我而言，我正在读取 HTTP POST 数据，因此我有一个 OnPostAsync() 方法，我可以在其中读取 Request.Form 中的值。

3. 我通过将“param-FormData”添加到组件渲染来将该对象传递给 App.razor

4. 使用 [Parameter] 属性在 App.razor 中创建 FormData 属性

   [参数] 公共 FormData FormData { 获取；放; } = new();

5. 在 App.razor 的 OnIntialized 中，我设置了注入服务的数据属性

   FormDataService.AddFormData(FormData);

现在我可以将该服务注入任何其他 Razor 组件并获取值。

@inject FormDataService FormDataService