Bạn có thể sử dụng JavaScript với lõi ASP NET không?

Đây là phần mười của loạt bài đăng mới về ASP. NET lõi 3. 1 cho năm 2020. Trong loạt bài này, chúng tôi sẽ đề cập đến 26 chủ đề trong khoảng thời gian 26 tuần từ tháng 1 đến tháng 6 năm 2020, có tiêu đề ASP. NET Core A-Z. Để phân biệt với loạt năm 2019, loạt năm 2020 sẽ chủ yếu tập trung vào một cơ sở mã duy nhất đang phát triển (NetLearner. ) thay vì các đoạn mã mới không liên quan trong tuần

Bài trước

• Lưu trữ IIS cho ASP. NET lõi 3. 1 Ứng dụng web

NetLearner trên GitHub

• Kho. https. //github. com/shahedc/NetLearnerApp
• v0. phát hành 10-alpha. https. //github. com/shahedc/NetLearnerApp/bản phát hành/thẻ/v0. 10-alpha

Trong bài viết này

• J dành cho JavaScript, CSS, HTML và các tệp tĩnh khác
• Định cấu hình tệp tĩnh qua Middleware
• Tùy chỉnh vị trí cho tệp tĩnh
• Duy trì tính toàn vẹn của CDN
• Còn về NPM hoặc WebPack thì sao?
• Người giới thiệu

J dành cho JavaScript, CSS, HTML và các tệp tĩnh khác

GHI CHÚ. bài viết này sẽ hướng dẫn bạn cách bao gồm và tùy chỉnh việc sử dụng các tệp tĩnh trong ASP. ứng dụng web NET Core. Nó không phải là một hướng dẫn về phát triển web front-end

Nếu ASP của bạn. NET Core có giao diện người dùng – cho dù đó là tập hợp Chế độ xem MVC hay Ứng dụng một trang (SPA) – bạn sẽ cần bao gồm các tệp tĩnh trong ứng dụng của mình. Điều này bao gồm (nhưng không giới hạn). JavaScript, CSS, HTML và các tệp hình ảnh khác nhau

Khi bạn tạo một ứng dụng web mới bằng một trong các mẫu dựng sẵn (MVC, Razor Pages hoặc Blazor), bạn sẽ thấy thư mục “wwwroot” trong Solution Explorer. Điều này trỏ đến một thư mục vật lý trong hệ thống tệp của bạn có chứa các tệp giống như đã thấy từ Visual Studio. Tuy nhiên, vị trí này có thể được định cấu hình, bạn có thể có nhiều vị trí với tệp tĩnh và bạn có thể bật/tắt tệp tĩnh trong ứng dụng của mình nếu muốn. Trên thực tế, bạn phải “chọn tham gia” vào các tệp tĩnh trong đường dẫn phần mềm trung gian của mình

ASP. NET lõi 3. 1 sơ đồ đường ống phần mềm trung gian

Bạn có thể duyệt ứng dụng mẫu (do mẫu tạo) (có tệp tĩnh) trên GitHub tại vị trí sau

• MVC – https. //github. com/shahedc/NetLearnerApp/tree/main/src/NetLearner. mvc
• Trang dao cạo – https. //github. com/shahedc/NetLearnerApp/tree/main/src/NetLearner. trang
• Blazor – https. //github. com/shahedc/NetLearnerApp/tree/main/src/NetLearner. áo khoác ngoài

Định cấu hình tệp tĩnh qua Middleware

Hãy bắt đầu bằng cách quan sát Khởi động. cs, từ bất kỳ dự án web nào. Chúng tôi đã thấy tệp này nhiều lần trong loạt blog này. Trong phương thức Configure(), bạn sẽ tìm thấy lệnh gọi phương thức quen thuộc để cho phép sử dụng các tệp tĩnh

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
   ...
   app.UseStaticFiles();
   ...
}

Cuộc gọi này đến ứng dụng. UseStaticFiles() đảm bảo rằng các tệp tĩnh có thể được cung cấp từ vị trí được chỉ định, chẳng hạn như. g. wwwroot. Trên thực tế, dòng mã này trông giống hệt nhau cho dù bạn nhìn vào Khởi động. cs trong một dự án MVC, Razor Pages hoặc Blazor

Thật hữu ích khi lưu ý vị trí của dòng mã này. Nó xuất hiện trước ứng dụng. UseRouting() và ứng dụng. UseEndpoints(), điều này rất quan trọng. Điều này đảm bảo rằng các yêu cầu tệp tĩnh có thể được xử lý và gửi lại trình duyệt web mà không cần phải chạm vào phần mềm trung gian định tuyến ứng dụng. Điều này thậm chí còn trở nên quan trọng hơn khi xác thực được sử dụng

Hãy xem bất kỳ dự án web nào để quan sát xác thực được thêm vào chúng. Trong đoạn mã dưới đây, bạn có thể thấy lệnh gọi ứng dụng quen thuộc. UseStaticFiles() một lần nữa. Tuy nhiên, cũng có lệnh gọi tới ứng dụng. Sử dụng xác thực (). Điều quan trọng là lệnh gọi xác thực phải xuất hiện sau lệnh gọi sử dụng tệp tĩnh. Điều này đảm bảo rằng quy trình xác thực không được kích hoạt khi không cần thiết

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
   ...
   app.UseStaticFiles();
   ...
   app.UseAuthentication();
   ...
   app.UseMvc(...);
}

Bằng cách sử dụng đường ống phần mềm trung gian theo cách này, bạn có thể "ngắn mạch" đường ống khi một yêu cầu đã được thực hiện bởi một lớp phần mềm trung gian cụ thể. Nếu một tệp tĩnh đã được cung cấp thành công bằng phần mềm trung gian Tệp tĩnh, nó sẽ ngăn các lớp phần mềm trung gian tiếp theo (i. e. xác thực, định tuyến, v.v.) khỏi việc xử lý yêu cầu

GHI CHÚ. nếu bạn cần bảo mật bất kỳ tệp tĩnh nào, e. g. hình ảnh riêng tư, bạn có thể xem xét giải pháp đám mây như Azure Blob Storage để lưu trữ tệp. Sau đó, các tệp có thể được cung cấp từ bên trong ứng dụng, thay vì các tệp tĩnh thực tế. Bạn cũng có thể cung cấp các tệp bảo mật (từ bên ngoài vị trí wwwroot) dưới dạng đối tượng FileResult() được trả về từ một phương thức hành động có thuộc tính [Authorize]

Tùy chỉnh vị trí cho tệp tĩnh

Có thể thuận tiện khi các mẫu web mặc định tạo vị trí cho các tệp tĩnh của bạn và cũng cho phép sử dụng các tệp tĩnh đó. Như bạn đã thấy, kích hoạt các tệp tĩnh không phải là điều kỳ diệu. Xóa cuộc gọi đến ứng dụng. useStaticFiles() sẽ vô hiệu hóa các tệp tĩnh không được phục vụ. Trên thực tế, vị trí cho các tệp tĩnh cũng không phải là phép thuật

Trong một bài đăng trước, chúng ta đã thảo luận về cách Chương trình. cs bao gồm lệnh gọi tới CreateDefaultBuilder() để thiết lập ứng dụng của bạn

public class Program
{
   ...
   public static IHostBuilder CreateHostBuilder(string[] args) =>
      Host.CreateDefaultBuilder(args)
         .ConfigureWebHostDefaults(webBuilder => 
         {
            webBuilder.UseStartup();
         });
}

Đằng sau hậu trường, cuộc gọi phương thức này đặt "gốc nội dung" thành thư mục hiện tại, chứa thư mục "wwwroot", "gốc web" của dự án của bạn. Cả hai đều có thể được tùy chỉnh

• Để thay đổi gốc nội dung, bạn có thể định cấu hình gốc trong khi xây dựng máy chủ, e. g

Host.CreateDefaultBuilder(args).UseContentRoot("c:\\")

• Để thay đổi gốc web trong gốc nội dung của bạn, bạn cũng có thể định cấu hình gốc đó trong khi xây dựng máy chủ, e. g

webBuilder.UseWebRoot("")

Bạn cũng có thể sử dụng cuộc gọi đến ứng dụng. UseStaticFiles() để tùy chỉnh một vị trí thay thế để phục vụ các tệp tĩnh. Điều này cho phép bạn cung cấp các tệp tĩnh bổ sung từ một vị trí bên ngoài gốc web được chỉ định

...
using Microsoft.Extensions.FileProviders;
using System.IO;
...
public void Configure(IApplicationBuilder app)
{
   ...
   app.UseStaticFiles(new StaticFileOptions
   {
      FileProvider = new PhysicalFileProvider(
         Path.Combine(env.ContentRootPath, "AltStaticRoot")),
         RequestPath = "/AltStaticFiles"
   });
}

Đợi một chút.. tại sao có vẻ như có hai vị trí thay thế cho tệp tĩnh?

• Trong cuộc gọi đến Đường dẫn. Combine(), “AltStaticRoot” là một thư mục thực tế trong thư mục hiện tại của bạn. Lớp Path này và phương thức Combine() của nó có sẵn trong System. không gian tên IO
• Giá trị "AltStaticFiles" cho RequestPath được sử dụng làm "thư mục ảo" cấp gốc mà từ đó hình ảnh có thể được cung cấp. Lớp PhysicalFileProvider có sẵn trong Microsoft. Tiện ích mở rộng. Không gian tên FileProviders

Đánh dấu sau đây có thể được sử dụng trong một. cshtml để tham chiếu đến một hình ảnh, e. g. MyImage01. png

Ảnh chụp màn hình bên dưới hiển thị ví dụ về hình ảnh được tải từ một vị trí thay thế

Visual Studio hiển thị hình ảnh được tải từ vị trí thay thế

Ảnh chụp màn hình bên dưới hiển thị một trình duyệt web hiển thị hình ảnh như vậy

Trình duyệt web hiển thị hình ảnh được tải từ vị trí thay thế

Duy trì tính toàn vẹn của CDN

Khi bạn sử dụng CDN (Mạng phân phối nội dung) để phục vụ các tệp CSS và JS phổ biến, bạn cần đảm bảo rằng tính toàn vẹn của mã nguồn là đáng tin cậy. Bạn có thể yên tâm rằng ASP. NET Core đã giải quyết vấn đề này cho bạn trong các mẫu tích hợp sẵn của nó. Hãy xem các trang Nhận dạng được chia sẻ, e. g. _ValidationScriptsPartial. cshtml trong mã mẫu Razor

<environment include="Development">
  <script src="~/Identity/lib/jquery-validation/dist/jquery.validate.js">script> 
environment>

<environment exclude="Development">
 <script  
src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.17.0/jquery.validate.min.js"
asp-fallback-src="~/Identity/lib/jquery-validation/dist/jquery.validate.min.js"
asp-fallback-test="window.jQuery && window.jQuery.validator"
crossorigin="anonymous"
integrity="sha384-rZfj/ogBloos6wzLGpPkkOr/gpkBNLZ6b6yLy4o+ok+t/SAKlL5mvXLr0OXNi1Hp">
    script> 
environment>

Right away, you’ll notice that there are two conditional blocks in the above markup. The first block is used only during development, in which the jQuery Validate file is obtained from your local copy. When not in development (e.g. staging, production, etc), the jQuery Validate file is obtained from a CDN.

Bạn có thể sử dụng một công cụ tạo hàm băm tự động để tạo ra các giá trị hàm băm SRI (Subresource Integrity), nhưng bạn sẽ phải sao chép thủ công giá trị này vào mã của mình. Bạn có thể dùng thử LibMan mới hơn (còn gọi là Trình quản lý thư viện) để dễ dàng thêm và cập nhật thư viện phía máy khách của mình

LibMan (còn gọi là Trình quản lý thư viện)

Cách dễ nhất để sử dụng LibMan là sử dụng các tính năng tích hợp sẵn trong Visual Studio. Sử dụng LibMan bằng IDE dễ dàng như khởi chạy nó từ Solution Explorer. Chỉ định nhà cung cấp từ thư viện bạn muốn và bất kỳ tệp cụ thể nào bạn muốn từ thư viện đó

Nếu bạn đã đọc bài viết SignalR của tôi từ loạt blog năm 2018 của tôi, bạn có thể nhớ lại các bước để thêm thư viện ứng dụng qua LibMan (còn gọi là Trình quản lý thư viện)

• Nhấp chuột phải vào dự án trong Solution Explorer
• Chọn Thêm. Thư viện phía máy khách

Trong cửa sổ bật lên xuất hiện, chọn/nhập thông tin sau

• Các nhà cung cấp. chọn từ cdnjs, hệ thống tập tin, giải nén
• Thuật ngữ tìm kiếm trong thư viện, e. g. @microsoft/signalr@latest để chọn phiên bản ổn định mới nhất của thư viện phía máy khách SignalR
• Các tập tin. Ở mức tối thiểu, hãy chọn các tệp cụ thể, e. g. người phát tín hiệu. js và/hoặc tương đương rút gọn của nó
• Điểm đích. sửa đổi cây thư mục vị trí đích như mong muốn

Thêm thư viện phía máy khách

Để biết thêm về LibMan (sử dụng VS hoặc CLI), hãy xem tài liệu chính thức

• Sử dụng LibMan với ASP. NET lõi trong Visual Studio. https. // tài liệu. Microsoft. com/en-us/aspnet/core/client-side/libman/libman-vs
• Sử dụng giao diện dòng lệnh LibMan (CLI). https. // tài liệu. Microsoft. com/en-us/aspnet/core/client-side/libman/libman-cli
• quản lý thư viện. Trình quản lý nội dung phía máy khách cho các ứng dụng web. https. //devblog. Microsoft. com/aspnet/library-manager-client-side-content-manager-for-web-apps/

Trong mọi trường hợp, việc sử dụng LibMan sẽ tự động tạo một “libman. json”, tệp kê khai mà bạn cũng có thể kiểm tra và chỉnh sửa theo cách thủ công. Bài viết SignalR đã nói ở trên cũng bao gồm mẫu ứng dụng web bỏ phiếu theo thời gian thực. Bạn có thể xem libman của nó. json hoặc NetLearner mới hơn. libman của ứng dụng cổng thông tin. json để tuân thủ cú pháp sử dụng thư viện máy khách SignalR

________số 8

Mỗi khi bạn lưu libman. json, nó sẽ kích hoạt quá trình khôi phục của LibMan. Điều này kéo xuống các thư viện cần thiết từ nguồn được chỉ định của chúng và thêm chúng vào hệ thống tệp cục bộ của bạn. Nếu bạn muốn kích hoạt quá trình khôi phục này theo cách thủ công, bạn luôn có thể chọn tùy chọn “Khôi phục thư viện phía máy khách” bằng cách nhấp chuột phải vào libman. json trong Solution Explorer

Còn về NPM hoặc WebPack thì sao?

Nếu bạn đã đi xa đến mức này, bạn có thể tự hỏi. “Này, còn NPM hay WebPack thì sao?”

Thật tốt khi biết rằng LibMan không phải là sự thay thế cho các hệ thống quản lý gói hiện tại của bạn. Trên thực tế, các mẫu Ứng dụng một trang trong Visual Studio (cho Angular và React) hiện đang sử dụng npm và WebPack. LibMan chỉ cung cấp một cơ chế gọn nhẹ để bao gồm các thư viện phía máy khách từ các vị trí bên ngoài

Tôi có thể sử dụng JavaScript trong. NET lõi?

Có thể. NET có chạy JavaScript không?

Cách sử dụng JavaScript trong ASP. NET lõi MVC?

Tôi có thể sử dụng TypeScript với ASP không. NET lõi?