我正在做一个迁移项目。我是团队中唯一的JS开发人员,其他人都是C#开发人员。我们正在寻找迁移我们现有的用.Net MVC Knockoutjs编写的应用程序。由于我们团队中的大多数人都是C#开发人员,我们正在给blazor一个尝试。
由于整个应用程序的重写需要时间,我们希望以blazor组件的形式一段一段地重写应用程序,并一次导出一个组件,以便在现有的knockoutjs应用程序中重用。
这将使我们能够从knockout过渡到blazor,同时继续支持和维护现有的应用程序。
我已经把Angular 元素作为一种方法,但是,就像我提到的,我们想给予blazor一个机会。我很好奇,如果我们可以导出blazor组件到其他应用程序中,并允许它们之间的数据流。
如有任何帮助/建议,我们将不胜感激。
谢谢
3条答案
按热度按时间2g32fytz1#
如果你想尝试用blazor组件一次一个地替换MVC页面上的所有javascript,你可以试试这个过程,它对我很有效。
首先,更新或转换你的MVC项目到.Net 5.0.402。它可能在一个更早的版本上工作,但我还没有测试过。
在您的MVC解决方案中,添加一个blazor Web程序集应用程序项目。这是Web程序集组件项目。
在MVC视图上,在您希望渲染blazor组件的位置添加:
"@using“声明引用Pages目录中的blazor Web程序集应用项目。”typeof(Counter)“类型引用Visual Studio提供的默认blazor Web程序集应用项目中的Counter.razor组件。
我假设您能够编写自己的blazor组件来与Counter.razor组件进行交换。
在MVC项目的_Layout.cshtml中,或者在MVC视图的
<head>
标记所在的位置,将包含blazor组件的每个页面的<head>
标记包括在内:将“Microsoft.AspNetCore.Components.WebAssembly.Server”包添加到MVC项目中。
在MVC依赖项的项目引用中添加对blazor Web程序集应用程序项目的引用。
在MVC应用程序Startup.cs的“public void Configure(IApplicationBuilder应用程序,IWebHostEnvironment环境)”方法中,添加以下内容:
在blazor Web程序集应用程序项目Program.cs文件中,注解掉以下行以停止应用程序查找“
<div id="app"></div>
”最后,从blazor web组装应用程序项目的wwwroot目录中删除favicon,因为它将与MVC目录冲突。
然后将“Counter”组件添加到MVC视图中。
若要将不同的元件加入到不同的视图,请使用以下方法插入元件:
从以下内容开始您的blazor组件:
这花了我很长时间才整理好,如果不适合你,请告诉我。
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
在组件代码部分-
[JSInvokable]标识符帮助. net将此函数识别为从JavaScript调用的函数。
步骤4修改Program.cs和index.html
修改index.html并将div id更改为counter
接下来,修改您的program.cs以在html.
中查找计数器ID
步骤5 -设置javascript窗口对象的点引用
在index.html中的script标记下添加以下脚本-
这就是你在blazor webassembly应用上要做的全部事情。
第6步-发布您的blazor应用程序到一个文件夹。我现在使用默认位置。一旦发布,您将看到以下文件和文件夹,我们感兴趣的是_framework文件夹的大部分。
x1c4d 1x指令集
发布完成后,将_framework文件夹复制到另一个应用程序的根目录,如-
第7步-转到你想要的框架,现在我将使用敲除mvc应用程序。
在布局.cshtml文件中,添加对blazor库的引用,如下所示
保持
autostart = false
,是一个很好的方法,以确保您的blazor组件不加载时,它不需要。第8步-创建BlazorInterop.js
在框架项目中创建一个js文件,我喜欢将其命名为BlazorInterop.js(可以是任何名称),然后在layout.cshtml中引用它,如下所示
在BlazorInterop.js中,您将编写希望从blazor应用程序中的宿主应用程序执行的函数。
第9步-在layput.cshtml中创建一个div,其中包含
id=counter
创建一个id=counter的div,这将帮助blazor appp识别应该在其中放置组件的div,如下所示-
为了在页面加载时就能看到blazor组件,如果你想按需加载组件,我在主机应用程序中添加了一个按钮,以显示一旦组件加载,你可以只调用blazor函数。
在blazor interop.js中,Blazor.start将启动blazor应用程序,然后
DotNetReference.invokeMethodAsync
将触发blazor内部的函数,计数器将递增。步骤10 -在web.config的mvc应用程序中添加mime类型,以提供如下静态内容-
完成了!启动你的淘汰赛应用程序,你就可以看到组件了。
这基本上就是我们在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中为我们的应用程序开发了新功能,从而无需获得新资源就可以进入新技术。
kiayqfof3#
从.NET 6开始,一种可能性是通过调用
JSComponentConfigurationExtensions.RegisterForJavaScript
使Blazor组件可用于从JavaScript示例化。我也在一个情况下,我想迁移一个现有的JS应用程序到Blazor一步一步。然而,它是一个Angular 的应用程序。为了评估一个可能的解决方案,我创建了一个演示迁移项目。请参阅我的BlazorInAngularDemo github project的代码和描述,以及一个工作演示。但正如已经说过的,它是专门为Angular 。但也许一些想法,特别是在自述文件,可以帮助你无论如何。