Tôi có thể sử dụng blazor với javascript không?

Blazor là một khung mới thú vị của Microsoft cho phép chúng tôi tạo các trang web đầy đủ tính năng bằng C # thay vì JavaScript. Giống như nhiều khung web, nó cung cấp khả năng liên kết dữ liệu và xử lý sự kiện, liên kết các phần tử DOM được xác định trong HTML của chúng tôi với các nguồn dữ liệu và phương thức gọi lại trong. mã mạng. Binding sử dụng cách tiếp cận khai báo trái ngược với cách tiếp cận theo chương trình thường được sử dụng khi sử dụng trực tiếp JavaScript. Tuy nhiên, có những trường hợp ràng buộc là không đủ và cần phải gọi trực tiếp một hàm JavaScript từ một. NET, hoặc ngược lại, có một. NET được gọi từ JavaScript. Để làm được điều này, Blazor cung cấp một cơ chế khả năng tương tác hoạt động cho cả Blazor Server và Blazor WebAssembly. Đó là trọng tâm của chúng tôi ở đây và chúng tôi cũng sẽ xem xét cách đưa các lệnh gọi tương tác JavaScript này vào mã của chúng tôi theo cách gọn gàng và gói gọn

Các đoạn mã được cung cấp trong tài liệu này nhưng có một dự án đi kèm trên GitHub. github. com/mveroukis/BlazorHtmlElements. Hãy nhớ rằng một số đoạn mã khác với những gì bạn sẽ tìm thấy trong dự án GitHub. Điều này được thực hiện có chủ ý vì lợi ích của việc giữ cho các mẫu đơn giản

Gọi JavaScript

Blazor cung cấp dịch vụ có thể tiêm triển khai giao diện IJSRuntime . Blazor triển khai giao diện này để chúng tôi có thể gọi bất kỳ hàm JavaScript nào từ. mã mạng. Để làm điều này, dịch vụ cung cấp hai phương pháp chính. InvokeAsync() và InvokeVoidAsync() . Có rất nhiều tình trạng quá tải đối với những điều này nhưng về cơ bản, đó là để gọi mã JavaScript từ. mã mạng. Hãy để chúng tôi xem nó trong hành động.

Đơn giảnInteropCall. dao cạo

@inject IJSRuntime JsRuntime
1     
2    
Simple Interop Call
3     
4    Alert Me
5     
6    @code {
7        async Task OnButtonClicked()
8        {
9            await JsRuntime.InvokeVoidAsync("console.log", "C# says hello");
10           await JsRuntime.InvokeVoidAsync("alert", "C# says hello");
11       }
12   }

Ở đây chúng tôi có một thành phần hiển thị cho người dùng bằng một nút duy nhất. Khi nhấn nút, nó sẽ hiển thị một thông báo trong cảnh báo của trình duyệt và trong bảng điều khiển dành cho nhà phát triển. Điều đó có vẻ dễ dàng nhưng chúng ta hãy xem xét kỹ hơn một chút về các phương thức gọi

Chúng tôi đang gọi phương thức InvokeVoidAsync() dành cho các lệnh gọi khi không có kết quả nào được trả về từ hàm JavaScript. Tham số đầu tiên là mã định danh hàm, chỉ định hàm JavaScript nào bạn định gọi. Mã định danh hàm có liên quan đến phạm vi toàn cầu, nghĩa là đối tượng cửa sổ trong JavaScript. Có thể truy cập các hàm nằm trong các đối tượng con của cửa sổ bằng cách chỉ định tên đối tượng trước tên hàm, như minh họa ở trên khi chúng ta gọi console. log() trong mẫu mã ở trên. Điều xảy ra đằng sau hậu trường ở đây là Blazor gọi window. bảng điều khiển. log() .

Sau mã định danh hàm, chúng ta có thể thêm bao nhiêu tham số tùy ý để khớp với các tham số dự kiến ​​trong chính hàm JavaScript. Trong trường hợp của bảng điều khiển. log() và alert() chỉ cần một tham số, nhưng đối với các hàm JavaScript cần nhiều tham số hơn, chúng ta chỉ cần . Một điều cần lưu ý là các tham số phải được tuần tự hóa JSON.

Vậy, nếu chúng ta cần lấy lại kết quả từ hàm JavaScript thì sao? . Đây là một ví dụ. InvokeAsync() method which takes the same form of parameters but returns a result. Here is an example:

Nhận kết quả. dao cạo

1    @inject IJSRuntime JsRuntime
2     
3    
Getting Results
4     
5    Prompt Me
6     
7    @code {
8        public async Task OnButtonClicked()
9        {
10           var favoriteMovie = await JsRuntime.InvokeAsync("prompt", "What is your favorite movie?");
11    
12           await JsRuntime.InvokeVoidAsync("alert", favoriteMovie);
13       }
14   }

Thành phần này hiển thị cho người dùng một nút, khi được nhấp vào, nút này sẽ nhắc họ nhập bộ phim yêu thích của họ. Sau khi nhập, nó sẽ hiển thị lại tên phim đã nhập cho họ. Như bạn có thể thấy, chúng ta cần chỉ định loại khi gọi InvokeAsync() để khớp với loại kết quả của hàm JavaScript. Kiểu trả về này cũng phải được tuần tự hóa JSON. Điều đó quan trọng bởi vì một số loại hoàn toàn không thể tuần tự hóa được. Ví dụ: nếu hàm JavaScript trả về một Lời hứa, thì bạn không gặp may. Tuy nhiên, nếu bạn đang muốn thực hiện lệnh gọi JavaScript không đồng bộ từ. NET, thì bạn có thể muốn xem cái này. Sử dụng C# chờ đối với JS Promises trong Blazor. Chắc chắn một cái gì đó để kiểm tra.

Bây giờ chúng ta biết cách gọi các hàm JavaScript từ. NET và cách lấy lại kết quả. Điều gì sẽ xảy ra nếu chúng ta muốn làm điều gì đó nâng cao hơn một chút, chẳng hạn như gọi một phương thức trên một đối tượng phần tử HTML? . Blazor có thể thêm một tham chiếu đến một đối tượng phần tử HTML vào. NET, thật tuyệt. Tuy nhiên, điều này chỉ giải quyết được một nửa vấn đề vì chúng ta không thể gọi trực tiếp các phương thức của nó từ. NET. Giải pháp là tạo một hàm JavaScript tùy chỉnh sẽ chấp nhận tham chiếu đối tượng phần tử HTML làm tham số và thực hiện lệnh gọi phương thức theo yêu cầu. Dưới đây là một ví dụ minh họa cách chúng ta có thể tập trung vào một phần tử HTML nhất định

tập trung. dao cạo

1    @inject IJSRuntime JsRuntime 
2     
3    
Getting Focused
4     
5    Focus Me
6     
7    
8     
9    @code {
10       private ElementReference _inputRef;
11    
12       public async Task OnButtonClicked()
13       {
14           await JsRuntime.InvokeVoidAsync("setFocus", _inputRef);
15       }
16   }

_Chủ nhà. cshtml

1        

Ở đây chúng tôi có một thành phần trình bày cho người dùng một nút và nhập văn bản. Khi nhấn nút, kiểu nhập văn bản sẽ nhận được tiêu điểm. Như bạn có thể thấy, chúng tôi có ba dạng mã khác nhau ở đây. HTML, C# và JavaScript

Chúng ta hãy bắt đầu bằng cách xem mã C# trước. Trong dòng đầu tiên, chúng ta có khai báo trường lớp loại ElementReference . Blazor sẽ đưa một tham chiếu đến đối tượng phần tử HTML vào trường này cho chúng ta, nhưng làm thế nào nó biết được tham chiếu phần tử HTML nào mà chúng ta đang mong đợi? . Phần tử input có một thuộc tính đặc biệt ở đây có tên là @ref, and its value matches the name of our ElementReference field in .NET: _inputRef . Tên đơn giản này khớp giữa giá trị @ref và trường lớp hoặc tên thuộc tính cho phép Blazor thêm tham chiếu. Và nếu bạn đang thắc mắc điều gì sẽ xảy ra nếu giá trị @ref không khớp với bất kỳ trường hoặc thuộc tính nào, thì câu trả lời rất đơn giản. nó không thể biên dịch.

Mã ở trên không rõ ràng, nhưng vì thuộc tính @ref là một phần của HTML nên nó sẽ không có cơ hội . NET cho đến khi HTML được hiển thị. Điều này có nghĩa là trường ElementReference field in the .NET code until the HTML is rendered. This means that the _inputRef ban đầu là null và sẽ không được đặt . Đây là một 'gotcha' phổ biến cần lưu ý. OnAfterRender() lifecycle callback is fired. This is a common ‘gotcha’ to be aware of.

Với tham chiếu đến phần tử HTML thu được, giờ đây chúng ta có thể chuyển nó đến hàm JavaScript tùy chỉnh của mình. Hàm JavaScript setFocus() lấy tham chiếu đối tượng phần tử HTML làm tham số, sau đó gọi focus()< . Tất nhiên, đây là một tham chiếu phần tử HTML thông thường nên chúng ta có thể làm bất cứ điều gì chúng ta muốn với nó, làm cho phương pháp này trở nên rất linh hoạt. Chúng tôi thậm chí có thể đặt trình xử lý sự kiện và xử lý chúng trong. NET mà chúng tôi sẽ trình bày chi tiết sau. on that object. Of course, this is a regular HTML element reference so we can do whatever we want with it making this approach very flexible. We can even set event listeners and handle them in .NET code, which we will cover in detail later.

Bây giờ bạn có thể thắc mắc nơi lưu trữ các hàm JavaScript. Blazor không cho phép chúng tôi đặt những thứ này trong thành phần của chúng tôi. tập tin dao cạo. Đối với ứng dụng Blazor WebAssembly, bạn nên thêm các hàm JavaScript vào wwwroot/index. html . Đối với ứng dụng Blazor Server, hãy thêm chúng vào Pages/_Host. thay vào đó là cshtml . Hơn nữa, bạn có thể cân nhắc việc đặt tất cả các hàm JavaScript trong một tệp JavaScript riêng và chỉ cần liên kết tới tệp đó từ wwwroot/index. html hoặc Trang/_Máy chủ. tệp cshtml . Nếu bạn chọn đặt tất cả các chức năng JavaScript của mình trong wwwroot/interop. js bạn sẽ thêm nội dung như thế này vào tệp thích hợp.

1        

Nếu ứng dụng của bạn bao gồm một số dự án, bạn có thể tham chiếu tệp JavaScript trong dự án thư viện lớp bằng định dạng sau. _content/{PROJECT_NAME}/{FILEPATH} . Ví dụ: nếu dự án thư viện lớp có tên là HtmlElements và mã JavaScript của dự án nằm trong wwwroot/interop. js , chúng tôi sẽ thêm thẻ tập lệnh sau vào dự án ứng dụng chính của mình.

1    

gọi. NET

Bây giờ chúng ta hãy xem cách chúng ta có thể thực hiện cuộc gọi vào. NET từ mã JavaScript. Blazor cho phép chúng ta gọi cả static và instance. phương pháp NET. Trong cả hai trường hợp, các phương thức phải được truy cập công khai và được tô điểm bằng thuộc tính [JSInvokable] .

Khi gọi một phương thức tĩnh. NET, chúng ta có thể sử dụng DotNet. InvokeMethod() hoặc DotNet. InvokeMethodAsync() Hàm JavaScript. Trong cả hai trường hợp, chúng tôi chuyển tên hợp ngữ và tên phương thức, theo thứ tự đó, theo sau là bất kỳ tham số nào cho phương thức đích. Chúng ta hãy xem một ví dụ nhanh.

Javascript

1    window.debug = {
2        log: async (msg) => {
3            await DotNet.invokeMethodAsync("BlazorApp", "DebugLog", msg);
4        }
5    };

Thành phần C# Blazor

1    @using System.Diagnostics
2     
3    @code {
4        [JSInvokable]
5        public static Task DebugLog(string msg)
6        {
7            Debug.WriteLine(msg);
8     
9            return Task.CompletedTask;
10       }
11   }

Trong khối mã JavaScript, chúng tôi khai báo hàm async log() . Hàm log() thực hiện lệnh gọi không đồng bộ tới phương thức tĩnh không đồng bộ C#, DebugLog() located in the BlazorApp assembly. Note that we do not need to specify the class that the static method resides in, so it is important that your public static methods which are called from JavaScript have a unique name. With all that setup, any call to gỡ lỗi. log() từ mã JavaScript sẽ khiến Visual Studio viết ra thông báo được truyền vào cửa sổ Đầu ra gỡ lỗi của Visual Studio. Điều đó khá tiện dụng, nhưng nếu chúng ta muốn gọi thứ gì đó duy trì trạng thái thì sao?

Để gọi một. NET từ JavaScript, chúng ta cần chuẩn bị thêm một chút. Để JavaScript gọi một. NET, nó yêu cầu một tham chiếu đến. thể hiện đối tượng NET. Tất nhiên, JavaScript không thể tham chiếu. NET trực tiếp, vì vậy Blazor cung cấp cho chúng tôi một trợ giúp tại đây; . Nó cung cấp cho chúng ta một phương thức tĩnh duy nhất có tên là DotNetObjectReference class. It offers us a single static method called Create() . Tất cả những gì bạn cần làm là chuyển một tham chiếu đến thể hiện đối tượng mà bạn muốn tham chiếu từ JavaScript vào DotNetObjectReference. Tạo() . Điều này sẽ trả về một dạng chung của DotNetObjectReference<> , dựa trên loại đối tượng được cung cấp cho Create( . Sau khi có được thông tin đó, bạn chuyển thông tin đó sang JavaScript bằng cách gọi một hàm JavaScript tùy chỉnh lấy . Once that is obtained, you pass that to JavaScript by invoking a custom JavaScript function that takes the DotNetObjectReference và lưu trữ để sử dụng sau này.

Về phía JavaScript, phần được chuyển vào DotNetObjectReference hiển thị phương thức có tên invokeMethodAsync(). This is used to invoke methods associated with that particular .NET object instance. Note that this is different from the static DotNet tĩnh. InvokeMethodAsync() vì trong đó không cần tên hợp ngữ làm tham số đầu tiên. Thay vào đó, tham số đầu tiên mà nó chấp nhận là tên của phương thức bạn muốn gọi, theo sau là bất kỳ tham số nào. Chúng ta hãy xem một ví dụ trong đó mã JavaScript liên tục gọi một. NET để tạo GUID.

tương tác. js

JsGuidGenerator. dao cạo

1    @page "/jsguidgenerator"
2     
3    @using System.Diagnostics
4     
5    @implements IDisposable
6     
7    @inject IJSRuntime JsRuntime
8     
9    
JavaScript GuidGenerator
10    
11   

12       Look in Visual Studio's Output window to see Debug
13       messages genereted from your front-end code.
14   
15    
16    
17   @code {
18       private readonly DotNetObjectReference _objeRef;
19    
20       public JsGuidGenerator()
21       {
22           _objeRef = DotNetObjectReference.Create(this);
23       }
24    
25       [JSInvokable]
26       public Task GenerateGuid()
27       {
28           return Task.FromResult(Guid.NewGuid().ToString());
29       }
30    
31       [JSInvokable]
32       public static Task DebugLog(string msg)
33       {
34           Debug.WriteLine(msg);
35    
36           return Task.CompletedTask;
37       }
38    
39       protected override async Task OnInitializedAsync()
40       {
41           await base.OnInitializedAsync();
42           await JsRuntime.InvokeVoidAsync("JsGuidGenerator.start", _objeRef);
43       }
44    
45       async void IDisposable.Dispose()
46       {
47           await JsRuntime.InvokeVoidAsync("JsGuidGenerator.stop");
48    
49           _objeRef.Dispose();
50       }
51   }

Bản thân thành phần này không làm gì thú vị, nhưng khi chạy ở chế độ gỡ lỗi trong Visual Studio, GUID sẽ xuất hiện trong cửa sổ Đầu ra gỡ lỗi theo định kỳ miễn là thành phần đó hiển thị. Không, không đặc biệt hữu ích nhưng nó cho thấy cách một hàm JavaScript có thể gọi lại vào. NET bất cứ lúc nào

Điều làm cho công việc này hoạt động là DotNetObjectReference được tạo trong. Net và chuyển vào mã JavaScript, cho phép gọi lại. phương pháp NET. Một khoảng thời gian được thiết lập để gọi lại vào. NET định kỳ để tạo GUID thông qua thành phần được tham chiếu bởi objRef . Hàm invokeMethodAsync() trả về một lời hứa và vì chúng ta đang ở trong một lambda không đồng bộ nên chúng ta có thể await for the result. The resultant GUID is sent back into the .NET realm via a call to the static method discussed earlier; DebugLog().

Khi thành phần được khởi tạo, nó sẽ gọi hàm JavaScript JsGuidGenerator. bắt đầu() . JsGuidGenerator. hàm start() nhận một. NET làm tham số duy nhất của nó và trong trường hợp này, chúng tôi đang chuyển thể hiện của thành phần Blazor. Lưu ý rằng nó không cần phải là thể hiện thành phần, nó có thể là bất kỳ thể hiện đối tượng nào, nhưng nguy hiểm ẩn nấp ở đây. Bất kỳ tham chiếu đối tượng nào được gửi từ. NET vào lĩnh vực JavaScript, cần phải cẩn thận để đảm bảo rằng tuổi thọ của mã đó. NET khớp với tham chiếu đối tượng trong JavaScript. Nói cách khác, chúng ta cần dọn dẹp. NET tham chiếu đối tượng trong JavaScript (và. NET) vì không có cơ chế tự động để làm như vậy. Trong trường hợp này, chúng tôi thực hiện khi thành phần Blazor được xử lý bằng cách gọi JsGuidGenerator. stop() Hàm JavaScript. JsGuidGenerator. stop() dừng khoảng thời gian thực thi, thao tác này sẽ giải phóng lambda và cùng với nó là tham chiếu đến objRef .

Quay lại. NET, DotNetObjectReference mà chúng ta tạo ra là thứ chúng ta cần giữ lại vì nó phải được xử lý khi không còn cần thiết. JSRuntime theo dõi tất cả các phiên bản DotNetObjectReference và nếu không . Trên thực tế, nó có thể làm rò rỉ toàn bộ thành phần và nếu ứng dụng web của bạn thuộc loại Blazor Server, điều đó có thể gây ra sự cố nghiêm trọng về tải máy chủ. Vì Blazor gọi phương thức Dispose() của một thành phần khi thành phần đó không còn hiển thị, nên đó cũng thường là một nơi tốt để loại bỏ các tham chiếu đối tượng của bạn. Điều thú vị là các thành phần Blazor không triển khai IDispose nên chúng tôi cần tự triển khai nó để có được chức năng này.

Gói phần tử HTML

Blazor cung cấp hai phương thức chính để bạn. NET để tự tương tác với các phần tử HTML. liên kết dữ liệu và xử lý sự kiện. Và trong hầu hết các trường hợp, đây là cách tốt nhất để làm điều đó. Tuy nhiên, sẽ có lúc một lệnh gọi hàm JavaScript được yêu cầu để tương tác với một phần tử HTML cụ thể. Một ví dụ như vậy là phần tử HTML

1    @inject IJSRuntime JsRuntime
2     
3    
Getting Results
4     
5    Prompt Me
6     
7    @code {
8        public async Task OnButtonClicked()
9        {
10           var favoriteMovie = await JsRuntime.InvokeAsync("prompt", "What is your favorite movie?");
11    
12           await JsRuntime.InvokeVoidAsync("alert", favoriteMovie);
13       }
14   }

1    @inject IJSRuntime JsRuntime
2     
3    
Getting Results
4     
5    Prompt Me
6     
7    @code {
8        public async Task OnButtonClicked()
9        {
10           var favoriteMovie = await JsRuntime.InvokeAsync("prompt", "What is your favorite movie?");
11    
12           await JsRuntime.InvokeVoidAsync("alert", favoriteMovie);
13       }
14   }

1    @inject IJSRuntime JsRuntime
2     
3    
Getting Results
4     
5    Prompt Me
6     
7    @code {
8        public async Task OnButtonClicked()
9        {
10           var favoriteMovie = await JsRuntime.InvokeAsync("prompt", "What is your favorite movie?");
11    
12           await JsRuntime.InvokeVoidAsync("alert", favoriteMovie);
13       }
14   }