Mã JavaScript có thể chạy một method .NET được xác định trong mã Blazor của bạn bằng cách sử dụng DotNet utility class. Class này là một phần của JS interop library. Class DotNet exposes các hàm trợ giúp invokeMethod và invokeMethodAsync. Sử dụng invokeMethod để chạy một phương thức và đợi kết quả và sử dụng invokeMethodAsync để gọi phương thức không đồng bộ. Phương thức invokeMethodAsync trả về một JavaScript Promise.
Để duy trì khả năng đáp ứng trong các ứng dụng của bạn, hãy định nghĩa phương thức .NET là không đồng bộ và gọi nó bằng cách sử dụng invokeMethodAsync từ JavaScript.
Phương thức .NET đang được gọi phải được JSInvokable attribute. Phương thức phải public và mọi tham số phải có thể tuần tự hóa dưới dạng JSON. Ngoài ra, đối với một phương thức không đồng bộ, kiểu trả về phải là void, một Task hoặc một đối tượng Task<T> object trong đó T là kiểu có thể tuần tự hóa JSON.
Trong .NET, một phương thức thuộc về một lớp (static method) hoặc một đối tượng (một instance method). Để gọi một phương thức tĩnh, bạn cung cấp tên của .NET assembly chứa lớp, mã định danh (identifier) cho phương thức và bất kỳ tham số nào mà phương thức chấp nhận làm đối số cho các hàm invokeMethod hoặc invokeMethodAsync. Theo mặc định, mã định danh phương thức giống như tên của phương thức, nhưng bạn có thể chỉ định một giá trị khác bằng thuộc tính JsInvokable.
Ví dụ: Gọi phương thức .NET tĩnh từ trình xử lý sự kiện JavaScript
Đoạn mã sau đây hiển thị một ví dụ dựa trên dữ liệu dự báo thời tiết trong trang FetchData.razor từ mẫu Ứng dụng máy chủ Blazor. Phương pháp CalculAverageAsync tính toán trung bình cho nhiệt độ Fahrenheit và Centigrade trong mảng dự báo.
Trong ví dụ này, mảng dự báo đã được thay đổi thành static để làm cho nó có thể truy cập trực tiếp từ một phương thức tĩnh (static). Tuy nhiên, thay đổi này gây ra một bug chỉ xuất hiện khi Ứng dụng máy chủ Blazor được triển khai tới môi trường máy chủ và được chạy đồng thời bởi nhiều người dùng. Bạn sẽ sớm thấy cách sửa lỗi này.
@code {
private static WeatherForecast[] forecasts; // NOTE CHANGE TO STATIC - CAUSES A BUG
...
[JSInvokable]
public static async Task<decimal[]> CalculateAveragesAsync()
{
var forecastTemperatures = from f in forecasts
select (f.TemperatureF, f.TemperatureC);
var avgF = await Task.FromResult(forecastTemperatures.Average(t => t.TemperatureF));
var avgC = await Task.FromResult(forecastTemperatures.Average(t => t.TemperatureC));
return new[] { (decimal)avgF, (decimal)avgC };
}
}
Để minh họa phương pháp này hoạt động, hãy thêm chân trang sau vào <table> trên trang FetchData.razor:
... <table class="table"> <thead> ... </thead> <tbody> ... </tbody> <tfoot> <tr> <td><button onclick="calculateAverages()">Averages</button></td> <td></td> <td id="avgC"></td> <td></td> <td id="avgF"></td> <td></td> <td></td> </tr> </tfoot> </table> ...
<script>
...
window.calculateAverages = async () => {
var averages = await DotNet.invokeMethodAsync('WebApplicationAssemblyName', 'CalculateAveragesAsync');
$('#avgF').html(averages[0]);
$('#avgC').html(averages[1]);
};
</script>
Gọi một .NET instance method từ JavaScript
<script>
...
var objectRef;
window.populateObjectRef = (ref) => {
objectRef = ref;
};
...
</script>
<script>
...
window.calculateAverages = async () => {
var averages = await objectRef.invokeMethodAsync('CalculateAveragesAsync');
$('#avgF').html(averages[0]);
$('#avgC').html(averages[1]);
};
</script>
...
@implements IDisposable
<h1>Weather forecast</h1>
...
@code {
...
private DotNetObjectReference<FetchData> objRef;
...
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
objRef = DotNetObjectReference.Create(this);
await JS.InvokeVoidAsync("populateObjectRef", objRef);
}
}
...
public void Dispose()
{
objRef?.Dispose();
}
}
Bài liên quan: