Блазор

Разполагане на няколко blazor webAssemblys в ASP.NET Ядро MVC

Дата на създаване на страница :

околна среда

Визуално студио
  • Визуално студио 2019
.NET
  • .NET 5.0

Отначало

Този Съвети поема познанията ви за "Изпълнение на Blazor WebAssembly в ASP.NET Core MVC View", така че ако не знаете как да стартирате Blazor Assembly на ASP.NET Core MVC, вижте тази статия.

Предишният метод ви позволява да поставите само един Blazor Събрание, така че този Съвети ви позволява да поставите повече от един.

Създаване на две Блезор събрание

Можете да се уверите, че двете Блезор събрание се изпълняват съответно, така че можете да направите каквото и да е Събранието на Блазор. Моля, направете го така, че да виждате разликата за момента. Тук цветът на лявото меню се променя за първоначалното състояние на проекта.

Публикувайте всеки проект и подгответе файла.

създаване на ASP.NET core MVC проект

Това също се основава на съветите преди да създадете проект. След като създадете проекта си, добавете 'in Microsoft.AspNetCore.Components.WebAssembly.Server NuGet'.

Фиксирайте _Layout.cshtml

Това е същото като последния път.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>@ViewData["Title"] - AspNetCoreMvc</title>
  <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="~/css/site.css" />
  @* 追加 *@
  @await RenderSectionAsync("Styles", required: false)
</head>
<body>
  <!-- 以下同じなので省略 -->

Добавяне на страници за две Блезор събрание

Този път ще имаме два изгледа, за да покажем на всяко Събрание на Блазор.

HomeController добавете две действия към . Отново сървърната страна не прави нищо по-специално, така че просто върнете изгледа.

НачалоКонтролер.cs

// 省略

namespace AspNetCoreMvc.Controllers
{
  public class HomeController : Controller
  {
    // 省略

    // 追加
    public IActionResult Blazor1()
    {
      return View();
    }

    public IActionResult Blazor2()
    {
      return View();
    }
  }
}

Щракнете с десния бутон върху действието, за да добавите изглед. Моля те, върви за двама.

Изгледът е създаден.

Първо, настройте първото Събрание на Блазор.

Blazor1.cshtml

@{
  ViewData["Title"] = "Blazor1";
}
@section Styles {
  <base href="/Home/Blazor1/" />
  <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
  <link href="css/app.css" rel="stylesheet" />
  <link href="BlazorWebAssemblySample1.styles.css" rel="stylesheet" />
}

<div id="app">Loading...</div>

<div id="blazor-error-ui">
  An unhandled error has occurred.
  <a href="" class="reload">Reload</a>
  <a class="dismiss">🗙</a>
</div>

@section Scripts {
  <script src="_framework/blazor.webassembly.js"></script>
}

Различното от предишното е, че съдържанието на основния маркер е <base href="/" /> направено от . <base href="/Home/Blazor1/" />

Ако промените този път, Blazor Assembly ще може да препраща към всеки файл, като dll, като корен на този път в относителен път.

Обаче текущата спецификация blazor събрание указва, че контролера и действието имат един и същ път, защото ако URL адресът, определен от mVC действие не съответства на относителния път от хоста на тази база, Blazor събрание ще се провали при зареждане.

Между другото, случаят на този път е засегнат, така че ако URL адресът автоматично е малък, той трябва да бъде малък.

Blazor2.cshtml редактиране, както добре. Blazor1.cshtml Моля, имайте предвид, че е някои различни от .

Blazor2.cshtml

@{
  ViewData["Title"] = "Blazor2";
}
@section Styles {
  <base href="/Home/Blazor2/" />
  <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
  <link href="css/app.css" rel="stylesheet" />
  <link href="BlazorWebAssemblySample2.styles.css" rel="stylesheet" />
}

<div id="app">Loading...</div>

<div id="blazor-error-ui">
  An unhandled error has occurred.
  <a href="" class="reload">Reload</a>
  <a class="dismiss">🗙</a>
</div>

@section Scripts {
  <script src="_framework/blazor.webassembly.js"></script>
}

Добавете връзка, за да можете да навигирате до страницата на Blazor.

индекс.cshtml

@{
  ViewData["Title"] = "Home Page";
}

<div class="text-center">
  <h1 class="display-4">Welcome</h1>
  <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

@* 追加 *@
<ul>
  <li><a asp-action="Blazor1">Blazor1</a></li>
  <li><a asp-action="Blazor2">Blazor2</a></li>
</ul>

Стартиране.cs Промени

Пътят на маршрута на Blazor WebAssembly се променя, така че го активирайте за всеки път.

app.UseBlazorFrameworkFiles("/Home/Blazor1");
app.UseBlazorFrameworkFiles("/Home/Blazor2");

Разгръщане на уеб събрание на Blazor

Последният път поставих публикувания файл в wwwroot както беше, но тъй като посочих път за базовия маркер на всяка страница, създавам папка с подобен път в wwwroot.

Копирайте съдържанието на wwwroot на публикувания файл във всяка папка. Както index.html преди, не се изисква.

екзекуция

Изпълнете го, за да се уверите, че Blazor WebAssembly на всяка страница работи правилно.

ASP.NET изпълни blazor уебсглобка с ядро MVC изглед