Nâng cấp lên Microsoft Edge để tận dụng các tính năng mới nhất, cập nhật bảo mật và hỗ trợ kỹ thuật.
ASP.NET Core Blazor JavaScript Khả năng tương tác (JS Interop)
Bài báo
11/08/2022
38 phút để đọc
Trong bài viết này
Bài viết này giải thích các khái niệm chung về cách tương tác với JavaScript trong các ứng dụng Blazor.
Một ứng dụng Blazor có thể gọi các hàm JavaScript (JS) từ các phương thức .NET và các phương thức .NET từ các hàm JS. Các kịch bản này được gọi là khả năng tương tác JavaScript (JS Interop).
Hướng dẫn xen kẽ JS được cung cấp trong các bài viết sau:
Gọi các chức năng JavaScript từ các phương thức .NET trong blazor Core ASP.NET
Gọi .NET Phương thức từ các chức năng JavaScript trong Blazor ASP.NET Core
Tương tác với mô hình đối tượng tài liệu (DOM)
Chỉ làm biến đổi mô hình đối tượng tài liệu (DOM) với JavaScript (JS) khi đối tượng không tương tác với Blazor. Blazor duy trì các biểu diễn của DOM và tương tác trực tiếp với các đối tượng DOM. Nếu một phần tử được hiển thị bởi blazor được sửa đổi bên ngoài bằng cách sử dụng JS trực tiếp hoặc qua JS Interop, DOM có thể không còn khớp với biểu diễn bên trong của Blazor, có thể dẫn đến hành vi không xác định. Hành vi không xác định có thể chỉ can thiệp vào việc trình bày các yếu tố hoặc chức năng của chúng nhưng cũng có thể đưa ra rủi ro bảo mật cho ứng dụng hoặc máy chủ.
Hướng dẫn này không chỉ áp dụng cho mã Interop JS của riêng bạn mà còn cho bất kỳ thư viện JS nào mà ứng dụng sử dụng, bao gồm bất cứ thứ gì được cung cấp bởi khung của bên thứ ba, chẳng hạn như Bootstrap JS và JQuery.
Trong một vài ví dụ tài liệu, JS Interop được sử dụng để làm biến đổi một yếu tố hoàn toàn cho mục đích trình diễn như là một phần của một ví dụ. Trong những trường hợp đó, một cảnh báo xuất hiện trong văn bản.
Để biết thêm thông tin, hãy xem các hàm JavaScript từ các phương thức .NET trong blazor Core ASP.NET.
Các cuộc gọi JavaScript không đồng bộ
Các cuộc gọi interop của JS không đồng bộ theo mặc định, bất kể mã được gọi là đồng bộ hay không đồng bộ. Các cuộc gọi không đồng bộ theo mặc định để đảm bảo rằng các thành phần tương thích trên cả hai mô hình lưu trữ blazor, máy chủ blazor và webassebly blazor. Trên máy chủ Blazor, các cuộc gọi interop của JS phải không đồng bộ vì chúng được gửi qua kết nối mạng. Đối với các ứng dụng độc quyền áp dụng mô hình lưu trữ webassebly blazor, các cuộc gọi interop JS đồng bộ được hỗ trợ.
Để biết thêm thông tin, hãy xem các bài viết sau:
Gọi các chức năng JavaScript từ các phương thức .NET trong blazor Core ASP.NET
Gọi .NET Phương thức từ các chức năng JavaScript trong Blazor ASP.NET Core
Đối tượng tuần tự hóa
Blazor sử dụng System.Text.json để tuần tự hóa với các yêu cầu sau và hành vi mặc định:
Các loại phải có hàm tạo mặc định, ________ 38/________ 39 Người truy cập phải được công khai và các trường không bao giờ được nối tiếp.
Tuần tự hóa mặc định toàn cầu không thể tùy chỉnh để tránh phá vỡ các thư viện thành phần hiện có, tác động đến hiệu suất và bảo mật và giảm độ tin cậy.
Nối tiếp tên thành viên .NET Kết quả trong tên khóa JSON chữ thường.
JSON bị suy giảm như các trường hợp JsonEuity C#, cho phép vỏ hỗn hợp. Pha đúc nội bộ để gán cho các thuộc tính mô hình C# hoạt động như mong đợi mặc dù có bất kỳ sự khác biệt nào giữa tên khóa JSON và tên thuộc tính C#.
API JsonConverter có sẵn để tuần tự hóa tùy chỉnh. Các thuộc tính có thể được chú thích bằng thuộc tính
export function showPrompt(message) {
return prompt(message, 'Type anything here');
}
0 để ghi đè lên tuần tự hóa mặc định cho một kiểu dữ liệu hiện có.
Để biết thêm thông tin, hãy xem các tài nguyên sau trong tài liệu .NET:
Sê -ri JSON và giải phóng hóa (Marshalling và Unmarshalling) trong .NET
Cách tùy chỉnh tên và giá trị thuộc tính với
export function showPrompt(message) {
return prompt(message, 'Type anything here');
}
1
Cách viết bộ chuyển đổi tùy chỉnh cho sê -ri JSON (Marshalling) trong .NET
Blazor hỗ trợ tối ưu hóa mảng byte JS Interop để tránh mã hóa/giải mã các mảng byte vào base64. Ứng dụng có thể áp dụng tuần tự hóa tùy chỉnh và vượt qua các byte kết quả. Để biết thêm thông tin, hãy xem các hàm JavaScript từ các phương thức .NET trong blazor Core ASP.NET.
Khởi tạo JavaScript
Bộ khởi tạo JavaScript (JS) thực thi logic trước và sau khi ứng dụng Blazor tải. Bộ khởi tạo JS rất hữu ích trong các kịch bản sau:
Tùy chỉnh cách ứng dụng Blazor tải.
Khởi tạo thư viện trước khi Blazor khởi động.
Định cấu hình cài đặt blazor.
Bộ khởi tạo JS được phát hiện như là một phần của quy trình xây dựng và được nhập tự động trong các ứng dụng Blazor. Việc sử dụng các bộ khởi tạo JS thường loại bỏ sự cần thiết phải kích hoạt thủ công các chức năng tập lệnh khỏi ứng dụng khi sử dụng Thư viện lớp Dao cạo (RCLS).
Để xác định trình khởi tạo JS, hãy thêm mô -đun JS vào dự án có tên
export function showPrompt(message) {
return prompt(message, 'Type anything here');
}
2, trong đó trình giữ chỗ
export function showPrompt(message) {
return prompt(message, 'Type anything here');
}
3 là tên lắp ráp, tên thư viện hoặc định danh gói. Đặt tệp trong gốc web của dự án, thường là thư mục
export function showPrompt(message) {
return prompt(message, 'Type anything here');
}
4.
Mô -đun xuất hoặc cả hai chức năng thông thường sau:
export function showPrompt(message) {
return prompt(message, 'Type anything here');
}
5: Được gọi trước khi Blazor bắt đầu. Ví dụ,
export function showPrompt(message) {
return prompt(message, 'Type anything here');
}
6 được sử dụng để tùy chỉnh quy trình tải, mức ghi nhật ký và các tùy chọn khác dành riêng cho mô hình lưu trữ.
Trong Blazor Webassugging,
export function showPrompt(message) {
return prompt(message, 'Type anything here');
}
6 nhận được các tùy chọn Webassugging của Blazor (
export function showPrompt(message) {
return prompt(message, 'Type anything here');
}
8 trong ví dụ của phần này) và bất kỳ tiện ích mở rộng nào (
export function showPrompt(message) {
return prompt(message, 'Type anything here');
}
9 trong ví dụ của phần này) được thêm vào trong quá trình xuất bản. Ví dụ: các tùy chọn có thể chỉ định việc sử dụng trình tải tài nguyên khởi động tùy chỉnh.
Trong máy chủ Blazor,
export function showPrompt(message) {
return prompt(message, 'Type anything here');
}
6 nhận các tùy chọn khởi động mạch Signalr (
export function showPrompt(message) {
return prompt(message, 'Type anything here');
}
3 được sử dụng để khởi tạo các thư viện bằng cách thực hiện các cuộc gọi interop của JS và đăng ký các yếu tố tùy chỉnh. Trường hợp Blazor được chuyển đến
var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
0. Đặt tệp trong thư mục
export function showPrompt(message) {
return prompt(message, 'Type anything here');
}
4 của ứng dụng.
Sử dụng tên thư viện hoặc định danh gói của dự án nếu bộ khởi tạo JS được tiêu thụ từ RCL. Ví dụ: đặt tên cho tệp
var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
2 cho RCL với định danh gói là
var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
3. Đặt tệp trong thư mục
export function showPrompt(message) {
return prompt(message, 'Type anything here');
}
4 của thư viện.
export function beforeStart(options, extensions) {
console.log("beforeStart");
}
export function afterStarted(blazor) {
console.log("afterStarted");
}
Ghi chú
Các ứng dụng MVC và Dao cạo không tự động tải Bộ khởi tạo JS. Tuy nhiên, mã nhà phát triển có thể bao gồm một tập lệnh để tìm nạp bản kê khai của ứng dụng và kích hoạt tải của các bộ khởi tạo JS.
Để biết các ví dụ về khởi tạo JS, hãy xem các tài nguyên sau:
Bố cục triển khai cho các ứng dụng Webassugging của ASP.NET Core
Ứng dụng kiểm tra cơ bản trong kho lưu trữ GitHub Core ASP.NET (
var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
5)
Vị trí của JavaScript
Tải mã JavaScript (JS) bằng bất kỳ cách tiếp cận nào sau đây:
Tải một tập lệnh trong đánh dấu
var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
6 (thường không được khuyến nghị)
Tải một tập lệnh trong đánh dấu
var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
7
Tải tập lệnh từ tệp JavaScript bên ngoài (
var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
8) được hợp tác với một thành phần
Tải tập lệnh từ tệp JavaScript bên ngoài (
var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
8)
Tiêm một tập lệnh sau khi blazor bắt đầu
Cảnh báo
Không đặt thẻ
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
0 trong tệp thành phần dao cạo (
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
1) vì thẻ
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
0 không thể được Blazor cập nhật động.
Ghi chú
Các ví dụ tài liệu thường đặt các tập lệnh trong thẻ
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
0 hoặc tải các tập lệnh toàn cầu từ các tệp bên ngoài. Những cách tiếp cận này gây ô nhiễm cho khách hàng với các chức năng toàn cầu. Đối với các ứng dụng sản xuất, chúng tôi khuyên bạn nên đặt JavaScript vào các mô -đun JavaScript riêng biệt có thể được nhập khi cần. Để biết thêm thông tin, hãy xem phần cô lập JavaScript trong phần Mô -đun JavaScript.
Tải một tập lệnh trong đánh dấu var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
6
Cách tiếp cận trong phần này thường không được khuyến khích.
Đặt thẻ JavaScript (JS) (
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
5) trong đánh dấu phần tử
var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
6 của
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
7 (Blazor Webassemply) hoặc
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
6 không phải là cách tiếp cận tốt nhất vì những lý do sau:
JS Interop có thể thất bại nếu tập lệnh phụ thuộc vào blazor. Chúng tôi khuyên bạn nên tải các tập lệnh bằng một trong các phương pháp khác, không thông qua đánh dấu
var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
6.
Trang có thể trở nên chậm hơn tương tác do thời gian cần phân tích các JS trong tập lệnh.
Tải một tập lệnh trong đánh dấu var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
7
Đặt các thẻ JavaScript (JS) (
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
5) bên trong đánh dấu phần tử
<script src="js/scripts.js"></script>
3 của
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
7 (Blazor Webassemply) hoặc
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
Tải tập lệnh từ tệp JavaScript bên ngoài (var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
8) được hợp tác với một thành phần
Treo các tệp JavaScript (JS) cho các trang, chế độ xem và các thành phần dao cạo là một cách thuận tiện để tổ chức các tập lệnh trong một ứng dụng.
Sắp xếp các tệp JS bằng cách sử dụng các quy ước mở rộng tên tệp sau:
Các trang của các trang dao cạo ứng dụng và chế độ xem của các ứng dụng MVC:
Để vô hiệu hóa bộ nhớ đệm phía máy khách trong các trình duyệt, các nhà phát triển thường áp dụng một trong các phương pháp sau:
Tắt bộ đệm khi bảng điều khiển công cụ phát triển của trình duyệt được mở. Hướng dẫn có thể được tìm thấy trong tài liệu Công cụ dành cho nhà phát triển của từng trình bảo trì trình duyệt:
Chrome devtools
Công cụ phát triển Firefox
Tổng quan về Công cụ phát triển Microsoft Edge
Thực hiện làm mới trình duyệt thủ công của bất kỳ trang web nào của ứng dụng Blazor để tải lại các tệp JS từ máy chủ. Phần mềm trung gian HTTP của ASP.NET Core luôn vinh danh tiêu đề không có bộ đệm hợp lệ
Một ứng dụng Blazor có thể gọi các hàm JavaScript (JS) từ các phương thức .NET và các phương thức .NET từ các hàm JS. Các kịch bản này được gọi là khả năng tương tác JavaScript (JS Interop).
Hướng dẫn xen kẽ JS được cung cấp trong các bài viết sau:
Gọi các chức năng JavaScript từ các phương thức .NET trong blazor Core ASP.NET
Gọi .NET Phương thức từ các chức năng JavaScript trong Blazor ASP.NET Core
Tương tác với mô hình đối tượng tài liệu (DOM)
Chỉ làm biến đổi mô hình đối tượng tài liệu (DOM) với JavaScript (JS) khi đối tượng không tương tác với Blazor. Blazor duy trì các biểu diễn của DOM và tương tác trực tiếp với các đối tượng DOM. Nếu một phần tử được hiển thị bởi blazor được sửa đổi bên ngoài bằng cách sử dụng JS trực tiếp hoặc qua JS Interop, DOM có thể không còn khớp với biểu diễn bên trong của Blazor, có thể dẫn đến hành vi không xác định. Hành vi không xác định có thể chỉ can thiệp vào việc trình bày các yếu tố hoặc chức năng của chúng nhưng cũng có thể đưa ra rủi ro bảo mật cho ứng dụng hoặc máy chủ.
Hướng dẫn này không chỉ áp dụng cho mã Interop JS của riêng bạn mà còn cho bất kỳ thư viện JS nào mà ứng dụng sử dụng, bao gồm bất cứ thứ gì được cung cấp bởi khung của bên thứ ba, chẳng hạn như Bootstrap JS và JQuery.
Trong một vài ví dụ tài liệu, JS Interop được sử dụng để làm biến đổi một yếu tố hoàn toàn cho mục đích trình diễn như là một phần của một ví dụ. Trong những trường hợp đó, một cảnh báo xuất hiện trong văn bản.
Để biết thêm thông tin, hãy xem các hàm JavaScript từ các phương thức .NET trong blazor Core ASP.NET.
Các cuộc gọi JavaScript không đồng bộ
Các cuộc gọi interop của JS không đồng bộ theo mặc định, bất kể mã được gọi là đồng bộ hay không đồng bộ. Các cuộc gọi không đồng bộ theo mặc định để đảm bảo rằng các thành phần tương thích trên cả hai mô hình lưu trữ blazor, máy chủ blazor và webassebly blazor. Trên máy chủ Blazor, các cuộc gọi interop của JS phải không đồng bộ vì chúng được gửi qua kết nối mạng. Đối với các ứng dụng độc quyền áp dụng mô hình lưu trữ webassebly blazor, các cuộc gọi interop JS đồng bộ được hỗ trợ.
Để biết thêm thông tin, hãy xem các bài viết sau:
Gọi các chức năng JavaScript từ các phương thức .NET trong blazor Core ASP.NET
Gọi .NET Phương thức từ các chức năng JavaScript trong Blazor ASP.NET Core
Đối tượng tuần tự hóa
Blazor sử dụng System.Text.json để tuần tự hóa với các yêu cầu sau và hành vi mặc định:
Các loại phải có hàm tạo mặc định, ________ 38/________ 39 Người truy cập phải được công khai và các trường không bao giờ được nối tiếp.
Tuần tự hóa mặc định toàn cầu không thể tùy chỉnh để tránh phá vỡ các thư viện thành phần hiện có, tác động đến hiệu suất và bảo mật và giảm độ tin cậy.
Nối tiếp tên thành viên .NET Kết quả trong tên khóa JSON chữ thường.
JSON bị suy giảm như các trường hợp JsonEuity C#, cho phép vỏ hỗn hợp. Pha đúc nội bộ để gán cho các thuộc tính mô hình C# hoạt động như mong đợi mặc dù có bất kỳ sự khác biệt nào giữa tên khóa JSON và tên thuộc tính C#.
API JsonConverter có sẵn để tuần tự hóa tùy chỉnh. Các thuộc tính có thể được chú thích bằng thuộc tính
export function showPrompt(message) {
return prompt(message, 'Type anything here');
}
0 để ghi đè lên tuần tự hóa mặc định cho một kiểu dữ liệu hiện có.
Để biết thêm thông tin, hãy xem các tài nguyên sau trong tài liệu .NET:
Sê -ri JSON và giải phóng hóa (Marshalling và Unmarshalling) trong .NET
Cách tùy chỉnh tên và giá trị thuộc tính với
export function showPrompt(message) {
return prompt(message, 'Type anything here');
}
1
Cách viết bộ chuyển đổi tùy chỉnh cho sê -ri JSON (Marshalling) trong .NET
Blazor hỗ trợ tối ưu hóa mảng byte JS Interop để tránh mã hóa/giải mã các mảng byte vào base64. Ứng dụng có thể áp dụng tuần tự hóa tùy chỉnh và vượt qua các byte kết quả. Để biết thêm thông tin, hãy xem các hàm JavaScript từ các phương thức .NET trong blazor Core ASP.NET.
Blazor hỗ trợ các JS không được kiểm soát khi một khối lượng lớn các đối tượng .NET được nối tiếp nhanh chóng hoặc khi các đối tượng .NET lớn hoặc nhiều đối tượng .NET phải được tuần tự hóa. Để biết thêm thông tin, hãy xem các hàm JavaScript từ các phương thức .NET trong blazor Core ASP.NET.
Khởi tạo JavaScript
Bộ khởi tạo JavaScript (JS) thực thi logic trước và sau khi ứng dụng Blazor tải. Bộ khởi tạo JS rất hữu ích trong các kịch bản sau:
Tùy chỉnh cách ứng dụng Blazor tải.
Khởi tạo thư viện trước khi Blazor khởi động.
Định cấu hình cài đặt blazor.
Bộ khởi tạo JS được phát hiện như là một phần của quy trình xây dựng và được nhập tự động trong các ứng dụng Blazor. Việc sử dụng các bộ khởi tạo JS thường loại bỏ sự cần thiết phải kích hoạt thủ công các chức năng tập lệnh khỏi ứng dụng khi sử dụng Thư viện lớp Dao cạo (RCLS).
Để xác định trình khởi tạo JS, hãy thêm mô -đun JS vào dự án có tên
export function showPrompt(message) {
return prompt(message, 'Type anything here');
}
2, trong đó trình giữ chỗ
export function showPrompt(message) {
return prompt(message, 'Type anything here');
}
3 là tên lắp ráp, tên thư viện hoặc định danh gói. Đặt tệp trong gốc web của dự án, thường là thư mục
export function showPrompt(message) {
return prompt(message, 'Type anything here');
}
4.
Mô -đun xuất hoặc cả hai chức năng thông thường sau:
export function showPrompt(message) {
return prompt(message, 'Type anything here');
}
5: Được gọi trước khi Blazor bắt đầu. Ví dụ,
export function showPrompt(message) {
return prompt(message, 'Type anything here');
}
6 được sử dụng để tùy chỉnh quy trình tải, mức ghi nhật ký và các tùy chọn khác dành riêng cho mô hình lưu trữ.
Trong Blazor Webassugging,
export function showPrompt(message) {
return prompt(message, 'Type anything here');
}
6 nhận được các tùy chọn Webassugging của Blazor (
export function showPrompt(message) {
return prompt(message, 'Type anything here');
}
8 trong ví dụ của phần này) và bất kỳ tiện ích mở rộng nào (
export function showPrompt(message) {
return prompt(message, 'Type anything here');
}
9 trong ví dụ của phần này) được thêm vào trong quá trình xuất bản. Ví dụ: các tùy chọn có thể chỉ định việc sử dụng trình tải tài nguyên khởi động tùy chỉnh.
Trong máy chủ Blazor,
export function showPrompt(message) {
return prompt(message, 'Type anything here');
}
6 nhận các tùy chọn khởi động mạch Signalr (
export function showPrompt(message) {
return prompt(message, 'Type anything here');
}
3 được sử dụng để khởi tạo các thư viện bằng cách thực hiện các cuộc gọi interop của JS và đăng ký các yếu tố tùy chỉnh. Trường hợp Blazor được chuyển đến
var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
0. Đặt tệp trong thư mục
export function showPrompt(message) {
return prompt(message, 'Type anything here');
}
4 của ứng dụng.
Sử dụng tên thư viện hoặc định danh gói của dự án nếu bộ khởi tạo JS được tiêu thụ từ RCL. Ví dụ: đặt tên cho tệp
var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
2 cho RCL với định danh gói là
var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
3. Đặt tệp trong thư mục
export function showPrompt(message) {
return prompt(message, 'Type anything here');
}
4 của thư viện.
export function beforeStart(options, extensions) {
console.log("beforeStart");
}
export function afterStarted(blazor) {
console.log("afterStarted");
}
Ghi chú
Các ứng dụng MVC và Dao cạo không tự động tải Bộ khởi tạo JS. Tuy nhiên, mã nhà phát triển có thể bao gồm một tập lệnh để tìm nạp bản kê khai của ứng dụng và kích hoạt tải của các bộ khởi tạo JS.
Để biết các ví dụ về khởi tạo JS, hãy xem các tài nguyên sau:
Bố cục triển khai cho các ứng dụng Webassugging của ASP.NET Core
Ứng dụng kiểm tra cơ bản trong kho lưu trữ GitHub Core ASP.NET (
var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
5)
Vị trí của JavaScript
Tải mã JavaScript (JS) bằng bất kỳ cách tiếp cận nào sau đây:
Tải một tập lệnh trong đánh dấu
var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
6 (thường không được khuyến nghị)
Tải một tập lệnh trong đánh dấu
var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
7
Tải tập lệnh từ tệp JavaScript bên ngoài (
var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
8) được hợp tác với một thành phần
Tải tập lệnh từ tệp JavaScript bên ngoài (
var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
8)
Tiêm một tập lệnh sau khi blazor bắt đầu
Cảnh báo
Không đặt thẻ
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
0 trong tệp thành phần dao cạo (
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
1) vì thẻ
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
0 không thể được Blazor cập nhật động.
Ghi chú
Các ứng dụng MVC và Dao cạo không tự động tải Bộ khởi tạo JS. Tuy nhiên, mã nhà phát triển có thể bao gồm một tập lệnh để tìm nạp bản kê khai của ứng dụng và kích hoạt tải của các bộ khởi tạo JS.
Để biết các ví dụ về khởi tạo JS, hãy xem các tài nguyên sau:
Bố cục triển khai cho các ứng dụng Webassugging của ASP.NET Core
Ứng dụng kiểm tra cơ bản trong kho lưu trữ GitHub Core ASP.NET (
var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
8)Server for a
Blazor Server app (
<script src="js/scripts.js"></script>
9).
Tải tập lệnh từ tệp JavaScript bên ngoài (var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
8) được hợp tác với một thành phần
Tải tập lệnh từ tệp JavaScript bên ngoài (
var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
8)
Tiêm một tập lệnh sau khi blazor bắt đầu
Cảnh báo
Không đặt thẻ
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
0 trong tệp thành phần dao cạo (
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
1) vì thẻ
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
0 không thể được Blazor cập nhật động.
Các ví dụ tài liệu thường đặt các tập lệnh trong thẻ
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
0 hoặc tải các tập lệnh toàn cầu từ các tệp bên ngoài. Những cách tiếp cận này gây ô nhiễm cho khách hàng với các chức năng toàn cầu. Đối với các ứng dụng sản xuất, chúng tôi khuyên bạn nên đặt JavaScript vào các mô -đun JavaScript riêng biệt có thể được nhập khi cần. Để biết thêm thông tin, hãy xem phần cô lập JavaScript trong phần Mô -đun JavaScript.
Tải một tập lệnh trong đánh dấu
var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
6
Cách tiếp cận trong phần này thường không được khuyến khích.path to the file in the project:
Đặt thẻ JavaScript (JS) (
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
5) trong đánh dấu phần tử
var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
6 của
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
6 không phải là cách tiếp cận tốt nhất vì những lý do sau:
JS Interop có thể thất bại nếu tập lệnh phụ thuộc vào blazor. Chúng tôi khuyên bạn nên tải các tập lệnh bằng một trong các phương pháp khác, không thông qua đánh dấu
var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
6.
Trang có thể trở nên chậm hơn tương tác do thời gian cần phân tích các JS trong tập lệnh.
Đặt các thẻ JavaScript (JS) (
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
5) bên trong đánh dấu phần tử
<script src="js/scripts.js"></script>
3 của
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
Để vô hiệu hóa bộ nhớ đệm phía máy khách trong các trình duyệt, các nhà phát triển thường áp dụng một trong các phương pháp sau:
Tắt bộ đệm khi bảng điều khiển công cụ phát triển của trình duyệt được mở. Hướng dẫn có thể được tìm thấy trong tài liệu Công cụ dành cho nhà phát triển của từng trình bảo trì trình duyệt:
Chrome devtools
Công cụ phát triển Firefox
Tổng quan về Công cụ phát triển Microsoft Edge
Thực hiện làm mới trình duyệt thủ công của bất kỳ trang web nào của ứng dụng Blazor để tải lại các tệp JS từ máy chủ. Phần mềm trung gian HTTP của ASP.NET Core luôn vinh danh tiêu đề không có bộ đệm hợp lệ
Một ứng dụng Blazor có thể gọi các hàm JavaScript (JS) từ các phương thức .NET và các phương thức .NET từ các hàm JS. Các kịch bản này được gọi là khả năng tương tác JavaScript (JS Interop).
Bài viết tổng quan này bao gồm các khái niệm chung. Hướng dẫn xen kẽ JS được cung cấp trong các bài viết sau:
Gọi các chức năng JavaScript từ các phương thức .NET trong blazor Core ASP.NET
Gọi .NET Phương thức từ các chức năng JavaScript trong Blazor ASP.NET Core
Tương tác với mô hình đối tượng tài liệu (DOM)
Chỉ làm biến đổi mô hình đối tượng tài liệu (DOM) với JavaScript (JS) khi đối tượng không tương tác với Blazor. Blazor duy trì các biểu diễn của DOM và tương tác trực tiếp với các đối tượng DOM. Nếu một phần tử được hiển thị bởi blazor được sửa đổi bên ngoài bằng cách sử dụng JS trực tiếp hoặc qua JS Interop, DOM có thể không còn khớp với biểu diễn bên trong của Blazor, có thể dẫn đến hành vi không xác định. Hành vi không xác định có thể chỉ can thiệp vào việc trình bày các yếu tố hoặc chức năng của chúng nhưng cũng có thể đưa ra rủi ro bảo mật cho ứng dụng hoặc máy chủ.
Hướng dẫn này không chỉ áp dụng cho mã Interop JS của riêng bạn mà còn cho bất kỳ thư viện JS nào mà ứng dụng sử dụng, bao gồm bất cứ thứ gì được cung cấp bởi khung của bên thứ ba, chẳng hạn như Bootstrap JS và JQuery.
Trong một vài ví dụ tài liệu, JS Interop được sử dụng để làm biến đổi một yếu tố hoàn toàn cho mục đích trình diễn như là một phần của một ví dụ. Trong những trường hợp đó, một cảnh báo xuất hiện trong văn bản.
Để biết thêm thông tin, hãy xem các hàm JavaScript từ các phương thức .NET trong blazor Core ASP.NET.
Các cuộc gọi JavaScript không đồng bộ
Các cuộc gọi interop của JS không đồng bộ theo mặc định, bất kể mã được gọi là đồng bộ hay không đồng bộ. Các cuộc gọi không đồng bộ theo mặc định để đảm bảo rằng các thành phần tương thích trên cả hai mô hình lưu trữ blazor, máy chủ blazor và webassebly blazor. Trên máy chủ Blazor, các cuộc gọi interop của JS phải không đồng bộ vì chúng được gửi qua kết nối mạng. Đối với các ứng dụng độc quyền áp dụng mô hình lưu trữ webassebly blazor, các cuộc gọi interop JS đồng bộ được hỗ trợ.
Để biết thêm thông tin, hãy xem các bài viết sau:
Gọi các chức năng JavaScript từ các phương thức .NET trong blazor Core ASP.NET
Gọi .NET Phương thức từ các chức năng JavaScript trong Blazor ASP.NET Core
Tương tác với mô hình đối tượng tài liệu (DOM)
Chỉ làm biến đổi mô hình đối tượng tài liệu (DOM) với JavaScript (JS) khi đối tượng không tương tác với Blazor. Blazor duy trì các biểu diễn của DOM và tương tác trực tiếp với các đối tượng DOM. Nếu một phần tử được hiển thị bởi blazor được sửa đổi bên ngoài bằng cách sử dụng JS trực tiếp hoặc qua JS Interop, DOM có thể không còn khớp với biểu diễn bên trong của Blazor, có thể dẫn đến hành vi không xác định. Hành vi không xác định có thể chỉ can thiệp vào việc trình bày các yếu tố hoặc chức năng của chúng nhưng cũng có thể đưa ra rủi ro bảo mật cho ứng dụng hoặc máy chủ.
Hướng dẫn này không chỉ áp dụng cho mã Interop JS của riêng bạn mà còn cho bất kỳ thư viện JS nào mà ứng dụng sử dụng, bao gồm bất cứ thứ gì được cung cấp bởi khung của bên thứ ba, chẳng hạn như Bootstrap JS và JQuery.
Trong một vài ví dụ tài liệu, JS Interop được sử dụng để làm biến đổi một yếu tố hoàn toàn cho mục đích trình diễn như là một phần của một ví dụ. Trong những trường hợp đó, một cảnh báo xuất hiện trong văn bản.
Để biết thêm thông tin, hãy xem các hàm JavaScript từ các phương thức .NET trong blazor Core ASP.NET.
Các cuộc gọi JavaScript không đồng bộ
Các cuộc gọi interop của JS không đồng bộ theo mặc định, bất kể mã được gọi là đồng bộ hay không đồng bộ. Các cuộc gọi không đồng bộ theo mặc định để đảm bảo rằng các thành phần tương thích trên cả hai mô hình lưu trữ blazor, máy chủ blazor và webassebly blazor. Trên máy chủ Blazor, các cuộc gọi interop của JS phải không đồng bộ vì chúng được gửi qua kết nối mạng. Đối với các ứng dụng độc quyền áp dụng mô hình lưu trữ webassebly blazor, các cuộc gọi interop JS đồng bộ được hỗ trợ.
Để biết thêm thông tin, hãy xem các bài viết sau:
Đối tượng tuần tự hóa
Blazor sử dụng System.Text.json để tuần tự hóa với các yêu cầu sau và hành vi mặc định:
Các loại phải có hàm tạo mặc định, ________ 38/________ 39 Người truy cập phải được công khai và các trường không bao giờ được nối tiếp.
Tuần tự hóa mặc định toàn cầu không thể tùy chỉnh để tránh phá vỡ các thư viện thành phần hiện có, tác động đến hiệu suất và bảo mật và giảm độ tin cậy.
Nối tiếp tên thành viên .NET Kết quả trong tên khóa JSON chữ thường.
JSON bị suy giảm như các trường hợp JsonEuity C#, cho phép vỏ hỗn hợp. Pha đúc nội bộ để gán cho các thuộc tính mô hình C# hoạt động như mong đợi mặc dù có bất kỳ sự khác biệt nào giữa tên khóa JSON và tên thuộc tính C#.
API JsonConverter có sẵn để tuần tự hóa tùy chỉnh. Các thuộc tính có thể được chú thích bằng thuộc tính
export function showPrompt(message) {
return prompt(message, 'Type anything here');
}
0 để ghi đè lên tuần tự hóa mặc định cho một kiểu dữ liệu hiện có.
Để biết thêm thông tin, hãy xem các tài nguyên sau trong tài liệu .NET:
Sê -ri JSON và giải phóng hóa (Marshalling và Unmarshalling) trong .NET
Cách tùy chỉnh tên và giá trị thuộc tính với
export function showPrompt(message) {
return prompt(message, 'Type anything here');
}
1
Cách viết bộ chuyển đổi tùy chỉnh cho sê -ri JSON (Marshalling) trong .NET
Blazor hỗ trợ các JS không được kiểm soát khi một khối lượng lớn các đối tượng .NET được nối tiếp nhanh chóng hoặc khi các đối tượng .NET lớn hoặc nhiều đối tượng .NET phải được tuần tự hóa. Để biết thêm thông tin, hãy xem các hàm JavaScript từ các phương thức .NET trong blazor Core ASP.NET.
Vị trí của JavaScript
Tải mã JavaScript (JS) bằng bất kỳ cách tiếp cận nào sau đây:
Tải một tập lệnh trong đánh dấu var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
6
Cách tiếp cận trong phần này thường không được khuyến khích.
Đặt tập lệnh (
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
5) vào đánh dấu phần tử
var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
6 của
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
7 (Blazor Webassemply) hoặc
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
6 không phải là cách tiếp cận tốt nhất vì những lý do sau:
JS Interop có thể thất bại nếu tập lệnh phụ thuộc vào blazor. Chúng tôi khuyên bạn nên tải các tập lệnh bằng một trong các phương pháp khác, không thông qua đánh dấu
var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
6.
Trang có thể trở nên chậm hơn tương tác do thời gian cần phân tích các JS trong tập lệnh.
Tải một tập lệnh trong đánh dấu var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
7
Đặt tập lệnh (
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
5) bên trong đánh dấu phần tử
<script src="js/scripts.js"></script>
3 của
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
7 (Blazor Webassugging) hoặc
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
8)
Đặt tập lệnh (<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
5) với đường dẫn tập lệnh <head>
...
<script>
window.jsMethod = (methodParameter) => {
...
};
</script>
</head>
46 bên trong thẻ <script src="js/scripts.js"></script>
3 đóng sau khi tham chiếu tập lệnh blazor.
Trong
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
7 (Blazor Webassugging) hoặc
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
60) được yêu cầu để tạo đường dẫn tài sản tĩnh chính xác đến tệp JS.
Người giữ chỗ <head>
...
<script>
window.jsMethod = (methodParameter) => {
...
};
</script>
</head>
33 là ID gói của thư viện. ID gói mặc định là tên lắp ráp của dự án nếu <head>
...
<script>
window.jsMethod = (methodParameter) => {
...
};
</script>
</head>
62 không được chỉ định trong tệp dự án.
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
5) bên trong thẻ
<script src="js/scripts.js"></script>
3 đóng sau khi tập lệnh blazor được tải.
Môi trường Blazor Core ASP.NET
Bộ nhớ đệm phản hồi trong ASP.NET Core
Một ứng dụng Blazor có thể gọi các hàm JavaScript (JS) từ các phương thức .NET và các phương thức .NET từ các hàm JS. Các kịch bản này được gọi là khả năng tương tác JavaScript (JS Interop).
Bài viết tổng quan này bao gồm các khái niệm chung. Hướng dẫn xen kẽ JS được cung cấp trong các bài viết sau:
Gọi các chức năng JavaScript từ các phương thức .NET trong blazor Core ASP.NET
Gọi .NET Phương thức từ các chức năng JavaScript trong Blazor ASP.NET Core
Tương tác với mô hình đối tượng tài liệu (DOM)
Chỉ làm biến đổi mô hình đối tượng tài liệu (DOM) với JavaScript (JS) khi đối tượng không tương tác với Blazor. Blazor duy trì các biểu diễn của DOM và tương tác trực tiếp với các đối tượng DOM. Nếu một phần tử được hiển thị bởi blazor được sửa đổi bên ngoài bằng cách sử dụng JS trực tiếp hoặc qua JS Interop, DOM có thể không còn khớp với biểu diễn bên trong của Blazor, có thể dẫn đến hành vi không xác định. Hành vi không xác định có thể chỉ can thiệp vào việc trình bày các yếu tố hoặc chức năng của chúng nhưng cũng có thể đưa ra rủi ro bảo mật cho ứng dụng hoặc máy chủ.
Hướng dẫn này không chỉ áp dụng cho mã Interop JS của riêng bạn mà còn cho bất kỳ thư viện JS nào mà ứng dụng sử dụng, bao gồm bất cứ thứ gì được cung cấp bởi khung của bên thứ ba, chẳng hạn như Bootstrap JS và JQuery.
Trong một vài ví dụ tài liệu, JS Interop được sử dụng để làm biến đổi một yếu tố hoàn toàn cho mục đích trình diễn như là một phần của một ví dụ. Trong những trường hợp đó, một cảnh báo xuất hiện trong văn bản.
Để biết thêm thông tin, hãy xem các hàm JavaScript từ các phương thức .NET trong blazor Core ASP.NET.
Các cuộc gọi JavaScript không đồng bộ
Các cuộc gọi interop của JS không đồng bộ theo mặc định, bất kể mã được gọi là đồng bộ hay không đồng bộ. Các cuộc gọi không đồng bộ theo mặc định để đảm bảo rằng các thành phần tương thích trên cả hai mô hình lưu trữ blazor, máy chủ blazor và webassebly blazor. Trên máy chủ Blazor, các cuộc gọi interop của JS phải không đồng bộ vì chúng được gửi qua kết nối mạng. Đối với các ứng dụng độc quyền áp dụng mô hình lưu trữ webassebly blazor, các cuộc gọi interop JS đồng bộ được hỗ trợ.
Để biết thêm thông tin, hãy xem các hàm JavaScript từ các phương thức .NET trong blazor Core ASP.NET.
Các cuộc gọi JavaScript không đồng bộ
Các cuộc gọi interop của JS không đồng bộ theo mặc định, bất kể mã được gọi là đồng bộ hay không đồng bộ. Các cuộc gọi không đồng bộ theo mặc định để đảm bảo rằng các thành phần tương thích trên cả hai mô hình lưu trữ blazor, máy chủ blazor và webassebly blazor. Trên máy chủ Blazor, các cuộc gọi interop của JS phải không đồng bộ vì chúng được gửi qua kết nối mạng. Đối với các ứng dụng độc quyền áp dụng mô hình lưu trữ webassebly blazor, các cuộc gọi interop JS đồng bộ được hỗ trợ.
Đối tượng tuần tự hóa
Blazor sử dụng System.Text.json để tuần tự hóa với các yêu cầu sau và hành vi mặc định:
Các loại phải có hàm tạo mặc định, ________ 38/________ 39 Người truy cập phải được công khai và các trường không bao giờ được nối tiếp.
Tuần tự hóa mặc định toàn cầu không thể tùy chỉnh để tránh phá vỡ các thư viện thành phần hiện có, tác động đến hiệu suất và bảo mật và giảm độ tin cậy.
Nối tiếp tên thành viên .NET Kết quả trong tên khóa JSON chữ thường.
JSON bị suy giảm như các trường hợp JsonEuity C#, cho phép vỏ hỗn hợp. Pha đúc nội bộ để gán cho các thuộc tính mô hình C# hoạt động như mong đợi mặc dù có bất kỳ sự khác biệt nào giữa tên khóa JSON và tên thuộc tính C#.
API JsonConverter có sẵn để tuần tự hóa tùy chỉnh. Các thuộc tính có thể được chú thích bằng thuộc tính
export function showPrompt(message) {
return prompt(message, 'Type anything here');
}
0 để ghi đè lên tuần tự hóa mặc định cho một kiểu dữ liệu hiện có.
Để biết thêm thông tin, hãy xem các tài nguyên sau trong tài liệu .NET:
Sê -ri JSON và giải phóng hóa (Marshalling và Unmarshalling) trong .NET
Cách tùy chỉnh tên và giá trị thuộc tính với export function showPrompt(message) {
return prompt(message, 'Type anything here');
}
1
Cách viết bộ chuyển đổi tùy chỉnh cho sê -ri JSON (Marshalling) trong .NET
Vị trí của JavaScript
Tải mã JavaScript (JS) bằng bất kỳ cách tiếp cận nào sau đây:
Tải một tập lệnh trong đánh dấu
var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
6 (thường không được khuyến nghị)
Tải một tập lệnh trong đánh dấu
var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
7
Tải tập lệnh từ tệp JS bên ngoài (
var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
8)
Tiêm một tập lệnh sau khi blazor bắt đầu
Cảnh báo
Không đặt thẻ
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
0 trong tệp thành phần dao cạo (
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
1) vì thẻ
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
0 không thể được Blazor cập nhật động.not supported in Blazor earlier than ASP.NET Core 5.0. If the app requires the use of JS modules for JS isolation, we recommend using ASP.NET Core 5.0 or later to build the app. For more information, use the
Version dropdown list to select a 5.0 or later version of this article and see the JavaScript isolation in JavaScript modules section.
Ghi chú
Các ví dụ tài liệu đặt các tập lệnh vào thẻ
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
0 hoặc tải các tập lệnh toàn cầu từ các tệp bên ngoài. Những cách tiếp cận này gây ô nhiễm cho khách hàng với các chức năng toàn cầu. Đặt JavaScript vào các mô -đun JavaScript riêng biệt có thể được nhập khi cần thiết không được hỗ trợ trong Blazor sớm hơn ASP.NET Core 5.0. Nếu ứng dụng yêu cầu sử dụng các mô -đun JS để cô lập JS, chúng tôi khuyên bạn nên sử dụng ASP.NET Core 5.0 trở lên để xây dựng ứng dụng. Để biết thêm thông tin, hãy sử dụng danh sách thả xuống phiên bản để chọn phiên bản 5.0 trở lên của bài viết này và xem phần cô lập JavaScript trong phần Mô -đun JavaScript.
Tải một tập lệnh trong đánh dấu
var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
6 không phải là cách tiếp cận tốt nhất vì những lý do sau:
JS Interop có thể thất bại nếu tập lệnh phụ thuộc vào blazor. Chúng tôi khuyên bạn nên tải các tập lệnh bằng một trong các phương pháp khác, không thông qua đánh dấu
var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
6.
Trang có thể trở nên chậm hơn tương tác do thời gian cần phân tích các JS trong tập lệnh.
Tải một tập lệnh trong đánh dấu var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
7
Đặt tập lệnh (
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
5) bên trong đánh dấu phần tử
<script src="js/scripts.js"></script>
3 của
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
7 (Blazor Webassugging) hoặc
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
var module = await JS.InvokeAsync<IJSObjectReference>("import",
"./_content/AppJS/Pages/Index.razor.js");
8)
Đặt tập lệnh (<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
5) với đường dẫn tập lệnh <head>
...
<script>
window.jsMethod = (methodParameter) => {
...
};
</script>
</head>
46 bên trong thẻ <script src="js/scripts.js"></script>
3 đóng sau khi tham chiếu tập lệnh blazor.
Trong
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
7 (Blazor Webassugging) hoặc
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
export function showPrompt(message) {
return prompt(message, 'Type anything here');
}
4 của thư viện lớp.
Để biết thêm thông tin, hãy xem tiêu thụ các thành phần dao cạo ASP.NET Core từ Thư viện lớp Dao cạo (RCL).
Tiêm một tập lệnh sau khi blazor bắt đầu
Tải JS từ một tập lệnh được tiêm trong
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
7 (Blazor Webassugging) hoặc
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
8 (máy chủ blazor) khi ứng dụng được khởi tạo:
Bạn có thể sử dụng các thư viện JavaScript trong Blazor không?
Blazor hỗ trợ các thư viện JavaScript hiện tại bằng IJSruntime, thông qua JavaScript Interop API's.Tham khảo tài liệu Blazor JavaScript Interop để biết thêm thông tin.. Refer to the documentation Blazor JavaScript interop for more information.
Blazor có chuyển đổi sang JavaScript không?
Vào thời điểm này, câu trả lời là không, nó sẽ không.Blazor là một thay thế cho JavaScript nhưng chưa phải là một.Blazor hỗ trợ nhiều tính năng trình duyệt tiêu chuẩn mà bạn đã quen với và được sử dụng trong các ứng dụng web hiện đại nhưng không phải tất cả.no, it will not. Blazor is an alternative to JavaScript but not yet a complete one. Blazor supports many of the standard browser features you've grown accustomed to and which are used in modern web apps but not all.
Tôi có thể sử dụng TypeScript với Blazor không?
Chúng ta cũng có thể sử dụng TypeScript trong Blazor, vì TypeScript là siêu của JavaScript.Khi chúng tôi biên dịch một dự án Blazor, tệp TypeScript sẽ được chuyển đổi thành tệp JavaScript bằng các thuộc tính MSBuild., as TypeScript is the superset of JavaScript. When we compile a Blazor project, the TypeScript file will be converted into a JavaScript file using the MSBuild properties.