Cách thêm javascript vào trang blazor
|
Trước khi bạn có thể tương tác với thư viện JavaScript, trước tiên bạn cần thêm nó vào Blazor. Trong hướng dẫn này, bạn sẽ khám phá Show
Bạn có thể tải xuống mã ví dụ được sử dụng trong chủ đề này trên GitHub Có 2 loại JavaScript. mô-đun và tiêu chuẩn. Bạn sẽ cần xác định loại thư viện JavaScript của mình trước khi sử dụng nó. Chúng tôi cho rằng bạn hiểu mô-đun JavaScript và JavaScript tiêu chuẩn là gì, chúng tôi sẽ cung cấp cho bạn thông tin cập nhật nhanh để phân biệt giữa hai loại này. Mô-đun JavaScript là một tệp gồm các lớp/hàm được khai báo bằng từ khóa export function exampleFunction1()
{
alert("Hello Blazor School")
}
export function exampleFunction2()
{
alert("Hello Blazor School")
}1. JavaScript chuẩn là một tệp gồm các lớp/hàm được khai báo không có từ khóa export function exampleFunction1()
{
alert("Hello Blazor School")
}
export function exampleFunction2()
{
alert("Hello Blazor School")
}1. Ví dụMột mô-đun JavaScript export function exampleFunction()
{
alert("Hello Blazor School")
}JavaScript tiêu chuẩn function exampleFunction()
{
alert("Hello Blazor School")
}Một mô-đun JavaScript có thể chứa một hoặc nhiều khai báo export function exampleFunction1()
{
alert("Hello Blazor School")
}
export function exampleFunction2()
{
alert("Hello Blazor School")
}1. Đoạn mã sau cũng là một mô-đun JavaScriptexport function exampleFunction1()
{
alert("Hello Blazor School")
}
export function exampleFunction2()
{
alert("Hello Blazor School")
}Kỹ thuật này sẽ cho phép bạn sử dụng hàm JavaScript tiêu chuẩn ở mọi nơi trong trang web của mình. Để triển khai kỹ thuật này, bạn cần tải JavaScript tiêu chuẩn của mình bằng function exampleFunction()
{
alert("Hello Blazor School")
}0function exampleFunction()
{
alert("Hello Blazor School")
}2 và triển khai giao diện function exampleFunction()
{
alert("Hello Blazor School")
}3 trong phần chỉ thị. @inject IJSRuntime JS @implements IAsyncDisposable
@code {
private Lazy ExampleModule = new();
}
 function exampleFunction()
{
alert("Hello Blazor School")
}1Bạn có thể khởi tạo nó trong hook phương thức vòng đời khác. Tuy nhiên, phương pháp function exampleFunction()
{
alert("Hello Blazor School")
}6 được ưu tiên hơn vì bạn không cần JavaScript khi kết xuất thành phần của mình trong máy chủĐối với mô-đun JavaScript được sắp xếp, bạn cần thay đổi đường dẫn đến mô-đun JavaScript. Ví dụ bạn có cây thư mục sau Bạn có thể gọi các phương thức JavaScript từ các trang Blazor với sự trợ giúp của JavaScript Interop bằng cách thêm phần phụ thuộc IJSRuntime vào trang dao cạo function exampleFunction()
{
alert("Hello Blazor School")
}3Sau đó tham khảo tập lệnh trong trang HTML của ứng dụng blazor function exampleFunction()
{
alert("Hello Blazor School")
}4function exampleFunction()
{
alert("Hello Blazor School")
}5
4 bước dễ dàng để nhúng điều khiển JavaScript vào ứng dụng Blazor
Blazor là khung phát triển ứng dụng web một trang, mã nguồn mở do Microsoft phát triển. Mặc dù nó phụ thuộc vào các gói NuGet, nhưng nó cũng hỗ trợ sử dụng các gói npm npm chứa nhiều thư viện, khung và thành phần web hơn. Hơn nữa, các thành phần web được tải xuống dưới dạng các mô-đun và kiểu độc lập. npm cho phép chúng tôi xây dựng điều khiển cần thiết chỉ với các mô-đun và CSS cần thiết, dẫn đến sử dụng ít bộ nhớ hơn Trong blog này, chúng ta sẽ xem chi tiết cách nhập gói npm cũng như khai báo và nhúng điều khiển JavaScript vào ứng dụng Blazor. Để chứng minh, chúng tôi sẽ tải xuống gói npm Bảng tính JavaScript Syncfusion và thêm nó vào trang Razor Bước 1. Khởi tạo npm và các gói cần thiết khácĐể bắt đầu, hãy khởi chạy Visual Studio và tạo ứng dụng Blazor WebAssembly. Tùy chọn npm không có sẵn theo mặc định trong ứng dụng mới này. Vì vậy, hãy tạo một thư mục mới có tên npm_packages để khởi tạo npm và các tùy chọn khác để giữ các gói đã tải xuống và định nghĩa điều khiển
Bước 2. Khởi tạo và xác định điều khiển Bảng tính JavaScript SyncfusionKhi npm được định cấu hình, bạn có thể xem gói. json bên trong thư mục gói npm. Bây giờ, tạo một thư mục có tên src trong đó tạo chỉ mục. tập tin js. Sau đó, nhập mô-đun Bảng tính JavaScript Syncfusion và xác định tiện ích con trong chỉ mục. tập tin js Tham khảo đoạn mã sau [Mục lục. dao cạo] function exampleFunction()
{
alert("Hello Blazor School")
}6Sau đó, xác định điều khiển trong chỉ mục. js với (các) mô-đun cần thiết và thêm nó vào bộ chứa div bằng ID của nó [mục lục. js] function exampleFunction()
{
alert("Hello Blazor School")
}7Bước 3. Thêm tập lệnh xây dựng vào ứng dụngBây giờ, hãy đưa tập lệnh xây dựng sau vào gói. tệp json. Nó sử dụng webpack để đóng gói tệp JavaScript. Tập lệnh này yêu cầu gói web sử dụng chỉ mục. js trong thư mục src làm tệp nguồn Sau đó, thư mục đầu ra của tệp đi kèm được thiết lập để tạo trong thư mục js trong thư mục thư mục wwwroot dưới dạng chỉ mục. bó. js Tham khảo đoạn mã sau [bưu kiện. json] function exampleFunction()
{
alert("Hello Blazor School")
}8Để gộp (các) mô-đun và định nghĩa điều khiển theo định kỳ, chúng tôi phải thêm một bước dựng sẵn vào *. tập tin csproj. Gói xảy ra khi bạn xây dựng hoặc xây dựng lại ứng dụng [*. csproj] function exampleFunction()
{
alert("Hello Blazor School")
}9Bước 4. Thêm JS và CSS cần thiết cho điều khiểnCuối cùng, khi ứng dụng được xây dựng, chỉ mục. bó. tệp js sẽ được tạo. Chúng ta phải thêm nó vào ứng dụng thông qua chỉ mục. html trong thư mục wwwroot. Sao chép và dán biểu định kiểu CSS thích hợp từ node_modules\@syncfusion\~ vào đường dẫn thư mục wwwroot\css, sau đó thêm nó vào ứng dụng qua chỉ mục. tệp html Ghi chú. Vì nó là một điều khiển JavaScript, chúng tôi phải khởi tạo vùng chứa div trong Chỉ mục. tệp dao cạo trước tập lệnh chứa (các) mô-đun và định nghĩa. Để đạt được điều này, hãy thực hiện các thay đổi sau đối với chỉ mục. mã html, sẽ tải tập lệnh sau khi Blazor bắt đầu [mục lục. html] export function exampleFunction1()
{
alert("Hello Blazor School")
}
export function exampleFunction2()
{
alert("Hello Blazor School")
}0Bây giờ, hãy chạy ứng dụng. Sau đó, bạn có thể thấy điều khiển Bảng tính JavaScript trong ứng dụng Blazor WebAssembly của mình Tham khảo ảnh chụp màn hình sau Người giới thiệuĐể biết thêm thông tin, hãy tham khảo các liên kết tham khảo sau
Phần kết luậnCảm ơn vì đã đọc. Trong bài đăng trên blog này, chúng ta đã thấy cách nhúng điều khiển JavaScript vào ứng dụng Blazor bằng các gói npm. Vì các gói npm cho phép chúng tôi xây dựng điều khiển cần thiết chỉ với các mô-đun và CSS cần thiết, chúng tôi có thể giảm đáng kể việc sử dụng bộ nhớ. Hãy thử các bước được đưa ra trong bài đăng trên blog này và để lại phản hồi của bạn trong phần bình luận bên dưới Bộ Syncfusion Blazor cung cấp hơn 70 thành phần hoạt động trơn tru với cả dự án phía máy chủ và phía máy khách (Blazor WebAssembly) của Blazor. Sử dụng chúng để xây dựng các ứng dụng đáng kinh ngạc Đối với những khách hàng hiện tại, phiên bản mới nhất của Essential Studio có sẵn để tải xuống từ trang Giấy phép và Tải xuống. Nếu bạn chưa phải là khách hàng của Syncfusion, bạn có thể dùng thử 30 ngày miễn phí của chúng tôi để khám phá các tính năng có sẵn Nếu có thắc mắc, bạn có thể liên hệ với chúng tôi qua diễn đàn hỗ trợ, Direct-Trac hoặc cổng thông tin phản hồi. Chúng tôi luôn sẵn lòng hỗ trợ bạn blog liên quan
Thẻ
Chia sẻ bài đăng nàyHari Venkatesh E Hari Venkatesh làm việc với tư cách là Giám đốc sản phẩm tại Syncfusion, một công ty dựa trên thành phần giao diện người dùng. Người làm việc đa dạng. NET, cụ thể là trong Công nghệ Web và Windows Forms, để cung cấp các giải pháp và hướng dẫn kỹ thuật Làm cách nào để đưa JavaScript vào Blazor?Đặt thẻ JavaScript (JS) ( ) với đường dẫn nguồn tập lệnh ( src ) bên trong thẻ đóng sau tham chiếu tập lệnh Blazor . {webassembly. server} trình giữ chỗ trong phần đánh dấu trước hoặc là webassembly cho ứng dụng Blazor WebAssembly ( blazor. lắp ráp web.
Tôi có thể sử dụng JavaScript trong các trang dao cạo không?Bạn có thể gọi các phương thức JavaScript từ các trang Blazor với sự trợ giúp của JavaScript Interop bằng cách đưa phần phụ thuộc IJSRuntime vào trang dao cạo . Sau đó tham khảo tập lệnh trong trang HTML của ứng dụng blazor. Kiểm tra liên kết này để biết thêm thông tin.
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 có bằng cách sử dụng IJSRuntime, thông qua API tương tác của JavaScript . Tham khảo tài liệu Blazor JavaScript interop để biết thêm thông tin.
Làm cách nào để gọi hàm JavaScript trong chế độ xem dao cạo?Gọi hàm JavaScript từ Razor View
. Bây giờ, để gọi hàm, hãy thêm sự kiện onclick vào siêu liên kết tên nhân viên và gọi hàm . |
