Hướng dẫn how add javascript to blazor? - cách thêm javascript vào blazor?

Bỏ qua nội dung chính

Trình duyệt này không còn được hỗ trợ.

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');
}

Để 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');
}

export function showPrompt(message) {
  return prompt(message, 'Type anything here');
}

export function showPrompt(message) {
  return prompt(message, 'Type anything here');
}

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');
    }
    

    8 trong ví dụ của phần này).
  • Trong

    module = await JS.InvokeAsync(
        "import", "./Pages/Index.razor.js");
    

    2, không có tùy chọn nào được thông qua.

• module = await JS.InvokeAsync(
      "import", "./Pages/Index.razor.js");
  

  3: Được gọi sau khi Blazor sẵn sàng nhận cuộc gọi từ JS. Ví dụ:

  module = await JS.InvokeAsync(
      "import", "./Pages/Index.razor.js");
  

  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

  module = await JS.InvokeAsync(
      "import", "./Pages/Index.razor.js");
  

  3 như một đối số (

  module = await JS.InvokeAsync(
      "import", "./Pages/Index.razor.js");
  

  6 trong ví dụ của phần này).

Ví dụ sau đây cho thấy các bộ khởi tạo JS cho

export function showPrompt(message) {
  return prompt(message, 'Type anything here');
}

module = await JS.InvokeAsync(
    "import", "./Pages/Index.razor.js");

• Sử dụng tên lắp ráp của ứng dụng trong tên tệp nếu bộ khởi tạo JS được tiêu thụ làm tài sản tĩnh trong dự án. Ví dụ: đặt tên cho tệp

  module = await JS.InvokeAsync(
      "import", "./Pages/Index.razor.js");
  

  9 cho một dự án có tên lắp ráp là

  var module = await JS.InvokeAsync("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("import", 
      "./_content/AppJS/Pages/Index.razor.js");
  

  2 cho RCL với định danh gói là

  var module = await JS.InvokeAsync("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("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("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("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("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("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ẻ

    ...

    
    

    ...

    
    

    ...

    
    

Ghi chú

Các ví dụ tài liệu thường đặt các tập lệnh trong thẻ

    ...

    
    

Tải một tập lệnh trong đánh dấu var module = await JS.InvokeAsync("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) (

    ...

    
    

var module = await JS.InvokeAsync("import", 
    "./_content/AppJS/Pages/Index.razor.js");

    ...

    
    

    ...

    
    

    ...

    

Tải JS từ

var module = await JS.InvokeAsync("import", 
    "./_content/AppJS/Pages/Index.razor.js");

• 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("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("import", "./_content/AppJS/Pages/Index.razor.js"); 7

Đặt các thẻ JavaScript (JS) (

    ...

    
    

    ...

    
    

    ...

    
    

    ...

    
    

Trình giữ chỗ

Tải tập lệnh từ tệp JavaScript bên ngoài (var module = await JS.InvokeAsync("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:

  
      ...
  
      
      
  
  

  1. Ví dụ:

  • 
        ...
    
        
        
    
    

    2 cho trang

    
        ...
    
        
        
    
    

    3 của một ứng dụng trang trí dao cạo tại

    
        ...
    
        
        
    
    

    4.

  • 
        ...
    
        
        
    
    

    5 cho chế độ xem

    
        ...
    
        
        
    
    

    3 của một ứng dụng MVC tại

    
        ...
    
        
        
    
    

    7.
• Thành phần dao cạo của ứng dụng Blazor:

  
      ...
  
      
      
  
  

  8. Ví dụ:

  
      ...
  
      
      
  
  

  9 cho thành phần

  
      ...
  
      
      
  
  

  3 tại

  
      ...
  
      
  
  

  01.

Các tệp JS được Collocated có thể giải quyết công khai bằng cách sử dụng đường dẫn đến tệp trong dự án:path to the file in the project:

• Các trang, chế độ xem và các thành phần từ tệp tập lệnh được hợp tác trong ứng dụng:

  
      ...
  
      
  
  

  02
  • Người giữ chỗ

    
        ...
    
        
    
    

    03 là đường dẫn đến trang, chế độ xem hoặc thành phần.
  • Người giữ chỗ

    
        ...
    
        
    
    

    04 là trang, chế độ xem hoặc thành phần.
  • Người giữ chỗ

    
        ...
    
        
    
    

    05 phù hợp với phần mở rộng của trang, chế độ xem hoặc thành phần,

    
        ...
    
        
    
    

    06 hoặc

    
        ...
    
        
    
    

    07.

  Trang dao cạo Ví dụ:

  Một tệp JS cho trang

  
      ...
  
      
      
  
  

  3 được đặt trong thư mục ____10109 (

  
      ...
  
      
      
  
  

  2) bên cạnh trang

  
      ...
  
      
      
  
  

  3 (

  
      ...
  
      
      
  
  

  4). Trong trang

  
      ...
  
      
      
  
  

  3, tập lệnh được tham chiếu tại đường dẫn trong thư mục

  
      ...
  
      
  
  

  09:

  @section Scripts {
    
  }
  

  Khi ứng dụng được xuất bản, khung công tác sẽ tự động di chuyển tập lệnh sang gốc web. Trong ví dụ trước, tập lệnh được chuyển đến

  
      ...
  
      
  
  

  15, trong đó trình giữ chỗ

  
      ...
  
      
  
  

  16 là biệt danh khung đích (TFM). Không cần thay đổi đối với URL tương đối của tập lệnh trong trang

  
      ...
  
      
      
  
  

  3.

  Ví dụ về Blazor:

  Một tệp JS cho thành phần

  
      ...
  
      
      
  
  

  3 được đặt trong thư mục

  
      ...
  
      
  
  

  09 (

  
      ...
  
      
      
  
  

  9) bên cạnh thành phần

  
      ...
  
      
      
  
  

  3 (

  
      ...
  
      
  
  

  01). Trong thành phần

  
      ...
  
      
      
  
  

  3, tập lệnh được tham chiếu tại đường dẫn trong thư mục

  
      ...
  
      
  
  

  09. Ví dụ sau đây dựa trên một ví dụ được hiển thị trong các hàm javascript cuộc gọi từ các phương thức .NET trong bài viết ASP.NET Core Blazor.

  
      ...
  
      
      
  
  

  9:

  export function showPrompt(message) {
    return prompt(message, 'Type anything here');
  }
  

  Trong phương thức

  
      ...
  
      
  
  

  26 của thành phần

  
      ...
  
      
      
  
  

  3 (

  
      ...
  
      
  
  

  01):

  module = await JS.InvokeAsync(
      "import", "./Pages/Index.razor.js");
  

  Khi ứng dụng được xuất bản, khung công tác sẽ tự động di chuyển tập lệnh sang gốc web. Trong ví dụ trước, tập lệnh được chuyển sang

  
      ...
  
      
  
  

  29, trong đó trình giữ chỗ

  
      ...
  
      
  
  

  16 là biệt danh khung đích (TFM). Không cần thay đổi đối với URL tương đối của tập lệnh trong thành phần

  
      ...
  
      
      
  
  

  3.

• Đối với các tập lệnh được cung cấp bởi Thư viện lớp Dao cạo (RCL):

  
      ...
  
      
  
  

  32
  • Trình giữ chỗ

    
        ...
    
        
    
    

    33 là mã định danh gói của RCL (hoặc tên thư viện cho thư viện lớp được tham chiếu bởi ứng dụng).
  • Người giữ chỗ

    
        ...
    
        
    
    

    03 là đường dẫn đến trang, chế độ xem hoặc thành phần. Nếu một thành phần dao cạo nằm ở gốc của RCL, phân đoạn đường dẫn không được bao gồm.
  • Người giữ chỗ

    
        ...
    
        
    
    

    04 là trang, chế độ xem hoặc thành phần.
  • Người giữ chỗ

    
        ...
    
        
    
    

    05 phù hợp với phần mở rộng của trang, chế độ xem hoặc thành phần,

    
        ...
    
        
    
    

    06 hoặc

    
        ...
    
        
    
    

    07.

  Trang dao cạo Ví dụ:

  • Một tệp JS cho trang

    
        ...
    
        
        
    
    

    3 được đặt trong thư mục ____10109 (

    
        ...
    
        
        
    
    

    2) bên cạnh trang

    
        ...
    
        
        
    
    

    3 (

    
        ...
    
        
        
    
    

    4). Trong trang

    
        ...
    
        
        
    
    

    3, tập lệnh được tham chiếu tại đường dẫn trong thư mục

    
        ...
    
        
    
    

    09:
  • Khi ứng dụng được xuất bản, khung công tác sẽ tự động di chuyển tập lệnh sang gốc web. Trong ví dụ trước, tập lệnh được chuyển đến

    
        ...
    
        
    
    

    15, trong đó trình giữ chỗ

    
        ...
    
        
    
    

    16 là biệt danh khung đích (TFM). Không cần thay đổi đối với URL tương đối của tập lệnh trong trang

    
        ...
    
        
        
    
    

    3.
  • Thành phần

    
        ...
    
        
        
    
    

    3 nằm trong thư mục

    
        ...
    
        
    
    

    09 của RCL.

  var module = await JS.InvokeAsync("import", 
      "./_content/AppJS/Pages/Index.razor.js");
  

Để biết thêm thông tin về RCL, 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).

Tải tập lệnh từ tệp JavaScript bên ngoài (var module = await JS.InvokeAsync("import", "./_content/AppJS/Pages/Index.razor.js"); 8)

Đặt thẻ JavaScript (JS) (

    ...

    
    

    ...

    

Trong

    ...

    
    

    ...

    
    

    ...

    
    

Trình giữ chỗ

    ...

    

export function showPrompt(message) {
  return prompt(message, 'Type anything here');
}

    ...

    

export function showPrompt(message) {
  return prompt(message, 'Type anything here');
}

Trong ví dụ sau đây về thẻ

    ...

    
    

    ...

    

    ...

    

Khi tệp JS bên ngoài được cung cấp bởi thư viện lớp Dao cạo, chỉ định tệp JS bằng cách sử dụng đường dẫn tài sản web tĩnh ổn định của nó:

    ...

    

• Đoạn đường dẫn cho thư mục hiện tại (

  
      ...
  
      
  
  

  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ỗ

  
      ...
  
      
  
  

  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

  
      ...
  
      
  
  

  62 không được chỉ định trong tệp dự án.
• Trình giữ chỗ

  
      ...
  
      
  
  

  63 là đường dẫn và tên tệp theo

  export function showPrompt(message) {
    return prompt(message, 'Type anything here');
  }
  

  4.

    ...

    
    

Trong ví dụ sau đây về thẻ

    ...

    
    

• Thư viện lớp Dao cạo có tên lắp ráp là

  
      ...
  
      
  
  

  66 và

  
      ...
  
      
  
  

  62 không được chỉ định trong tệp dự án của thư viện.
• Tệp

  
      ...
  
      
  
  

  57 nằm trong thư mục

  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

    ...

    
    

    ...

    
    

• Thêm

  
      ...
  
      
  
  

  72 vào thẻ

  
      ...
  
      
      
  
  

  0 tải tập lệnh blazor.
• Nhập một tập lệnh vào đánh dấu phần tử

  var module = await JS.InvokeAsync("import", 
      "./_content/AppJS/Pages/Index.razor.js");
  

  6 tham chiếu tệp JS tùy chỉnh sau khi bắt đầu Blazor bằng cách gọi

  
      ...
  
      
  
  

  75. Đặt tập lệnh (

  
      ...
  
      
      
  
  

  5) bên trong thẻ
  3 đóng sau khi tập lệnh blazor được tải.

Ví dụ sau đây đưa ra tệp

    ...

    

    ...

    

Trình giữ chỗ

Để biết thêm thông tin về khởi động blazor, hãy xem ASP.NET Core Blazor Startup.

Sự cô lập JavaScript trong các mô -đun JavaScript

Blazor cho phép cách ly JavaScript (JS) trong các mô -đun JavaScript tiêu chuẩn (Đặc tả ECMAScript).

Sự cô lập JS cung cấp các lợi ích sau:

• JS nhập khẩu không còn gây ô nhiễm không gian tên toàn cầu.
• Người tiêu dùng của một thư viện và các thành phần không bắt buộc phải nhập các JS liên quan.

Để 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.

Tập tin lưu trữ JavaScript

Các tệp JavaScript (JS) và các tài sản tĩnh khác thường không được lưu trữ trên các máy khách trong quá trình phát triển trong môi trường

    ...

    

    ...

    

    ...

    

    ...

    

    ...

    

Trong quá trình sản xuất trong môi trường

    ...

    

Để 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ệ

  
      ...
  
      
  
  

  84 được gửi bởi một khách hàng.

Để biết thêm thông tin, xem:

• 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).

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');
}

Để 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');
}

export function showPrompt(message) {
  return prompt(message, 'Type anything here');
}

export function showPrompt(message) {
  return prompt(message, 'Type anything here');
}

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');
    }
    

    8 trong ví dụ của phần này).
  • Trong

    module = await JS.InvokeAsync(
        "import", "./Pages/Index.razor.js");
    

    2, không có tùy chọn nào được thông qua.

• module = await JS.InvokeAsync(
      "import", "./Pages/Index.razor.js");
  

  3: Được gọi sau khi Blazor sẵn sàng nhận cuộc gọi từ JS. Ví dụ:

  module = await JS.InvokeAsync(
      "import", "./Pages/Index.razor.js");
  

  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

  module = await JS.InvokeAsync(
      "import", "./Pages/Index.razor.js");
  

  3 như một đối số (

  module = await JS.InvokeAsync(
      "import", "./Pages/Index.razor.js");
  

  6 trong ví dụ của phần này).

Ví dụ sau đây cho thấy các bộ khởi tạo JS cho

export function showPrompt(message) {
  return prompt(message, 'Type anything here');
}

module = await JS.InvokeAsync(
    "import", "./Pages/Index.razor.js");

• Sử dụng tên lắp ráp của ứng dụng trong tên tệp nếu bộ khởi tạo JS được tiêu thụ làm tài sản tĩnh trong dự án. Ví dụ: đặt tên cho tệp

  module = await JS.InvokeAsync(
      "import", "./Pages/Index.razor.js");
  

  9 cho một dự án có tên lắp ráp là

  var module = await JS.InvokeAsync("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("import", 
      "./_content/AppJS/Pages/Index.razor.js");
  

  2 cho RCL với định danh gói là

  var module = await JS.InvokeAsync("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 cốt lõi ASP.NET (

  var module = await JS.InvokeAsync("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("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("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("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("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ẻ

    ...

    
    

    ...

    
    

    ...

    
    

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 cốt lõi ASP.NET (

var module = await JS.InvokeAsync("import", 
    "./_content/AppJS/Pages/Index.razor.js");

    ...

    

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("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("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("import", 
    "./_content/AppJS/Pages/Index.razor.js");

    ...

    
    

Tải tập lệnh từ tệp JavaScript bên ngoài (

var module = await JS.InvokeAsync("import", 
    "./_content/AppJS/Pages/Index.razor.js");

Tải tập lệnh từ tệp JavaScript bên ngoài (var module = await JS.InvokeAsync("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("import", 
    "./_content/AppJS/Pages/Index.razor.js");

Tiêm một tập lệnh sau khi blazor bắt đầu

• Cảnh báo
  • Không đặt thẻ

    
        ...
    
        
        
    
    

    0 trong tệp thành phần dao cạo (

    
        ...
    
        
        
    
    

    1) vì thẻ

    
        ...
    
        
        
    
    

    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ẻ

    
        ...
    
        
        
    
    

    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("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) (

  
      ...
  
      
      
  
  

  5) trong đánh dấu phần tử

  var module = await JS.InvokeAsync("import", 
      "./_content/AppJS/Pages/Index.razor.js");
  

  6 của

  
      ...
  
      
      
  
  

  7 (Blazor Webassemply) hoặc

  
      ...
  
      
      
  
  

  30 (Máy chủ Blazor):

  
      ...
  
      
  
  

  02
  • Tải JS từ

    var module = await JS.InvokeAsync("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("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) (

  
      ...
  
      
      
  
  

  5) bên trong đánh dấu phần tử
  3 của

  
      ...
  
      
      
  
  

  7 (Blazor Webassemply) hoặc

  
      ...
  
      
      
  
  

  30 (Máy chủ Blazor):

  Trình giữ chỗ

  6 trong đánh dấu trước đó là
  7 cho ứng dụng WebAssugging của Blazor (
  8) hoặc máy chủ cho ứng dụng máy chủ Blazor (
  9).

  @section Scripts {
    
  }
  

  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:

  
      ...
  
      
      
  
  

  1. Ví dụ:

  
      ...
  
      
      
  
  

  9:

  export function showPrompt(message) {
    return prompt(message, 'Type anything here');
  }
  

  Trong phương thức

  
      ...
  
      
  
  

  26 của thành phần

  
      ...
  
      
      
  
  

  3 (

  
      ...
  
      
  
  

  01):

  module = await JS.InvokeAsync(
      "import", "./Pages/Index.razor.js");
  

  Khi ứng dụng được xuất bản, khung công tác sẽ tự động di chuyển tập lệnh sang gốc web. Trong ví dụ trước, tập lệnh được chuyển sang

  
      ...
  
      
  
  

  29, trong đó trình giữ chỗ

  
      ...
  
      
  
  

  16 là biệt danh khung đích (TFM). Không cần thay đổi đối với URL tương đối của tập lệnh trong thành phần

  
      ...
  
      
      
  
  

  3.

• Đối với các tập lệnh được cung cấp bởi Thư viện lớp Dao cạo (RCL):

  
      ...
  
      
  
  

  32
  • Trình giữ chỗ

    
        ...
    
        
    
    

    33 là mã định danh gói của RCL (hoặc tên thư viện cho thư viện lớp được tham chiếu bởi ứng dụng).
  • Người giữ chỗ

    
        ...
    
        
    
    

    03 là đường dẫn đến trang, chế độ xem hoặc thành phần. Nếu một thành phần dao cạo nằm ở gốc của RCL, phân đoạn đường dẫn không được bao gồm.
  • Người giữ chỗ

    
        ...
    
        
    
    

    04 là trang, chế độ xem hoặc thành phần.
  • Người giữ chỗ

    
        ...
    
        
    
    

    05 phù hợp với phần mở rộng của trang, chế độ xem hoặc thành phần,

    
        ...
    
        
    
    

    06 hoặc

    
        ...
    
        
    
    

    07.

  Trong ví dụ ứng dụng Blazor sau: Ví dụ:

  • Định danh gói RCL là

    
        ...
    
        
    
    

    39.
  • Các tập lệnh của một mô -đun được tải cho thành phần

    
        ...
    
        
        
    
    

    3 (

    
        ...
    
        
    
    

    41).
  • Thành phần

    
        ...
    
        
        
    
    

    3 nằm trong thư mục

    
        ...
    
        
    
    

    09 của RCL.

  var module = await JS.InvokeAsync("import", 
      "./_content/AppJS/Pages/Index.razor.js");
  

Để biết thêm thông tin về RCL, 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).

Tải tập lệnh từ tệp JavaScript bên ngoài (var module = await JS.InvokeAsync("import", "./_content/AppJS/Pages/Index.razor.js"); 8)

Đặt thẻ JavaScript (JS) (

    ...

    
    

    ...

    

Trong

    ...

    
    

    ...

    
    

    ...

    
    

Trình giữ chỗ

    ...

    

export function showPrompt(message) {
  return prompt(message, 'Type anything here');
}

    ...

    

export function showPrompt(message) {
  return prompt(message, 'Type anything here');
}

Trong ví dụ sau đây về thẻ

    ...

    
    

    ...

    

    ...

    

Khi tệp JS bên ngoài được cung cấp bởi thư viện lớp Dao cạo, chỉ định tệp JS bằng cách sử dụng đường dẫn tài sản web tĩnh ổn định của nó:

    ...

    

• Đoạn đường dẫn cho thư mục hiện tại (

  
      ...
  
      
  
  

  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ỗ

  
      ...
  
      
  
  

  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

  
      ...
  
      
  
  

  62 không được chỉ định trong tệp dự án.
• Trình giữ chỗ

  
      ...
  
      
  
  

  63 là đường dẫn và tên tệp theo

  export function showPrompt(message) {
    return prompt(message, 'Type anything here');
  }
  

  4.

    ...

    
    

Trong ví dụ sau đây về thẻ

    ...

    
    

• Thư viện lớp Dao cạo có tên lắp ráp là

  
      ...
  
      
  
  

  66 và

  
      ...
  
      
  
  

  62 không được chỉ định trong tệp dự án của thư viện.
• Tệp

  
      ...
  
      
  
  

  57 nằm trong thư mục

  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

    ...

    
    

    ...

    
    

• Thêm

  
      ...
  
      
  
  

  72 vào thẻ

  
      ...
  
      
      
  
  

  0 tải tập lệnh blazor.
• Nhập một tập lệnh vào đánh dấu phần tử

  var module = await JS.InvokeAsync("import", 
      "./_content/AppJS/Pages/Index.razor.js");
  

  6 tham chiếu tệp JS tùy chỉnh sau khi bắt đầu Blazor bằng cách gọi

  
      ...
  
      
  
  

  75. Đặt tập lệnh (

  
      ...
  
      
      
  
  

  5) bên trong thẻ
  3 đóng sau khi tập lệnh blazor được tải.

Ví dụ sau đây đưa ra tệp

    ...

    

    ...

    

Trình giữ chỗ

Để biết thêm thông tin về khởi động blazor, hãy xem ASP.NET Core Blazor Startup.

Sự cô lập JavaScript trong các mô -đun JavaScript

Blazor cho phép cách ly JavaScript (JS) trong các mô -đun JavaScript tiêu chuẩn (Đặc tả ECMAScript).

Sự cô lập JS cung cấp các lợi ích sau:

• JS nhập khẩu không còn gây ô nhiễm không gian tên toàn cầu.
• Người tiêu dùng của một thư viện và các thành phần không bắt buộc phải nhập các JS liên quan.

Để 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.

Tập tin lưu trữ JavaScript

Các tệp JavaScript (JS) và các tài sản tĩnh khác thường không được lưu trữ trên các máy khách trong quá trình phát triển trong môi trường

    ...

    

    ...

    

    ...

    

    ...

    

    ...

    

Trong quá trình sản xuất trong môi trường

    ...

    

Để 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ệ

  
      ...
  
      
  
  

  84 được gửi bởi một khách hàng.

Để biết thêm thông tin, xem:

• 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 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("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 (

    ...

    
    

var module = await JS.InvokeAsync("import", 
    "./_content/AppJS/Pages/Index.razor.js");

    ...

    
    

    ...

    
    

    ...

    

Tải JS từ

var module = await JS.InvokeAsync("import", 
    "./_content/AppJS/Pages/Index.razor.js");

• 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("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("import", "./_content/AppJS/Pages/Index.razor.js"); 7

Đặt tập lệnh (

    ...

    
    

    ...

    
    

    ...

    
    

    ...

    
    

Trình giữ chỗ

Tải tập lệnh từ tệp JS bên ngoài (var module = await JS.InvokeAsync("import", "./_content/AppJS/Pages/Index.razor.js"); 8)

Đặt tập lệnh (

    ...

    
    

    ...

    

Trong

    ...

    
    

    ...

    
    

    ...

    
    

Trình giữ chỗ

    ...

    

export function showPrompt(message) {
  return prompt(message, 'Type anything here');
}

    ...

    

export function showPrompt(message) {
  return prompt(message, 'Type anything here');
}

Trong ví dụ sau đây về thẻ

    ...

    
    

    ...

    

    ...

    

Khi tệp JS bên ngoài được cung cấp bởi thư viện lớp Dao cạo, chỉ định tệp JS bằng cách sử dụng đường dẫn tài sản web tĩnh ổn định của nó:

    ...

    

• Đoạn đường dẫn cho thư mục hiện tại (

  
      ...
  
      
  
  

  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ỗ

  
      ...
  
      
  
  

  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

  
      ...
  
      
  
  

  62 không được chỉ định trong tệp dự án.
• Trình giữ chỗ

  
      ...
  
      
  
  

  63 là đường dẫn và tên tệp theo

  export function showPrompt(message) {
    return prompt(message, 'Type anything here');
  }
  

  4.

    ...

    
    

Trong ví dụ sau đây về thẻ

    ...

    
    

• Thư viện lớp Dao cạo có tên lắp ráp là

  
      ...
  
      
  
  

  66 và

  
      ...
  
      
  
  

  62 không được chỉ định trong tệp dự án của thư viện.
• Tệp

  
      ...
  
      
  
  

  57 nằm trong thư mục

  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

    ...

    
    

    ...

    
    

• Thêm

  
      ...
  
      
  
  

  72 vào thẻ

  
      ...
  
      
      
  
  

  0 tải tập lệnh blazor.
• Nhập một tập lệnh vào đánh dấu phần tử

  var module = await JS.InvokeAsync("import", 
      "./_content/AppJS/Pages/Index.razor.js");
  

  6 tham chiếu tệp JS tùy chỉnh sau khi bắt đầu Blazor bằng cách gọi

  
      ...
  
      
  
  

  75. Đặt tập lệnh (

  
      ...
  
      
      
  
  

  5) bên trong thẻ
  3 đóng sau khi tập lệnh blazor được tải.

Ví dụ sau đây đưa ra tệp

    ...

    

    ...

    

Trình giữ chỗ

Tải tập lệnh từ tệp JS bên ngoài (

var module = await JS.InvokeAsync("import", 
    "./_content/AppJS/Pages/Index.razor.js");

Đặt tập lệnh ( ... 5) với đường dẫn tập lệnh ... 46 bên trong thẻ 3 đóng sau khi tham chiếu tập lệnh blazor.

Trong

    ...

    
    

    ...

    
    

Trình giữ chỗ

    ...

    

export function showPrompt(message) {
  return prompt(message, 'Type anything here');
}

• Trong ví dụ sau đây về thẻ

  
      ...
  
      
      
  
  

  0 trước đó, tệp

  
      ...
  
      
  
  

  57 nằm trong thư mục

  
      ...
  
      
  
  

  58 của ứng dụng:
• Khi tệp JS bên ngoài được cung cấp bởi thư viện lớp Dao cạo, chỉ định tệp JS bằng cách sử dụng đường dẫn tài sản web tĩnh ổn định của nó:

  
      ...
  
      
  
  

  59:

Đoạn đường dẫn cho thư mục hiện tại (

    ...

    

Người giữ chỗ ... 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 ... 62 không được chỉ định trong tệp dự án.

Trình giữ chỗ

    ...

    

export function showPrompt(message) {
  return prompt(message, 'Type anything here');
}

Trong ví dụ sau đây về thẻ

    ...

    
    

Thư viện lớp Dao cạo có tên lắp ráp là

    ...

    

    ...

    

• Tệp

  
      ...
  
      
  
  

  57 nằm trong thư mục

  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

    
        ...
    
        
        
    
    

    7 (Blazor Webassugging) hoặc

    
        ...
    
        
        
    
    

    8 (máy chủ blazor) khi ứng dụng được khởi tạo:
• Thêm

  
      ...
  
      
  
  

  72 vào thẻ

  
      ...
  
      
      
  
  

  0 tải tập lệnh blazor.

Nhập một tập lệnh vào đánh dấu phần tử

var module = await JS.InvokeAsync("import", 
    "./_content/AppJS/Pages/Index.razor.js");

    ...

    

    ...

    
    

• 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("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("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("import", 
    "./_content/AppJS/Pages/Index.razor.js");

Tiêm một tập lệnh sau khi blazor bắt đầu

Cảnh báo

Không đặt thẻ

    ...

    
    

    ...

    
    

    ...

    
    

Ghi chú

Các ví dụ tài liệu đặt các tập lệnh vào thẻ

    ...

    
    

Tải một tập lệnh trong đánh dấu

var module = await JS.InvokeAsync("import", 
    "./_content/AppJS/Pages/Index.razor.js");

    ...

    

Tải JS từ

var module = await JS.InvokeAsync("import", 
    "./_content/AppJS/Pages/Index.razor.js");

• 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("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("import", "./_content/AppJS/Pages/Index.razor.js"); 7

Đặt tập lệnh (

    ...

    
    

    ...

    
    

    ...

    
    

    ...

    
    

Trình giữ chỗ

Tải tập lệnh từ tệp JS bên ngoài (var module = await JS.InvokeAsync("import", "./_content/AppJS/Pages/Index.razor.js"); 8)

Đặt tập lệnh (

    ...

    
    

    ...

    

Trong

    ...

    
    

    ...

    
    

    ...

    
    

Trình giữ chỗ

    ...

    

export function showPrompt(message) {
  return prompt(message, 'Type anything here');
}

    ...

    

export function showPrompt(message) {
  return prompt(message, 'Type anything here');
}

Trong ví dụ sau đây về thẻ

    ...

    
    

    ...

    

    ...

    

Khi tệp JS bên ngoài được cung cấp bởi thư viện lớp Dao cạo, chỉ định tệp JS bằng cách sử dụng đường dẫn tài sản web tĩnh ổn định của nó:

    ...

    

• Đoạn đường dẫn cho thư mục hiện tại (

  
      ...
  
      
  
  

  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ỗ

  
      ...
  
      
  
  

  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

  
      ...
  
      
  
  

  62 không được chỉ định trong tệp dự án.
• Trình giữ chỗ

  
      ...
  
      
  
  

  63 là đường dẫn và tên tệp theo

  export function showPrompt(message) {
    return prompt(message, 'Type anything here');
  }
  

  4.

    ...

    
    

Trong ví dụ sau đây về thẻ

    ...

    
    

• Thư viện lớp Dao cạo có tên lắp ráp là

  
      ...
  
      
  
  

  66 và

  
      ...
  
      
  
  

  62 không được chỉ định trong tệp dự án của thư viện.
• Tệp

  
      ...
  
      
  
  

  57 nằm trong thư mục

  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

    ...

    
    

    ...

    
    

• Thêm

  
      ...
  
      
  
  

  72 vào thẻ

  
      ...
  
      
      
  
  

  0 tải tập lệnh blazor.
• Nhập một tập lệnh vào đánh dấu phần tử

  var module = await JS.InvokeAsync("import", 
      "./_content/AppJS/Pages/Index.razor.js");
  

  6 tham chiếu tệp JS tùy chỉnh sau khi bắt đầu Blazor bằng cách gọi

  
      ...
  
      
  
  

  75. Đặt tập lệnh (

  
      ...
  
      
      
  
  

  5) bên trong thẻ
  3 đóng sau khi tập lệnh blazor được tải.

Ví dụ sau đây đưa ra tệp

    ...

    

    ...

    

Trình giữ chỗ

Tải tập lệnh từ tệp JS bên ngoài (

var module = await JS.InvokeAsync("import", 
    "./_content/AppJS/Pages/Index.razor.js");

Đặt tập lệnh ( ... 5) với đường dẫn tập lệnh ... 46 bên trong thẻ 3 đóng sau khi tham chiếu tập lệnh blazor.

Trong

    ...

    
    

    ...

    
    

Trình giữ chỗ

    ...

    

export function showPrompt(message) {
  return prompt(message, 'Type anything here');
}

Trong ví dụ sau đây về thẻ

    ...

    
    

    ...

    

    ...

    

• Khi tệp JS bên ngoài được cung cấp bởi thư viện lớp Dao cạo, chỉ định tệp JS bằng cách sử dụng đường dẫn tài sản web tĩnh ổn định của nó:

  
      ...
  
      
  
  

  59:
  • Đoạn đường dẫn cho thư mục hiện tại (

    
        ...
    
        
    
    

    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ỗ

    
        ...
    
        
    
    

    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

    
        ...
    
        
    
    

    62 không được chỉ định trong tệp dự án.
  • Trình giữ chỗ

    
        ...
    
        
    
    

    63 là đường dẫn và tên tệp theo

    export function showPrompt(message) {
      return prompt(message, 'Type anything here');
    }
    

    4.
• Trong ví dụ sau đây về thẻ

  
      ...
  
      
      
  
  

  0 trước đó:

Thư viện lớp Dao cạo có tên lắp ráp là

    ...

    

    ...

    

• Tệp

  
      ...
  
      
  
  

  57 nằm trong thư mục

  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).

    ...

    
    

    ...

    
    

Bạn có thể sử dụng các thư viện JavaScript trong Blazor không?

Blazor có đáng học 2022 không?

Blazor sẽ thay thế JavaScript?