问题描述

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

在Core 3预览版9之前，服务器呈现的组件可以使用以下语法：

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

但从预览版9开始parameters can only be passed to statically rendered Blazor components。

组件仍需要从外部MVC页面了解信息，如何实现此目的？

推荐答案

更新

此向所有类型的顶级组件传递参数的工具现已从.NET Core 3.1预览版1中恢复，如Dan Roth的this blog post中所述：

将参数传递给顶级组件

Blazor服务器应用程序现在可以将参数传递给顶级组件 在初始渲染期间。以前，您只能传递参数 添加到带有RenderMode.Static的顶级组件。在此版本中， 和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 approachASdiscussed here：

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() : "";
}

of如果您要查找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 Interop从页面检索数据，然后将这些值传递给执行该工作的实际Blazor组件。

这允许原始组件继续使用参数，并允许该组件可重用。它还提供了更好的关注点分离，并避免了在直接将参数传递给组件的选项返回(在这种情况下，只需删除包装组件)时打开已完成的组件的需要。

在此on this github issue上有更多关于这方面的讨论。

这篇关于如何从MVC/Razor页面向顶级服务器端Blazor组件传递参数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！