英文:
Is it possible to add Blazor WebAssembly without a Router and putting it inside an existing ASP.NET Core website?
问题
这与此问题相似:将Blazor Webassembly项目包含到现有的ASP.NET Core项目中,但我的情况不同:
-
我已经有一个ASP.NET Core网站https://www.example.com,上面有许多页面。
-
现在我想要添加一个页面,比如
Feature.cshtml
,位于https://www.example.com/feature,内容如下:
<!-- 其他内容:标题、文本等 --》
<app>
这里是Blazor应用
</app>
<!-- 其他内容:更多文本、页脚、脚本等 --》
Blazor应用不需要知道URL,我只会用它来实现漂亮的组件功能,类似于Web组件。
我可以实现这个吗?如果可能,不需要单独的Blazor WebAssembly项目,但如果必要的话也可以。另外,如果我能够在网站上托管多个应用(https://www.example.com/feature1和https://www.example.com/feature2)将会很棒。
英文:
It's similar to this question: Include a Blazor Webassembly project into an existing ASP.NET Core project but my scenario is different:
-
I already have an ASP.NET Core website https://www.example.com with many pages.
-
I now want to add a page like
Feature.cshtml
at https://www.example.com/feature, which has content like this:
<!-- Other content: header, texts, etc -->
<app>
Blazor app here
</app>
<!-- Other content: more text, footer, scripts, etc -->
The Blazor app does not need to know about the URL, I will just use it for nice Component features, similar to Web Component.
Can I achieve this? If possible, without a separte Blazor WebAssembly project but it's okay if I have to. Also would be great if I can host more than one app (at https://www.example.com/feature1 and https://www.example.com/feature2) on a website.
答案1
得分: 1
我已成功将Blazor WebAssembly应用程序添加到现有的ASP.NET Core应用程序中。您可以在GitHub上的此演示存储库中查看详细的逐步说明。
逐步指南
1. 设置新的Blazor WebAssembly应用程序(B)
-
创建一个新的
Blazor WebAssembly App
项目,例如DemoBlazorInsideWeb.BlazorApp
。 -
在
App.razor
中更新您的路由以显示所有路由的Index
页面:
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<!-- 删除此处的所有内容 -->
</Found>
<NotFound>
<!-- 添加此内容 -->
<LayoutView Layout="@typeof(MainLayout)">
<Index />
</LayoutView>
</NotFound>
</Router>
-
可选择地删除
Index.razor
文件中的@page
,以防止路由意外匹配它。 -
可选择地删除
wwwroot
文件夹中的index.html
文件。不过,您可能希望将内容保存在其他地方,以便稍后复制其内容。
注意
即使您必须将所有这些应用程序打包到单个项目中,您仍然可以使用路由来在同一个网站上提供多个应用程序。
2. 设置您的(现有)ASP.NET Core网站(A)
-
将Blazor项目添加为ASP.NET Core网站项目的引用(A引用或依赖于B)。
-
安装
Microsoft.AspNetCore.Components.WebAssembly.Server
NuGet包:
dotnet add package Microsoft.AspNetCore.Components.WebAssembly.Server
- 在应用程序启动文件(
Program.cs
或Startup.cs
)中,在app.UseStaticFiles()
之前添加app.UseBlazorFrameworkFiles()
:
app.UseBlazorFrameworkFiles();
app.UseStaticFiles();
-
为了调试WASM应用程序,您需要:
-
在开发环境中添加
app.UseWebAssemblyDebugging()
:if (!app.Environment.IsDevelopment()) { // 通常,模板已包含此块 } else // 然后您添加此块 { app.UseWebAssemblyDebugging(); }
-
在
launchSettings.json
文件中的inspectUri
属性(您应该在Properties
文件夹中找到它)中添加它到您使用的任何配置文件,如https
和/或IIS Express
:{ // ... "IIS Express": { // ... "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}" } }
-
3. 设置新的Web(特性)页面
在您要添加Blazor应用程序的ASP.NET Core Razor页面中,您需要设置Blazor的内容。
- 添加HTML和JavaScript内容:
<!-- 其他Razor代码 -->
<div id="app">
<!-- 在Blazor加载之前加载内容。您可以从index.html文件中复制它 -->
</div>
<div id="blazor-error-ui">
发生未处理错误。
<a href="" class="reload">重新加载</a>
<a class="dismiss">🗙</a>
</div>
<!-- 其他Razor代码 -->
<!-- 根据您的项目,将脚本添加到相关位置 -->
<script src="_framework/blazor.webassembly.js"></script>
- 您还应该引用Blazor的CSS文件,或者将其内容移动到您自己的ASP.NET Core项目中:
<!-- 在您的布局中需要有Heads部分 -->
@section Heads {
<link rel="stylesheet" href="~/css/app.css" />
}
英文:
I have successfully add a Blazor WebAssembly app to an existing ASP.NET Core app. You can check the demo repository here on GitHub. I also wrote the detailed step-by-step instruction there.
Step-by-step guide
1. Setup a new Blazor WebAssembly App (B)
-
Create a new
Blazor WebAssembly App
project, for exampleDemoBlazorInsideWeb.BlazorApp
. -
Update your router in
App.razor
to show theIndex
page for all routes:
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<!-- Delete everything here -->
</Found>
<NotFound>
<!-- Add this here -->
<LayoutView Layout="@typeof(MainLayout)">
<Index />
</LayoutView>
</NotFound>
</Router>
-
Optionally delete
@page
in yourIndex.razor
file so no URL can ever be routed to it. This is to prevent a route accidentally match it. -
Optionally delete
index.html
file in yourwwwroot
folder. However you may want to keep the content somewhere to copy its content later.
> Note
> You can still use Routing if you want to serve multiple apps on the same website (even though you have to pack all those apps inside this single project)
2. Setup your (existing) ASP.NET Core website (A)
-
Add the Blazor project as Reference to your ASP.NET Core website project (A refers to or depends on B).
-
Install
Microsoft.AspNetCore.Components.WebAssembly.Server
Nuget package:
dotnet add package Microsoft.AspNetCore.Components.WebAssembly.Server
- In your app startup (
Program.cs
orStartup.cs
), addapp.UseBlazorFrameworkFiles()
beforeapp.UseStaticFiles()
:
app.UseBlazorFrameworkFiles();
app.UseStaticFiles();
-
In order to debug WASM app, you need to:
-
Add
app.UseWebAssemblyDebugging();
in Development environment:if (!app.Environment.IsDevelopment()) { // Usually the template has this block } else // And you add this block { app.UseWebAssemblyDebugging(); }
-
Add
inspectUri
property to yourlaunchSettings.json
file (you should find it inProperties
folder). Add it to whichever profile you use,https
and/orIIS Express
:{ // ... "IIS Express": { // ... "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}" } }
-
3. Setup the new web (Feature) page
In the ASP.NET Core Razor Page that you want to add the Blazor app, you need to setup Blazor's content
- Add the HTML and Javascript content:
<!-- Other Razor code -->
<div id="app">
<!-- Loading content before Blazor loads. You can copy it from index.html file -->
</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<!-- Other Razor code -->
<!-- Add the script where relevant to your project -->
<script src="_framework/blazor.webassembly.js"></script>
- You should also refer to the Blazor's CSS file, or simply move its content to your own ASP.NET Core project:
<!-- You need to have Heads section in your Layout -->
@section Heads {
<link rel="stylesheet" href="~/css/app.css" />
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论