Is it possible to add Blazor WebAssembly without a Router and putting it inside an existing ASP.NET Core website?

huangapple go评论70阅读模式
英文:

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:

&lt;!-- Other content: header, texts, etc --&gt;

&lt;app&gt;
    Blazor app here
&lt;/app&gt;

&lt;!-- Other content: more text, footer, scripts, etc --&gt;

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.csStartup.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">&#128473;</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" />
}

Is it possible to add Blazor WebAssembly without a Router and putting it inside an existing ASP.NET Core website?

英文:

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.

Is it possible to add Blazor WebAssembly without a Router and putting it inside an existing ASP.NET Core website?

Step-by-step guide

1. Setup a new Blazor WebAssembly App (B)

  • Create a new Blazor WebAssembly App project, for example DemoBlazorInsideWeb.BlazorApp.

  • Update your router in App.razor to show the Index page for all routes:

&lt;Router AppAssembly=&quot;@typeof(App).Assembly&quot;&gt;
    &lt;Found Context=&quot;routeData&quot;&gt;
        &lt;!-- Delete everything here --&gt;
    &lt;/Found&gt;
    &lt;NotFound&gt;
        &lt;!-- Add this here --&gt;
        &lt;LayoutView Layout=&quot;@typeof(MainLayout)&quot;&gt;
            &lt;Index /&gt;
        &lt;/LayoutView&gt;
    &lt;/NotFound&gt;
&lt;/Router&gt;
  • Optionally delete @page in your Index.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 your wwwroot 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 or Startup.cs), add app.UseBlazorFrameworkFiles() before app.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 your launchSettings.json file (you should find it in Properties folder). Add it to whichever profile you use, https and/or IIS Express:

      {
          // ...
          &quot;IIS Express&quot;: {
              // ...
              &quot;inspectUri&quot;: &quot;{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}&quot;
          }
      }
      

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:
&lt;!-- Other Razor code --&gt;

&lt;div id=&quot;app&quot;&gt;
    &lt;!-- Loading content before Blazor loads. You can copy it from index.html file --&gt;
&lt;/div&gt;

&lt;div id=&quot;blazor-error-ui&quot;&gt;
    An unhandled error has occurred.
    &lt;a href=&quot;&quot; class=&quot;reload&quot;&gt;Reload&lt;/a&gt;
    &lt;a class=&quot;dismiss&quot;&gt;&#128473;&lt;/a&gt;
&lt;/div&gt;

&lt;!-- Other Razor code --&gt;

&lt;!-- Add the script where relevant to your project --&gt;
&lt;script src=&quot;_framework/blazor.webassembly.js&quot;&gt;&lt;/script&gt;
  • You should also refer to the Blazor's CSS file, or simply move its content to your own ASP.NET Core project:
&lt;!-- You need to have Heads section in your Layout --&gt;
@section Heads {
    &lt;link rel=&quot;stylesheet&quot; href=&quot;~/css/app.css&quot; /&gt;
}

huangapple
  • 本文由 发表于 2023年3月9日 16:48:26
  • 转载请务必保留本文链接:https://go.coder-hub.com/75682241.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定