如何将Blazor WebAssembly集成到现有的ASP.NET Core Web应用程序中

最新推荐文章于 2024-10-11 15:11:38 发布

寒冰屋

最新推荐文章于 2024-10-11 15:11:38 发布

阅读量414

点赞数

分类专栏： ASP.NET CORE 架构及框架文章标签： wasm Blazor ASP.NET Core WebAssembly

原文链接：https://www.telerik.com/blogs/integrate-blazor-webassembly-existing-aspnet-core-web-application

版权

ASP.NET CORE 同时被 2 个专栏收录

1136 篇文章 56 订阅

订阅专栏

架构及框架

635 篇文章 16 订阅

订阅专栏

第1步设置Web应用程序和Blazor WASM项目

第2步准备Blazor WebAssembly应用程序

第3步准备现有Web应用程序项目

第4步将Blazor组件添加到现有Web应用程序中的视图

第5步运行现有Web应用程序

第6步合并Telerik UI for Blazor

结论

了解如何使用熟悉的C#代码文件和Razor语法实现Web UI，将Blazor WebAssembly项目集成到现有的ASP.NET Core Web应用程序中。

当你想到为交互式Web开发用户界面时，你的想法可能会立即转向JavaScript。因此，对于许多C#开发人员来说，这意味着学习一种全新编程语言的来龙去脉。

但是，情况不一定如此！Blazor WASM（又名Blazor WebAssembly）允许开发人员以使用熟悉的C#代码文件和Razor语法实现Web用户界面。然后将这些源文件编译为字节码以供下载，以便在客户端浏览器中的WebAssembly运行时上运行，由于编译，产生改进的运行时性能。

Blazor WebAssembly是单页Web应用程序（或SPA）的常用解决方案，它遵循Web应用程序开发的典型n层模式。在n层设计中，用户界面与业务逻辑分开实现和数据访问，后两者通常部署为API服务。

由于Visual Studio包含用于Blazor WebAssembly项目的模板，因此简化了在新的绿地项目中开始使用Blazor WASM，但是当您想要将Blazor WASM与现有的ASP.NET Core Web应用程序集成时会发生什么情况？我们慢慢迁移和现代化现有的Web应用程序，以利用Blazor WASM的强大功能？

在本文中，你将了解如何将 Blazor WebAssembly项目集成到现有的ASP.NET Core Web应用程序中。此外，你还将了解如何合并适用于Blazor的Progress Telerik UI，它提供了现成的组件，用于使用Blazor WebAssembly构建引人注目的Web用户界面体验。

第1步设置Web应用程序和Blazor WASM项目

在此演示中，我们将创建两个项目。第一个项目是一个ASP.NET Core Web应用程序，代表我们现有的Web应用程序。第二个项目是Blazor WebAssembly项目，我们将在其中构建新的Blazor组件集成到我们现有的Web应用程序中。

1、打开Visual Studio 2022并选择Create a new project。

2、在“创建新项目”对话框中，搜索并选择ASP.NET Core Web App。按下一步。

3、在“配置新项目”对话框中，命名项目Existing.Web，（可选）选择文件系统位置，然后按“下一步”。

4、在“其他信息”对话框中，为框架选择“.NET 7.0（标准期限支持）”，然后按“创建”。

注意：本文中的指南也适用于.NET 6.0项目。.NET 5不受支持，因此建议先将现有应用程序至少升级到.NET 6.0。

5、在“解决方案资源管理器”面板中，右键单击解决方案并展开“添加”菜单。选择“新建项目”。

6、在“添加新项目”对话框中，从搜索结果中搜索Blazor WebAssembly并选择“Blazor WebAssembly应用”。按下一步。

7、在“配置新项目”对话框中，命名项目BlazorApp并按“下一步”。

8、在“其他信息”对话框中，为框架选择“.NET 7.0（标准期限支持）”，然后按“创建”。

注意：本文中的指南也适用于.NET 6.0项目。.NET 5不受支持，因此建议先将现有应用程序至少升级到.NET 6.0。

第2步准备Blazor WebAssembly应用程序

Blazor WebAssembly应用模板生成单页应用程序（SPA）。因此，当Blazor应用程序运行时，它会查找ID为app的HTML元素，以包含和显示正在运行的应用程序。需要禁用此功能，因为在这种情况下，我们希望现有Web应用程序提供整体用户体验，同时允许我们合并在Blazor WASM项目中开发的Blazor组件。

1、在“解决方案资源管理器”面板中，找到BlazorApp项目并打开Program.cs文件。

2、在Program.cs文件中，注释掉以下代码行并保存该文件：

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

第3步准备现有Web应用程序项目

为了使现有的ASP.NET Core Web应用程序能够使用Blazor Web程序集组件，我们需要项目引用、NuGet包和一些基础结构代码。

1、在“解决方案资源管理器”面板中，找到Existing.Web项目，然后右键单击并展开“添加”项。选择“项目引用”。

2、在“引用管理器”对话框中，选中“BlazorApp”旁边的框，然后按“确定”。

3、再次右键单击Existing.Web项目，然后选择“管理NuGet包”。

4、在“NuGet”屏幕上，选择“浏览”选项卡并输入Microsoft.AspNetCore.Components.WebAssembly.Server到搜索框。从搜索结果中选择Microsoft.AspNetCore.Components.WebAssembly.Server，然后按安装。接受任何许可。

5、在“解决方案资源管理器”面板中，找到Existing.Web项目并打开Program.cs文件。

6、将else条件添加到if(!app.Environment.IsDevelopment())代码块，代码块如下：

else
{
    app.UseWebAssemblyDebugging();
}

7、直接在if(!Environment.IsDevelopment())代码块，添加以下代码并保存文件：

app.UseBlazorFrameworkFiles();
app.MapFallbackToFile("index.html");

8、在Existing.Web项目中，展开“Page”文件夹。展开共享文件夹，找到并打开_Layout.cshtml文件。

9、在页面底部附近找到脚本引用。添加以下脚本引用，并保存文件：

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

注意：将脚本添加到_Layout.cs将允许将Blazor组件添加到任何视图。或者，可以选择仅在需要Blazor组件的每个特定视图中包含脚本。

第4步将Blazor组件添加到现有Web应用程序中的视图

Blazor WebAssembly应用项目附带一个计数器组件基架。现在，我们将此组件添加到现有ASP.NET Core Web应用程序（Existing.Web）中的视图中。

1、在“解决方案资源管理器”中，找到“Existing.Web”项目并展开“Page”文件夹。打开Index.cshtml文件。这是Existing.Web应用程序时显示的默认视图正在运行。

2、在@page注释的正下方，添加以下using语句以允许我们访问计数器组件：

@using BlazorApp.Pages

3、在div元素下，添加以下代码以在视图中包括计数器组件：

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

第5步运行现有Web应用程序

运行现有的Web应用程序项目，并注意如何与Blazor WebAssembly项目中的计数器组件进行交互。

1、在“解决方案资源管理器”中，右击“Existing.Web项目”，然后选择“设置为启动项目”项。

2、再次右键单击Existing.Web项目，然后展开“调试”项。选择“启动（不调试）”。这将运行现有的Web应用程序项目。

注意：或者，由于我们设置了启动项目，您也可以从工具栏菜单中启动实例（带或不带调试）。

3、在浏览器窗口中，多次按计数器组件的“单击我”按钮，并注意计数器如何增加。

第6步合并Telerik UI for Blazor

现在，我们已经在现有的ASP.NET Core Web应用程序中成功使用了Blazor WebAssembly组件，我们可以利用Progress Telerik UI for Blazor提供的组件。此组件库与两者兼容Blazor WebAssembly和Blazor Server项目。

1、按照指南在BlazorApp项目中添加适用于Blazor的Telerik UI，请按照步骤2到4进行操作。

注意：在我们的例子中，服务器项目是Existing.Web项目，我们已经添加了 app.UseStaticFiles() 代码，因此可以跳过此步骤（步骤4，第#2项文章链接）。

2、现在，我们将向现有计数器组件添加用于Blazor的Telerik UI组件。在BlazorApp项目中，找到并打开Pages/Counter.razor文件。

3、将文件中的代码替换为以下内容并保存文件：

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

<br/>

<hr />

<TelerikButton OnClick="@SayHelloHandler" ThemeColor="primary">Say Hello</TelerikButton>

<br />

@helloString


@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }

    MarkupString helloString;

    void SayHelloHandler()
    {
        string msg = string.Format("Hello from <strong>Telerik Blazor</strong> at {0}.<br /> Now you can use C# to write front-end!", DateTime.Now);
        helloString = new MarkupString(msg);
    }
}

4、再次运行应用程序，然后按“打招呼”按钮以使用TelerikButton组件！