File tĩnh trong ASP.NET Core

Ở đây, chúng ta sẽ tìm hiểu cách phục vụ các file tĩnh như html, JavaScript, CSS hoặc các file hình ảnh theo yêu cầu HTTP mà không cần xử lý phía máy chủ.

Ứng dụng ASP.NET Core không thể phục vụ các file tĩnh theo mặc định. Chúng ta phải thêm middleware Microsoft.AspNetCore.StaticFiles vào đường ống yêu cầu.

Bạn có thể truy cập Hướng dẫn lập trình ASP.NET Core để không bỏ lỡ bất kỳ bài viết nào của chúng tôi.

Cài đặt middleware StaticFiles

Gói middleware Microsoft.AspNetCore.StaticFiles đã được thêm vào trong gói Microsoft.AspNetCore.All, vì vậy chúng tôi không cần phải cài đặt nó một cách riêng biệt trong ứng dụng ASP.NET 2.x Core.

Để cài đặt middleware StaticFiles thủ công trong ứng dụng ASP.NET Core, bạn mở Manage NuGet Packages.. bằng cách nhấp chuột phải vào project trong solution explorer và chọn Manage NuGet Packages ... Tìm kiếm StaticFiles trong hộp tìm kiếm trong tab Browse. Điều này sẽ hiển thị middleware Microsoft.AspNetCore.StaticFiles như dưới đây.

Nhấp vào nút Install trên khung bên phải để cài đặt nó. Sau khi cài đặt Microsoft.AspNetCore.StaticFiles, nó sẽ tự động được thêm vào phần phụ thuộc của project.

Sử dụng middleware StaticFiles

Theo mặc định, tất cả các file tĩnh của ứng dụng web phải được đặt trong thư mục gốc wwwroot . Để hiểu điều này, hãy tạo một file default.html đơn giản trong thư mục wwwroot với nội dung sau.

Bây giờ, để phục vụ file tĩnh default.html ở trên, chúng ta phải thêm middleware StaticFiles vào phương thức Configure() của lớp Startup như dưới đây.

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

        app.Run(async (context) =>
        {
            await context.Response.WriteAsync("Hello World");
        });
    }
}

Như bạn có thể thấy ở trên, phương thức app.UseStaticFiles() thêm middleware StaticFiles vào đường ống yêu cầu. UseStaticFiles là một phương thức mở rộng có trong middleware StaticFiles để chúng ta có thể dễ dàng cấu hình nó.

Bây giờ, hãy nhấn F5 để chạy project, trình duyệt mở lên và bạn gõ địa chỉ http://localhost:<port>/default.html sẽ hiển thị file default.html như hình dưới đây.

Bằng cách này, chúng ta có thể phục vụ bất kỳ file nào được lưu trữ trong thư mục wwwroot hoặc thư mục con của nó mà không cần phải xử lý ở phía máy chủ. Chẳng hạn như file javascript, css, images, web fonts, …