Blazor

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

ปรับปรุงหน้า :
วันที่สร้างเพจ :

สิ่งแวดล้อม

วิชวลสตูดิโอ
  • วิชวลสตูดิโอ 2019
.NET
  • .สุทธิ 5.0

ทีแรก

เนื่องจาก Blazor WebAssembly เป็นเทคโนโลยีไคลเอนต์จึงไม่สําคัญว่าเว็บเซิร์ฟเวอร์จะทํางานอย่างไร อย่างไรก็ตาม เพื่อที่จะให้บริการ WebAssembly ไปยังไคลเอนต์ อย่างน้อยที่สุด จําเป็นต้องมีการกําหนดค่าฝั่งเซิร์ฟเวอร์ มารันโปรแกรมเซิร์ฟเวอร์เป็น ASP.NET Core MVC ใน Blazor WebAssembly กันเถอะ

การสร้างแอสเซมบลีเว็บ Blazor

ตอนนี้เราแค่ต้องตรวจสอบให้แน่ใจว่า Blazor WebAssembly ใช้งานได้ดังนั้นเราจะปล่อยให้มันเป็นตอนที่เราสร้างโครงการ

ชื่อโครงการหรือชื่อโซลูชันเป็นไปตามอําเภอใจ

หน้าจอ "ASP.NET โฮสต์บน Core" ที่แสดงในหน้าจอข้อมูลเพิ่มเติมสามารถทํางานเป็น MVC ได้ แต่โปรเจ็กต์ที่ได้นั้นอยู่ใกล้กับเซิร์ฟเวอร์ API ดังนั้นเราจะไม่ตรวจสอบที่นี่

การเผยแพร่ Blazor WebAssembly

เผยแพร่ไฟล์เพื่อปรับใช้ Blazor WebAssembly ไปยังโครงการ MVC หลัก ASP.NET

คลิกขวาที่โครงการแล้วเลือก เผยแพร่

เลือก โฟลเดอร์

ปล่อยให้ปลายทางการเผยแพร่เริ่มต้น

หน้าจอเผยแพร่จะปรากฏขึ้น คุณสามารถตั้งค่าต่าง ๆ ได้ แต่สําหรับตอนนี้ปุ่ม "เผยแพร่" จะถูกปล่อยให้เป็นค่าเริ่มต้น

รอให้การเผยแพร่เริ่มต้นและเสร็จสมบูรณ์ โปรดสังเกตว่า เส้นทางโฟลเดอร์ที่ยาวอาจล้มเหลว

คุณสามารถตรวจสอบว่าแฟ้มถูกสร้างขึ้นในโฟลเดอร์ที่ระบุ หากมีการระบุเป็นเส้นทางสัมพัทธ์ ปลายทางจะสัมพันธ์กับโครงการ

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

จากนั้นสร้างโครงการ ASP.NET Core MVC การเปิด Visual Studio แยกกันอาจเป็นเรื่องที่น่าเบื่อดังนั้นให้สร้างมันขึ้นมาภายในโซลูชัน Blazor WebAssembly เนื่องจากทั้งสองโครงการไม่ได้เชื่อมโยงกันในครั้งนี้จึงไม่มีปัญหาแม้ว่าจะถูกสร้างขึ้นแยกกันก็ตาม

ชื่อโครงการเป็นทางเลือก การตั้งค่าอื่นๆ จะเหลืออยู่ตามค่าเริ่มต้น

เนื่องจากฝั่ง Blazor สันนิษฐานว่าการพัฒนาเสร็จสมบูรณ์ ASP.NET โครงการในด้าน MVC หลักเป็นการเริ่มต้น

การสร้างมุมมองสําหรับการประกอบ Blazor

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

โดยทั่วไปควรปรับเปลี่ยนให้คล้ายกับที่สร้างขึ้นเมื่อคุณเผยแพร่ index.html Blazor Assembly

แก้ไข _Layout.cshtml

ฉันต้องการอ้างอิง CSS ของ Blazor Assembly ดังนั้นฉันสามารถเขียนโดยตรงไปยัง . _Layout.cshtml เราต้องการให้นําไปใช้กับหน้าเป้าหมายให้มากที่สุดเท่าที่จะเป็นไปได้เพื่อให้เราสามารถขยายได้โดยการเพิ่มเพื่อให้สามารถ RenderSectionAsync เขียนลิงก์ไปยัง CSS ในแต่ละหน้าได้

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

เพิ่มหน้าเฉพาะเพื่อแสดงชุดประกอบ Blazor ASP.NET การเพิ่มหน้าและขั้นตอนปกติใน Core MVC จะเหมือนกัน

HomeController เพิ่มการดําเนินการต่อไปนี้ไปยัง . ฝั่งเซิร์ฟเวอร์ไม่ได้ทําอะไรเป็นพิเศษดังนั้นจึงเพียงแค่ส่งคืนมุมมอง

โฮมคอนโทรลเลอร์.cs

// 省略

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

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

คลิกขวาที่แอคชันเพื่อเพิ่มมุมมอง

ไม่มีอะไรจะผูกมัดดังนั้นให้เพิ่มตามที่เป็นอยู่

มุมมองจะถูกสร้างขึ้น

การใช้ที่สร้างขึ้นในขณะที่เผยแพร่ของ index.html Blazor Assembly มีการอ้างอิงเราจะสร้างใหม่ดังนี้

Blazor.cshtml

@{
  ViewData["Title"] = "Blazor";
}
@section Styles {
  <base href="/" />
  <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
  <link href="css/app.css" rel="stylesheet" />
  <link href="BlazorWebAssemblySample.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>

@* 追加 *@
<a asp-action="Blazor">Blazor</a>

เพิ่มการอ้างอิง Microsoft.AspNetCore.Components.แอสเซมบลีเว็บแอสเซมบลี.เซิร์ฟเวอร์

Startup.cs คุณไม่จําเป็นต้องเขียนโค้ดที่จําเป็นด้วยตัวเอง แต่เพื่อความสะดวกที่คุณได้รับจาก Microsoft.AspNetCore.Components.WebAssembly.Server NuGet

คลิกขวาที่ การขึ้นต่อกัน แล้วเลือก จัดการแพคเกจ NuGet

เลือกแท็บ การดูแลระบบ และป้อน Microsoft.AspNetCore.Components.WebAssembly.Server ในช่องค้นหา

แพคเกจที่มีชื่อเดียวกันจะปรากฏขึ้นดังนั้นติดตั้ง

ตรวจสอบว่า มีการเพิ่มแพคเกจ

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

app.UseHttpsRedirection(); แทรกรหัสต่อไปนี้บนบรรทัดต่อไปนี้บรรทัด:

app.UseBlazorFrameworkFiles();

การปรับใช้การประกอบเว็บ Blazor

โดยทั่วไปคุณสามารถใส่โฟลเดอร์ wwwroot Blazor WebAssembly ที่เผยแพร่แล้วตามที่อยู่ในโฟลเดอร์ wwwroot ของ ASP.NEt Coreindex.html แต่คุณควรลบออกเพราะไม่จําเป็นต้องใช้กต่อไป นอกจากนี้ตั้งแต่มีการfavicon.ico ขนานนามตัดสินใจว่าจะใช้ไอคอนใด

เมื่อปล่อยด้วย PWA ถ้าคุณได้ยกเว้นแฟ้ม (เช่น ดัชนี.html) ในโฟลเดอร์ wwwroot คุณจะต้องเปิดในโปรแกรมแก้ไขข้อความในโฟลเดอร์ wwwroot และลบระเบียนใน service-worker-assets.js ไฟล์ที่ยกเว้น มิฉะนั้นคุณอาจได้รับข้อผิดพลาดภายในเมื่อคุณเปิดหน้าจอเว็บ

เมื่อคุณเผยแพร่แอป Blazor คุณไม่จําเป็นต้องดําเนินการนี้ด้วยตนเองโดยไม่รวมไฟล์ที่ไม่จําเป็นออกจากโปรเจ็กต์ของคุณ

ในกรณีของ PWA ข้อผิดพลาดภายในจะเกิดขึ้นหากไม่ได้อยู่ในสภาพแวดล้อม https ไม่สามารถติดตั้งเป็น PWA ได้

การยืนยันการดําเนินการ

ASP.NET ดีบักเรียกใช้โครงการ Core MVC ไปที่หน้า Blazor และตรวจสอบว่าเค้าโครงของ Blazor Assembly ปรากฏในหน้านั้นหรือไม่ เลือกเมนูด้านซ้ายและตรวจสอบว่าแต่ละคุณสมบัติใช้งานได้

เกี่ยวกับ URL

หากคุณคลิกที่เมนูด้านซ้ายของ Blazor Assembly ที่แสดงในหน้าคุณจะสังเกตเห็นว่า URL มีการเปลี่ยนแปลง ลักษณะการทํางานนี้ไม่เป็นไปตามลักษณะการทํางานของ URL ที่คาดไว้ โดย ASP.NET Core MVC ดังนั้นถ้าเป็นไปได้ Blazor Assembly ควรสร้าง URL ในลักษณะที่ URL ไม่เปลี่ยนแปลง

เมื่อคุณเปิดหน้า Blazor

เมื่อคุณคลิกเมนูตัวนับ

บันทึกการเปลี่ยนแปลง

2022/7/12
  • เพิ่มจุดที่ควรทราบเมื่อไม่รวมไฟล์ที่ไม่จําเป็นในการจัดวางไฟล์ของแอป Blazor ที่เผยแพร่
2022/3/30
  • ฉบับพิมพ์ครั้งแรก
ปรับใช้แอปที่สร้างด้วย Web Assistant แบบผสมกับ IIS
การปรับใช้ WebAssemblys Blazor หลายตัวใน ASP.NET Core MVC