Sự kiện onclick trên nút Blazor không được kích hoạt

Bạn có thể gặp tình huống khi nhấp vào một nút (button) trong ứng dụng Blazor nhưng sự kiện `@onclick` không được kích hoạt. Dưới đây là cách chẩn đoán và khắc phục vấn đề này. Giả sử bạn có một thành phần (component) tên `ButtonTestComponent.razor` với mã HTML như sau:

<button type="button" class="btn btn-primary" @onclick="HandleClick">Cập Nhật</button>

Tuy nhiên, trong phần `@code` của component, bạn chưa định nghĩa hàm `HandleClick`. Mã nguồn này sẽ không gây ra lỗi khi biên dịch. Nếu bạn đã định nghĩa hàm `HandleClick`, nhưng khi chạy ứng dụng và nhấp vào nút, không có phản hồi nào xảy ra. Mở công cụ F12 của trình duyệt, kiểm tra mạng (Network) và bạn sẽ thấy không có dữ liệu nào được gửi đi khi nhấp nút. Bảng điều khiển (Console) cũng không hiển thị lỗi nào. Khi kiểm tra phần tử nút, bạn nhận thấy nó được render ra dưới dạng: ``. (Trong điều kiện bình thường, nó nên là: ``). Cuối cùng, nguyên nhân được xác định là do vị trí của component. Tệp `ButtonTestComponent.razor` nằm trong thư mục `Controls`, trong khi thư mục `Controls` ngang hàng với thư mục `Components` chứa tệp `_Imports.razor`. Do đó, thư mục `Controls` không có tệp `_Imports.razor` riêng, và do đó không có các không gian tên cần thiết được nhập vào. Điều này khiến cho directive `@onclick` trong `ButtonTestComponent.razor` không được Blazor nhận diện đúng cách. Giải pháp: Giải pháp 1: Thêm trực tiếp chỉ thị sử dụng không gian tên vào trong tệp `ButtonTestComponent.razor`:

@using Microsoft.AspNetCore.Components.Web

Giải pháp 2: Di chuyển thư mục `Controls` vào bên trong thư mục `Components` để nó nằm trong phạm vi của tệp `_Imports.razor`. Lưu ý: Để có thể sử dụng các tính năng tương tác như `@onclick`, bạn cần bật chế độ `InteractiveServer` qua 3 bước: 1. Trong tệp `Program.cs`, đăng ký dịch vụ:

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

2. Trong tệp `Program.cs`, thêm chế độ render tương tác:

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

3. Chỉ định directive `@rendermode` trong component. Có hai cấp độ: 1) Cấp độ component: Bạn có thể chỉ định ở ba vị trí khác nhau a) Trong định nghĩa component:

@rendermode InteractiveServer

b) Trong một instance của component (cách được khuyến nghị, cho phép bạn tùy chỉnh chế độ tương tác cho từng component):

<ButtonTestComponent @rendermode="InteractiveServer" />

c) Trong định nghĩa của component cha:

@rendermode InteractiveServer

Nếu bạn chỉ định `@rendermode` trong component cha, thì component đó và tất cả các component con của nó sẽ được bật chế độ tương tác. 2) Cấp độ toàn cục: Chỉ định directive `@rendermode` trong component `Routes` của tệp `App.razor`. Toàn bộ ứng dụng sẽ bị ảnh hưởng bởi cài đặt này.

<body>
    <Routes @rendermode="InteractiveServer"/>
    <script src="_framework/blazor.web.js"></script>
</body>

Thẻ: blazor C# ASP.NET Core InteractiveServer Razor Components

Đăng vào ngày 5 tháng 7 lúc 09:05

Thành phố Cuồng loạn

Sự kiện onclick trên nút Blazor không được kích hoạt

Thẻ Phổ Biến