如何从MVC/Razor页面向顶级服务器端Blazor组件传递参数?

How to pass parameters to a top-level server-side blazor component from an MVC/Razor page?(如何从MVC/Razor页面向顶级服务器端Blazor组件传递参数?)

本文介绍了如何从MVC/Razor页面向顶级服务器端Blazor组件传递参数?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

将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:

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

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组件传递参数?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:如何从MVC/Razor页面向顶级服务器端Blazor组件传递参数?

基础教程推荐