Blazor

ASP.NET Chạy Blazor WebAssembly với chế độ xem Core MVC

Trang Cập Nhật :
Ngày tạo trang :

môi trường

Studio trực quan
  • Visual Studio 2019
.NET ·
  • .NET 5,0

Lúc đầu

Bởi vì Blazor WebAssembly là một công nghệ máy khách, không quan trọng máy chủ web hoạt động như thế nào. Tuy nhiên, để phục vụ WebAssembly cho khách hàng, ở mức tối thiểu, cấu hình phía máy chủ là bắt buộc. Hãy chạy chương trình máy chủ như ASP.NET Core MVC trong Blazor WebAssembly.

Tạo một Blazor WebAssembly

Bây giờ chúng ta chỉ cần đảm bảo rằng Blazor WebAssembly hoạt động, vì vậy chúng ta sẽ để nguyên như khi chúng ta tạo dự án.

Tên dự án hoặc tên giải pháp là tùy ý.

Màn hình "ASP.NET được lưu trữ trên Core" được hiển thị trong màn hình thông tin bổ sung cũng có thể hoạt động dưới dạng MVC, nhưng dự án kết quả là gần với máy chủ API, vì vậy chúng tôi sẽ không kiểm tra nó ở đây.

Xuất bản Blazor WebAssembly

Xuất bản tệp để triển khai Blazor WebAssembly cho dự án MVC ASP.NET Core.

Nhấp chuột phải vào dự án và chọn Phát hành.

Chọn Thư mục.

Để lại đích xuất bản mặc định.

Màn hình xuất bản xuất hiện. Bạn có thể đặt các cài đặt khác nhau, nhưng hiện tại, nút "Xuất bản" được để làm mặc định.

Chờ quá trình xuất bản bắt đầu và hoàn tất thành công. Lưu ý rằng đường dẫn thư mục dài có thể không thành công.

Bạn có thể xác minh rằng tệp đã được tạo trong thư mục được chỉ định. Nếu nó được chỉ định là một đường dẫn tương đối, điểm đến là liên quan đến dự án.

Tạo một dự án MVC cốt lõi ASP.NET

Tiếp theo, tạo một dự án MVC ASP.NET Core. Mở Visual Studio riêng biệt có thể tẻ nhạt, vì vậy hãy tạo nó bên trong giải pháp Blazor WebAssembly. Vì hai dự án không được liên kết lần này, không có vấn đề gì ngay cả khi chúng được tạo riêng.

Tên dự án là tùy chọn. Các cài đặt khác được để mặc định.

Vì phía Blazor giả định rằng việc phát triển được hoàn thành ASP.NET dự án ở phía MVC cốt lõi là một công ty khởi nghiệp.

Tạo chế độ xem cho Blazor Assembly

Khu vực này sẽ thay đổi tùy thuộc vào dự án bạn đang thực sự tạo, vì vậy vui lòng sửa đổi nó theo dự án đó. Ở đây, chúng tôi sẽ sửa đổi nó dựa trên cấu hình của dự án mẫu.

Về cơ bản, nó nên được sửa đổi để giống với cái được tạo khi bạn xuất bản index.html Blazor Assembly.

Sửa lỗi _Layout.cshtml

Tôi muốn tham khảo CSS của Blazor Assembly, vì vậy tôi có thể viết nó trực tiếp vào . _Layout.cshtml Chúng tôi muốn nó chỉ được áp dụng cho trang đích càng nhiều càng tốt, vì vậy chúng tôi có thể mở rộng nó bằng cách thêm RenderSectionAsync để các liên kết đến CSS có thể được viết trên mỗi trang.

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

Thêm một trang cho Blazor Assembly

Thêm một trang dành riêng để hiển thị Blazor Assembly. ASP.NET quy trình và bổ sung trang thông thường trong Core MVC đều giống nhau.

HomeController Thêm các hành động sau vào tệp . Phía máy chủ không làm bất cứ điều gì cụ thể, vì vậy nó chỉ trả về chế độ xem.

Trang chủKiểm soát.cs

// 省略

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

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

Bấm chuột phải vào hành động để thêm dạng xem.

Không có gì để ràng buộc, vì vậy hãy thêm nó như hiện tại.

Dạng xem được tạo.

Sử dụng được tạo tại thời điểm xuất bản của index.html Blazor Assembly được tham khảo, chúng tôi sẽ làm lại nó như sau.

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

Thêm liên kết để bạn có thể điều hướng đến trang trong Blazor.

index.cshtml (bằng tiếng Anh)

@{
  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>

Thêm microsoft.AspNetCore.Components.WebAssembly.Server tham khảo

Startup.cs Bạn không cần phải tự viết mã cần thiết, nhưng để dễ dàng bạn nhận được từ Microsoft.AspNetCore.Components.WebAssembly.Server NuGet.

Nhấp chuột phải vào Dependencies và chọn Manage NuGet Packages.

Chọn tab Quản trị và nhập Microsoft.AspNetCore.Components.WebAssembly.Server vào trường tìm kiếm.

Một gói có cùng tên được hiển thị, vì vậy hãy cài đặt nó.

Xác minh rằng gói đã được thêm vào.

Thay đổi đối với Khởi động.cs

app.UseHttpsRedirection(); Chèn mã sau vào dòng sau dòng:

app.UseBlazorFrameworkFiles();

Triển khai Blazor WebAssembly

Về cơ bản, bạn có thể đặt thư mục wwwroot Blazor WebAssembly đã xuất bản như trong thư mục wwwroot của ASP.NEt Core,index.html nhưng bạn nên xóa nó vì nó sẽ không còn cần thiết nữa. Ngoài ra, vì đượcfavicon.ico lồng tiếng, hãy quyết định sử dụng biểu tượng nào.

Khi phát hành bằng PWA, nếu bạn đã loại trừ các tệp (chẳng hạn như chỉ mục.html) trong thư mục wwwroot, Bạn sẽ cần mở trong trình soạn thảo văn bản, cũng trong thư mục wwwroot và xóa các bản ghi trong service-worker-assets.js tệp bị loại trừ. Nếu không, bạn có thể gặp lỗi nội bộ khi mở màn hình web.

Khi bạn xuất bản ứng dụng Blazor, bạn không cần phải thực hiện việc này theo cách thủ công bằng cách loại trừ các tệp không cần thiết khỏi dự án của mình.

Trong trường hợp PWA, lỗi nội bộ xảy ra nếu chúng không ở trong môi trường https. Nó không thể được cài đặt như một PWA.

Xác nhận thực hiện

ASP.NET Debug chạy dự án Core MVC. Truy cập trang Blazor và xác minh rằng bố cục của Blazor Assembly xuất hiện trong trang. Chọn menu bên trái và xác minh rằng từng tính năng hoạt động.

Giới thiệu về URL

Nếu bạn nhấp vào menu bên trái của Blazor Assembly được hiển thị trong trang, bạn sẽ nhận thấy rằng URL thay đổi. Hiện tượng này không tuân theo hành vi URL được mong đợi bởi ASP.NET Core MVC, vì vậy nếu có thể, Blazor hội tốt nhất nên tạo URL theo cách mà URL không thay đổi.

Khi bạn mở một trang Blazor

Khi bạn nhấp vào menu truy cập

Nhật ký thay đổi

2022/7/12
  • Đã thêm điểm cần lưu ý khi loại trừ các tệp không cần thiết trong vị trí tệp của ứng dụng Blazor đã xuất bản.
2022/3/30
  • ấn bản đầu tiên
Triển khai các ứng dụng được tạo bằng trợ lý web "lai" cho IIS
Triển khai nhiều Blazor WebAssemblys trong MVC Core ASP.NET