Blazor

การปรับใช้ WebAssemblys Blazor หลายตัวใน ASP.NET Core MVC

วันที่สร้างเพจ :

สิ่งแวดล้อม

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

ทีแรก

เคล็ดลับนี้ถือว่าความรู้ของคุณเกี่ยวกับ "การเรียกใช้ Blazor WebAssembly ในมุมมอง MVC หลัก ASP.NET" ดังนั้นหากคุณไม่ทราบวิธีการเรียกใช้ Blazor Assembly บน MVC ASP.NET หลักให้ดูบทความนั้น

วิธีการก่อนหน้านี้ช่วยให้คุณสามารถวาง Blazor Assembly ได้เพียงหนึ่งชุดดังนั้นเคล็ดลับนี้จึงช่วยให้คุณสามารถวางได้มากกว่าหนึ่งชุด

สร้างแอสเซมบลีเบลซอร์สองตัว

คุณสามารถตรวจสอบให้แน่ใจว่า Blazor Assembly ทั้งสองทํางานตามลําดับเพื่อให้คุณสามารถทําอะไรก็ได้ที่ Blazor Assembly เป็น โปรดทําให้คุณสามารถเห็นความแตกต่างในขณะนี้ ที่นี่สีของเมนูด้านซ้ายมีการเปลี่ยนแปลงสําหรับสถานะเริ่มต้นของโครงการ

เผยแพร่แต่ละโครงการและจัดเตรียมไฟล์

สร้างโครงการ MVC หลัก ASP.NET

นอกจากนี้ยังขึ้นอยู่กับเคล็ดลับก่อนที่จะสร้างโครงการ เมื่อคุณสร้างโปรเจ็กต์ของคุณแล้ว ให้เพิ่ม 'ใน 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>
  <!-- 以下同じなので省略 -->

เพิ่มหน้าสําหรับสมัชชาเบลซอร์สองตัว

คราวนี้เราจะมีสองมุมมองเพื่อแสดงแต่ละ Blazor Assembly

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 Assembly ปัจจุบันระบุว่าตัวควบคุมและการกระทํามีเส้นทางเดียวกัน เนื่องจากถ้า URL ที่กําหนดโดยการกระทํา MVC ไม่ตรงกับเส้นทางสัมพัทธ์จากโฮสต์ของฐานนี้ Blazor Assembly จะล้มเหลวเมื่อโหลด

โดยวิธีการที่กรณีของเส้นทางนี้ได้รับผลกระทบดังนั้นหาก 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 ได้

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>

เริ่มต้น.cs การเปลี่ยนแปลง

เส้นทางของ Blazor WebAssembly มีการเปลี่ยนแปลง ดังนั้นให้เปิดใช้งานสําหรับแต่ละเส้นทาง

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

Blazor WebAssembly Deployment

คราวที่แล้วฉันวางไฟล์ที่เผยแพร่ใน wwwroot เหมือนเดิม แต่เนื่องจากฉันระบุเส้นทางสําหรับแท็กพื้นฐานในแต่ละหน้าฉันจึงสร้างโฟลเดอร์ที่มีเส้นทางคล้ายกันใน wwwroot

คัดลอกเนื้อหาของ wwwroot ของแฟ้มที่ประกาศไปยังแต่ละโฟลเดอร์ ก่อนหน้านี้ index.html ไม่จําเป็นต้องใช้

การประหารชีวิต

เรียกใช้เพื่อให้แน่ใจว่า Blazor WebAssembly ในแต่ละเพจทํางานได้อย่างถูกต้อง

ASP.NET เรียกใช้ Blazor WebAssembly ด้วยมุมมอง MVC หลัก