如何从 MVC/Razor 页面将参数传递给顶级服务器端 blazor 组件？答案

【问题标题】：How to pass parameters to a top-level server-side blazor component from an MVC/Razor page?如何从 MVC/Razor 页面将参数传递给顶级服务器端 blazor 组件？
【发布时间】：2020-01-13 01:01:10
【问题描述】：

将 Blazor 组件添加到现有 MVC 或 Razor 页面时，能够将参数传递到 Blazor 组件中非常有用，例如将 MVC 页面的 URL（例如 ID）中的参数传递到组件。

在 Core 3 Preview 9 之前，这对于使用以下语法的服务器渲染组件是可能的：

@(await Html.RenderComponentAsync<NewJobComponent>(new { SaleId = Model.SaleId }))

但是从 Preview 9 开始parameters can only be passed to statically rendered Blazor components。

组件仍然需要知道来自外部MVC页面的信息，如何实现？

【问题讨论】：

标签： c# blazor blazor-server-side

【解决方案1】：

更新

从 .NET Core 3.1 预览版 1 开始，这种用于将参数传递给所有类型的顶级组件的工具现已恢复，正如 Dan Roth 在 this blog post 中所讨论的那样：

将参数传递给顶级组件

Blazor 服务器应用现在可以将参数传递给顶级组件在初始渲染期间。以前你只能传递参数到带有RenderMode.Static 的顶级组件。有了这个版本， RenderMode.Server 和 RenderModel.ServerPrerendered 现在都是支持的。任何指定的参数值都被序列化为 JSON 和包含在初始响应中。

例如，您可以使用特定的当前计数如下：
Html.RenderComponentAsync<Counter>(RenderMode.ServerPrerendered, new {
CurrentCount = 123 })) ```

原答案

由于performance issues around the stateful prerendering of pages，此功能已被删除，希望是暂时的。

在 Blazor 组件中检索 URL 参数和 ID

希望将参数直接传递给组件的功能将返回，但与此同时，可以通过将NavigationManager（以前称为IUriHelper）注入到 Blazor 组件中来检索来自外部 MVC 页面 URL 的参数组件：

@Inject NavigationManager navigationManager;

然后您可以使用this kind of approach 作为discussed here 从 URL 访问命名参数：

protected override void OnParametersSet()
{
   var uri = new Uri(navMan.Uri);
   string myparamStr= 
Microsoft.AspNetCore.WebUtilities.QueryHelpers.ParseQuery(uri.Query).TryGetValue("myparam", out var myparam) ? myparam.First() : "";
}

如果你在寻找来自 URL 的 ID（例如 www.mysite.com/sales/32），那么你可以这样做：

public static bool GetIdFromUri(string uriAddress, out int id)
{
    var uri = new Uri(uriAddress);

    string lastSegment = uri.Segments.Last();

    if (!string.IsNullOrWhiteSpace(lastSegment) && int.TryParse(lastSegment, out var paramId))
    {
        id = paramId;
        return true;
    }

    id = -1;
    return false;
}

使用包装器组件保持关注点分离的完整性

在组件中添加查询 URL 的功能将限制该组件的可重用性，因为它现在依赖于特定格式的 URL。

一种解决方案是为我们正在构建的组件创建一个额外的包装 Blazor 组件。

然后，该包装器组件将负责从页面的 URL 中提取值（例如使用上述方法），或者可以使用 Blazor 的 JS 互操作从页面中检索数据，然后将这些值传递给实际的 Blazor完成工作的组件。

这允许原始组件继续使用参数，并允许该组件可重用。它还提供了更好的关注点分离，并且避免了以后打开已完成组件的需要，如果选择将参数直接传递给组件返回（在这种情况下可以简单地删除包装器组件）

on this github issue 上有更多关于这一切的讨论。

【讨论】：

【解决方案2】：

ASP.NET Core 3.1 从您的 MVC 视图中，您可以使用 param- 将参数传递给 Server / Server-Prerenders 组件

例如

<div class="mb-4">
    <component type="typeof(TestStorables)"
               render-mode="Server"
               param-UserId="@Model.UserId"
               param-AccountId="@Model.AccountId"
               param-Environment="@Model.Environment"
               param-Title="@Convert.ToString("Test Storable")"
               param-PartitionKey="@Model.AccountId"
               param-Limit="10" />

</div>

【讨论】：