在blazor应用程序之外使用blazor组件(例如，knockoutjs)

Question

我正在做一个迁移项目。我是团队中唯一的JS开发人员，其他人都是C#开发人员。我们希望迁移用.Net MVC Knockoutjs编写的现有应用程序。由于大多数团队成员都是C#开发人员，因此我们尝试了一下blazor。

由于整个应用程序重写将需要时间，我们希望以blazor组件的形式逐段重写应用程序，并一次导出一个组件，以便在现有的knockoutjs应用程序中重用。

这将允许我们从淘汰型转移到blazor，同时继续支持和维护现有的应用程序。

我已经把角度元素看作是一种方式，然而，就像我提到的，我们想给blazor一个机会。我很好奇，我们是否可以将blazor组件导出到其他应用程序中，并允许它们之间的数据流。

如有任何帮助/建议，我们不胜感激。

谢谢

Answer 1

在做了大量的研究和阅读了大量的微软文档后，我能够在blazor之外的一个不同的框架中运行一个单独的blazor组件(在我的例子中是敲出mvc )，

首先，我在Visual Studio中初始化了一个新的Blazor Webassmebly项目，目标是.net 5.0。

为了简单起见，让我们从blazor bootstrap应用程序中获取计数器组件。

Step -1导入您想要导出的组件作为可重用组件，如下所示-

​

步骤2-修改MainLayout.razor以加载组件

​

​

第三步--这是至关重要的一步。在您的计数器组件中，您应该添加以下代码行，这里我们将使用DotNetObjectReference设置组件的引用

注入@inherits LayoutComponentBase @inject IJSRuntime js

在你的组件代码部分-

 private int currentCount = 0;

    private DotNetObjectReference<Counter> jsToDotNetBridgeReference;
    protected override async Task OnInitializedAsync()
    {
        jsToDotNetBridgeReference = DotNetObjectReference.Create(this);
        await js.InvokeVoidAsync("SetDotNetReference", jsToDotNetBridgeReference);
    }


    [JSInvokable]
    private void IncrementCount()
    {
        currentCount++;
    }

JSInvokable标识符帮助dotnet将此函数识别为可从JavaScript调用的函数。

步骤4修改Program.cs和index.html

修改您的index.html并将div id更改为counter

​

接下来，修改您的program.cs以在html中查找计数器id。

​

第5步-将dotnetreference设置为javascript窗口对象

在脚本标记下的index.html中，添加以下脚本-

window.SetDotNetReference = function (pDotNetReference) {
        DotNetReference = pDotNetReference;
    }

这就是你在blazor webassembly应用上要做的全部事情。

第6步-将blazor应用程序发布到文件夹。我现在使用默认位置。发布后，您将看到以下文件和文件夹，我们对_framework文件夹很感兴趣。

​

​

发布完成后，将_framework文件夹复制到其他应用程序的根目录，如下所示-

​

第7步-转到您想要的框架，现在我将使用knockout mvc应用程序。

在您的layout.cshtml文件中添加对blazor库的引用，如下所示

<script src="~/_framework/blazor.webassembly.js" autostart="false"></script>

保留autostart = false，是确保你的blazor组件不会在不需要的时候加载的好方法。

第8步-创建BlazorInterop.js

在您的框架项目中创建一个js文件，我喜欢将其命名为BlazorInterop.js (可以是任何名称)，然后在您的layout.cshtml中引用它，如下所示

<script src="~/BlazorInterop.js?" type="text/javascript"></script>

在BlazorInterop.js中，您将编写想要在blazor应用程序内的主机应用程序中执行的函数。就像这样-

       IncrementCounter = function () {
    Blazor.start().then(()=> {
        DotNetReference.invokeMethodAsync('IncrementCounter');
    })
   
}

步骤9-使用id=counter在layput.cshtml中创建一个div

使用id=counter创建一个div，这将帮助blazor appp识别出它应该将组件放置在哪个div中，如下所示-

 <div id="counter"> 

    </div>
    <button type="button" onClick="IncrementCounter"> Increment Counter </button>

为了从time页面中看到blazor组件，设置autostart=true否则，如果您想按需加载组件，我在主机应用程序中添加了一个按钮，以显示您可以在组件加载后调用blazor函数。

在你的blazor interop.js中，Blazor.start将启动blazor应用程序，然后DotNetReference.invokeMethodAsync将触发blazor和counter内部的函数，计数器将递增。

第10步-在web.config中的mvc应用程序中添加mime类型，以提供静态内容，如下所示-

 <staticContent>
      <remove fileExtension=".wasm"/>
      <mimeMap fileExtension=".wasm" mimeType="application/wasm"/>
      <remove fileExtension=".dat"/>
      <mimeMap fileExtension=".dat" mimeType="application/dat"/>
      <remove fileExtension=".br"/>
      <mimeMap fileExtension=".br" mimeType="application/br"/>
      <remove fileExtension=".gz"/>
      <mimeMap fileExtension=".gz" mimeType="application/gz"/>
      <remove fileExtension=".blat"/>
      <mimeMap fileExtension=".blat" mimeType="application/blat"/>
      <remove fileExtension=".pdb"/>
      <mimeMap fileExtension=".pdb" mimeType="application/pdb"/>
      <remove fileExtension=".dll"/>
      <mimeMap fileExtension=".dll" mimeType="application/octet-stream"/>
      <remove fileExtension=".json"/>
      <mimeMap fileExtension=".json" mimeType="application/json"/>
    </staticContent>

完成了！启动knockout应用程序，您将能够看到该组件。

这基本上是我们在mvc淘汰型应用程序中加载blazor组件所需要发生的事情，这种方法也应该适用于任何其他框架，但是我不确定是否可以添加mime类型来服务于诸如angulr，react等框架中的静态内容，但我相信一定有某种方法。我没有研究过这一点。

可能会遇到一些错误，所以我留下了一些文档，我在整个过程中引用了这些文档。

从JS https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-dotnet-from-javascript?view=aspnetcore-6.0调用.Net方法

从.net调用JS方法

https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-6.0

如何正确使用blazor.start

https://docs.microsoft.com/en-us/aspnet/core/blazor/fundamentals/startup?view=aspnetcore-6.0

这对我来说花了很多时间，这个特定的工作流程已经为我们工作了，并计划在本月底发布生产版本。

这帮助我们在Blazor中为我们的应用程序开发新功能，从而在不需要获得新资源的情况下进入新技术。

Answer 2

如果你想尝试用blazor组件一次一个地替换MVC页面上的所有javascript，你可以尝试这个过程，它对我很有效。

首先，将您的MVC项目更新或转换为.Net 5.0.402。它可能会在早期版本上运行，但我还没有测试过它。

将blazor web程序集应用程序项目添加到MVC解决方案中。这是web组装组件项目。

在MVC视图中，在您希望渲染blazor组件的位置添加：

@using myawesomewasmprojectnamespace.Pages

<component type="typeof(Counter)" render-mode="WebAssemblyPrerendered"/>

<script src="_framework/blazor.webassembly.js"></script>

“@using”声明引用blazor web程序集应用程序项目的Pages目录。“typeof(Counter)”类型指的是默认的blazor web组装应用程序项目中的Counter.razor组件。

我假设您能够编写自己的blazor组件来与Counter.razor组件进行交换。

在MVC项目的_Layout.cshtml中，或者MVC视图的<head>标记所在的任何位置，对于每个包含blazor组件的页面，将其包含在<head>标记中：

<base href="/"/>

将'Microsoft.AspNetCore.Components.WebAssembly.Server‘包添加到您的MVC项目。

在MVC依赖项的项目引用中，添加对blazor web程序集应用程序项目的引用。

在MVC apps Startup.cs，'public void Configure(IApplicationBuilder app，IWebHostEnvironment env)‘方法中，添加以下内容：

app.UseBlazorFrameworkFiles();

在blazor web程序集应用程序项目Program.cs文件中，注释掉以下行以停止应用程序查找'<div id="app"></div>‘

//builder.RootComponents.Add<App>("#app");

最后，从blazor web组装应用程序项目的wwwroot目录中删除favicon，因为它将与MVC冲突。

这会将“Counter”组件添加到MVC视图中。

要将不同的构件添加到不同的视图，请使用以下命令插入该构件：

@using myawesomewasmprojectnamespace.Pages

<component type="typeof(Myawsomecomponentnamecompletelydifferentfromanymvccontrolleroractionname)" render-mode="WebAssemblyPrerendered"/>

<script src="_framework/blazor.webassembly.js"></script>

并使用以下命令启动blazor组件：

@page "/myawsomecomponentnamecompletelydifferentfromanymvccontrolleroractionname"

这花了我很长时间，如果对你不起作用，请让我知道。

Answer 3

从Blazor6开始提供的一种可能性是通过调用JSComponentConfigurationExtensions.RegisterForJavaScript使.NET组件可用于从JavaScript实例化。

我也遇到了这样一种情况:我想一步一步地将现有JS应用程序迁移到Blazor。然而，它是一个Angular应用程序。为了评估可能的解决方案，我创建了一个演示迁移项目。代码、说明和working demo请参见我的BlazorInAngularDemo github project。但正如已经说过的，它是专门针对Angular的。但也许一些想法，特别是在自述文件中，无论如何都可以帮助你。