Blazor

Menyebarkan beberapa Blazor WebAssemblys di ASP.NET Core MVC

Tanggal pembuatan halaman :

lingkungan

Visual Studio
  • Studio Visual 2019
.NET
  • .NET 5.0

Pada awalnya

Tips ini mengasumsikan pengetahuan Anda tentang "Menjalankan Blazor WebAssembly di ASP.NET Core MVC View", jadi jika Anda tidak tahu cara menjalankan Blazor Assembly di ASP.NET Core MVC, lihat artikel itu.

Metode sebelumnya memungkinkan Anda untuk menempatkan hanya satu Perakitan Blazor, jadi Tips ini memungkinkan Anda untuk menempatkan lebih dari satu.

Buat dua Perakitan Blazor

Anda dapat memastikan bahwa kedua Majelis Blazor berjalan masing-masing, sehingga Anda dapat melakukan apa pun Majelis Blazor. Silakan membuatnya sehingga Anda dapat melihat perbedaan untuk saat ini. Di sini, warna menu kiri diubah untuk keadaan awal proyek.

Publikasikan setiap proyek dan siapkan file.

membuat proyek MVC Inti ASP.NET

Ini juga didasarkan pada tips sebelum membuat proyek. Setelah membuat proyek, tambahkan "di Microsoft.AspNetCore.Components.WebAssembly.Server NuGet".

Perbaiki _Layout.cshtml

Ini sama dengan terakhir kali.

<!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>
  <!-- 以下同じなので省略 -->

Menambahkan halaman untuk dua Majelis Blazor

Kali ini, kami akan memiliki dua pandangan untuk menunjukkan setiap Majelis Blazor.

HomeController tambahkan dua tindakan ke . Sekali lagi, sisi server tidak melakukan apa pun secara khusus, jadi kembalikan saja tampilannya.

HomeController.cs

// 省略

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

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

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

Klik kanan tindakan untuk menambahkan tampilan. Silakan pergi untuk dua.

Tampilan dibuat.

Pertama, mendirikan Majelis Blazor pertama.

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>
}

Apa yang berbeda dari yang sebelumnya adalah bahwa isi tag <base href="/" /> dasar terbuat dari . <base href="/Home/Blazor1/" />

Jika Anda mengubah jalur ini, Majelis Blazor akan dapat mereferensikan setiap file, seperti dll, sebagai akar jalur ini dalam jalur relatif.

Namun, spesifikasi Perakitan Blazor saat ini menentukan bahwa pengontrol dan tindakan memiliki jalur yang sama, karena jika URL yang ditentukan oleh tindakan MVC tidak cocok dengan jalur relatif dari host pangkalan ini, Majelis Blazor akan gagal saat memuat.

Ngomong-ngomong, kasus jalur ini terpengaruh, jadi jika URL secara otomatis huruf kecil, itu harus huruf kecil.

Blazor2.cshtml edit juga. Blazor1.cshtml Harap dicatat bahwa itu berbeda dari .

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>
}

Tambahkan tautan sehingga Anda dapat menavigasi ke halaman blazor.

index.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>

Startup.cs Perubahan

Jalur rute Blazor WebAssembly berubah, jadi aktifkan untuk setiap jalur.

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

Penyebaran Blazor WebAssembly

Terakhir kali, saya menempatkan file yang diterbitkan di wwwroot apa adanya, tetapi karena saya menentukan jalur untuk tag dasar di setiap halaman, saya membuat folder dengan jalur serupa di wwwroot.

Salin konten wwwroot file yang diterbitkan ke setiap folder. Seperti index.html sebelumnya, itu tidak diperlukan.

eksekusi

Jalankan untuk memastikan blazor WebAssembly di setiap halaman berfungsi dengan benar.

ASP.NET Jalankan Blazor WebAssembly dengan tampilan Core MVC