Công nghệ Lập trình

Những thành phần Bootstrap 5 miễn phí cho ASP.NET Blazor

Bootstrap 5 có những thành phần miễn phí cho ASP.NET Blazor. Dưới đây là những việc bạn cần làm để đưa chúng vào ASP.NET Blazor.

Bootstrap và ASP.NET Blazor

Điều kiện cần thiết

Các thành phần Havit.Blazor có những yêu cầu sau:

  • .NET 6.0 trở lên (đa mục tiêu net6.0 và net7.0; hỗ trợ net5.0 bị loại bỏ trong phiên bản 3.2)
  • Model host Blazor WebAssembly hoặc Blazor Server

Hướng dẫn cài đặt

Gói NuGet

Tìm gói Havit.Blazor.Components.Web.Bootstrap qua NuGet Package Manager hoặc cài đặt nó bằng lệnh sau:

dotnet add package Havit.Blazor.Components.Web.Bootstrap

CSS & JavaScript

Thêm các tham chiếu CSS & JavaScript

CSS

Thêm lệnh sau vào phần HTML, nó có thể là index.html hoặc _Host.cshtml/_Layout.cshtml phụ thuộc vào việc bạn đang chạy WebAssembly hay Server:

<!-- Standard Bootstrap CSS from CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<!-- Default values for additional CSS Variables (+ import Bootstrap Icons) -->
<link href="_content/Havit.Blazor.Components.Web.Bootstrap/defaults.css" rel="stylesheet" />

<!-- Blazor CSS Isolation -->
<link href="Your.Blazor.Project.Assembly.Name.styles.css" rel="stylesheet" />

Nếu muốn dùng theme Bootstrap tùy biến (đã dùng trong tài liệu này và bản mẫu), thay thế cho link đầu tiên với:

<!-- Custom themed Bootstrap CSS build -->
<link href="_content/Havit.Blazor.Components.Web.Bootstrap/bootstrap.css" rel="stylesheet" />

Bạn có thể tham chiếu build/theme Bootstrap tùy biến khác bằng cách này.

Nếu đang dùng một mẫu Blazor chuẩn, đảm bảo loại bỏ code không cần thiết từ site.css và xóa hoàn toàn bootstrap.min.css trong index.html hoặc _Host.cshtml/_Layout.cshtml.

Bootstrap JavaSript

Ở cuối phần <body> HTML của index.html, hãy thêm lệnh sau (Bootstrap JavaScript Bundle với Popper):

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

Nếu đang host app Blazor trong file HTML do server ASP.NET tạo (ví dụ: _Host.cshtml/_Layout.cshtml), bạn có thể dùng phương thức trợ giúp để triển khai thẻ <script/> và tự động tạo phiên bản:

<!-- JavaScript Bundle with Popper -->
@Html.Raw(HxSetup.RenderBootstrapJavaScriptReference())

Nhập trường tên

Thêm lệnh sau vào file _Imports.razor:

@using Havit.Blazor.Components.Web
@using Havit.Blazor.Components.Web.Bootstrap

Các dịch vụ đăng ký

Đối với Blazor WebAssembly, thêm lệnh sau vào Program.Main:

using Havit.Blazor.Components.Web            // <------ ADD THIS LINE
using Havit.Blazor.Components.Web.Bootstrap  // <------ ADD THIS LINE

public static async Task Main(string[] args)
{
	var builder = WebAssemblyHostBuilder.CreateDefault(args);
	builder.RootComponents.Add<App>("app");

	// ... shortened for brevity

	builder.Services.AddHxServices();        // <------ ADD THIS LINE

	await builder.Build().RunAsync();
}

Đối với Blazor Server (hoặc WASM với kết xuất trước máy chủ), thêm những đăng ký sau vào file Startup.cs, ConfigureServices().

Hỗ trợ các thành phần cụ thể

Một vài trong số các thành phần cần một thiết lập dự án cụ thể để hoạt động. Điều này luôn bao gồm thêm đăng ký một dịch vụ và thêm host-component vào App.razor hoặc thành phần bố cục.

  • HxMessenger - hiển thị tin nhắn mới từ mã của bạn một cách dễ dàng
  • HxMessageBoxHost - mở hộp thông báo (và chờ kết quả) từ mã của bạn

Giờ bạn đã sẵn sàng sử dụng tất cả các thành phần trong file razor. Chúng đi kèm với tiền tố Hx.

<HxIcon Icon="@BootstrapIcon.HandThumbsUp" CssClass="display-3" />
Thứ Bảy, 14/01/2023 11:22
5 ★ 1 👨 261
#Bootstrap

Bạn nên đọc

0 Bình luận
Sắp xếp theo
❖
Xóa Đăng nhập để Gửi

    Có thể bạn quan tâm

    ❖ Lập trình