knockout.js 在Blazor应用程序外使用Blazor组件(例如knockoutjs)

fjnneemd 于 2022-11-10 发布在其他

关注(0)|答案(3)|浏览(154)

我正在做一个迁移项目。我是团队中唯一的JS开发人员，其他人都是C#开发人员。我们正在寻找迁移我们现有的用.Net MVC Knockoutjs编写的应用程序。由于我们团队中的大多数人都是C#开发人员，我们正在给blazor一个尝试。
由于整个应用程序的重写需要时间，我们希望以blazor组件的形式一段一段地重写应用程序，并一次导出一个组件，以便在现有的knockoutjs应用程序中重用。
这将使我们能够从knockout过渡到blazor，同时继续支持和维护现有的应用程序。
我已经把Angular 元素作为一种方法，但是，就像我提到的，我们想给予blazor一个机会。我很好奇，如果我们可以导出blazor组件到其他应用程序中，并允许它们之间的数据流。
如有任何帮助/建议，我们将不胜感激。
谢谢

knockout.js

来源：https://stackoverflow.com/questions/68805126/using-blazor-components-outside-of-blazor-app-eg-knockoutjs

3条答案

按热度按时间

2g32fytz1#

如果你想尝试用blazor组件一次一个地替换MVC页面上的所有javascript，你可以试试这个过程，它对我很有效。
首先，更新或转换你的MVC项目到.Net 5.0.402。它可能在一个更早的版本上工作，但我还没有测试过。
在您的MVC解决方案中，添加一个blazor Web程序集应用程序项目。这是Web程序集组件项目。
在MVC视图上，在您希望渲染blazor组件的位置添加：

@using myawesomewasmprojectnamespace.Pages

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

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

"@using“声明引用Pages目录中的blazor Web程序集应用项目。”typeof（Counter）“类型引用Visual Studio提供的默认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应用程序Startup.cs的“public void Configure（IApplicationBuilder应用程序，IWebHostEnvironment环境）”方法中，添加以下内容：

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"

这花了我很长时间才整理好，如果不适合你，请告诉我。

赞(0）回复(0）举报 2022-11-10

hi3rlvi22#

在做了大量的研究和阅读了大量的微软文档之后，我能够在Blazor之外的不同框架中运行一个单独的Blazor组件（在我的例子中是Knockout MVC），
首先，我在Visual Studio中以.net 5.0为目标初始化了一个新的Blazor Webassmebly项目。
为了简单起见，让我们从blazor引导程序中获取计数器组件。
步骤1导入您想要导出为可重用组件的组件，如下所示-x1c 0d1x
步骤2 -修改MainLayout.razor以加载组件

第三步-这是关键的一步。在你的Counter组件中，你应该添加下面几行代码，这里我们将使用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]标识符帮助. net将此函数识别为从JavaScript调用的函数。
步骤4修改Program.cs和index.html
修改index.html并将div id更改为counter

接下来，修改您的program.cs以在html.

中查找计数器ID
步骤5 -设置javascript窗口对象的点引用
在index.html中的script标记下添加以下脚本-

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

这就是你在blazor webassembly应用上要做的全部事情。
第6步-发布您的blazor应用程序到一个文件夹。我现在使用默认位置。一旦发布，您将看到以下文件和文件夹，我们感兴趣的是_framework文件夹的大部分。
x1c4d 1x指令集
发布完成后，将_framework文件夹复制到另一个应用程序的根目录，如-

第7步-转到你想要的框架，现在我将使用敲除mvc应用程序。
在布局.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步-在layput.cshtml中创建一个div，其中包含id=counter
创建一个id=counter的div，这将帮助blazor appp识别应该在其中放置组件的div，如下所示-

<div id="counter"> 

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

为了在页面加载时就能看到blazor组件，如果你想按需加载组件，我在主机应用程序中添加了一个按钮，以显示一旦组件加载，你可以只调用blazor函数。
在blazor interop.js中，Blazor.start将启动blazor应用程序，然后DotNetReference.invokeMethodAsync将触发blazor内部的函数，计数器将递增。
步骤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>

完成了！启动你的淘汰赛应用程序，你就可以看到组件了。
这基本上就是我们在mvc knockout应用程序中加载blazor组件所需要发生的事情，这种方法应该也适用于任何其他框架，但是我不确定是否要在像angulr、react等框架中添加mime类型来提供静态内容，但我确信一定有某种方法。我还没有研究过这方面的内容。
可能会有一些错误，一个人可能会遇到，所以我留下了一些文档，我在整个过程中提到。
从JS https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-dotnet-from-javascript?view=aspnetcore-6.0调用.Net方法
从.net调用JS方法
https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-6.0
如何正确使用blazor.start
https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/startup?view=aspnetcore-6.0
我花了很多时间来整理，这个特定的工作流程已经为我们工作，并计划在月底发布。
这帮助我们在Blazor中为我们的应用程序开发了新功能，从而无需获得新资源就可以进入新技术。

赞(0）回复(0）举报 2022-11-10

kiayqfof3#

从.NET 6开始，一种可能性是通过调用JSComponentConfigurationExtensions.RegisterForJavaScript使Blazor组件可用于从JavaScript示例化。
我也在一个情况下，我想迁移一个现有的JS应用程序到Blazor一步一步。然而，它是一个Angular 的应用程序。为了评估一个可能的解决方案，我创建了一个演示迁移项目。请参阅我的BlazorInAngularDemo github project的代码和描述，以及一个工作演示。但正如已经说过的，它是专门为Angular 。但也许一些想法，特别是在自述文件，可以帮助你无论如何。

赞(0）回复(0）举报 2022-11-10

我来回答

knockout.js 在Blazor应用程序外使用Blazor组件(例如knockoutjs)

3条答案

相关问题

热门标签

最新问答