Blazor

Gunakan berbilang Blazor WebAssemblys dalam MVC Teras ASP.NET

Tarikh penciptaan halaman :

Persekitaran

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

Pada mulanya

Petua ini menganggap pengetahuan anda tentang "Running Blazor WebAssembly in ASP.NET Core MVC View", jadi jika anda tidak tahu bagaimana menjalankan Perhimpunan Blazor di MVC Teras ASP.NET, lihat artikel itu.

Kaedah sebelumnya membolehkan anda meletakkan hanya satu Perhimpunan Blazor, jadi Petua ini membolehkan anda meletakkan lebih daripada satu.

Buat dua Perhimpunan Blazor

Anda boleh memastikan bahawa kedua-dua Perhimpunan Blazor berjalan masing-masing, jadi anda boleh melakukan apa sahaja Perhimpunan Blazor. Sila buat supaya anda dapat melihat perbezaannya buat masa ini. Di sini, warna menu kiri diubah untuk keadaan awal projek.

Terbitkan setiap projek dan sediakan fail.

buat projek MVC Teras ASP.NET

Ini juga berdasarkan petua sebelum membuat projek. Setelah anda membuat projek anda, tambahkan 'dalam Microsoft.AspNetCore.Components.WebAssembly.Server NuGet.'

Betulkan _Layout.cshtml

Ini adalah sama seperti kali terakhir.

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

Tambah halaman untuk dua Perhimpunan Blazor

Kali ini, kita akan memiliki dua pandangan untuk menunjukkan masing-masing Blazor Assembly.

HomeController tambah dua tindakan kepada . Sekali lagi, bahagian pelayan tidak melakukan apa-apa khususnya, jadi hanya kembalikan pandangan.

RumahPengawal.cs

// 省略

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

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

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

Klik kanan tindakan untuk menambah pandangan. Tolong pergi untuk dua.

Pandangan dicipta.

Pertama, menubuhkan Perhimpunan Blazor yang 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 berbeza dari yang sebelumnya ialah kandungan tag <base href="/" /> asas diperbuat daripada . <base href="/Home/Blazor1/" />

Sekiranya anda mengubah jalan ini, Blazor Assembly akan dapat merujuk setiap fail, seperti dll, sebagai akar jalan ini dalam jalan relatif.

Walau bagaimanapun, spesifikasi Blazor Assembly semasa menentukan bahawa pengawal dan tindakan mempunyai laluan yang sama, kerana jika URL yang ditentukan oleh tindakan MVC tidak sepadan dengan laluan relatif dari tuan rumah pangkalan ini, Perhimpunan Blazor akan gagal apabila memuatkan.

Dengan cara ini, kes laluan ini terjejas, jadi jika URL secara automatik huruf kecil, ia harus huruf kecil.

Blazor2.cshtml edit juga. Blazor1.cshtml Sila ambil perhatian bahawa ia adalah beberapa berbeza daripada .

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

Tambah pautan supaya anda boleh 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>

Permulaan.cs Perubahan

Laluan laluan Blazor WebAssembly berubah, jadi dayakannya untuk setiap laluan.

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

Blazor WebAssembly Deployment

Kali terakhir, saya meletakkan fail yang diterbitkan di wwwroot seperti itu, tetapi kerana saya menentukan laluan untuk tag asas pada setiap halaman, saya membuat folder dengan laluan yang sama di wwwroot.

Salin kandungan wwwroot fail yang diterbitkan ke setiap folder. Seperti index.html dahulu, ia tidak diperlukan.

Pelaksanaan

Jalankan untuk memastikan blazor WebAssembly pada setiap halaman berfungsi dengan betul.

ASP.NET Jalankan Blazor WebAssembly dengan pandangan MVC Teras