Sử dụng Static Files trong ASP.NET Core

Bài viết này chúng ta sẽ học cách làm việc với Static File trong ASP.NET Core. ASP.NET Core có khả năng duyệt file tĩnh như là HTML, CSS, hình ảnh và Javacript trực tiếp từ client mà không đi qua MVC Middleware.

Sử dụng Static Files

Các file như HTML, CSS, ảnh, JavaScript được gọi là file tĩnh hay static files. Có hai cách để bạn có thể duyệt các file tĩnh này trong ASP.NET Core MVC. Trực tiếp hoặc thông qua Controller MVC. Bài này chúng ta sẽ học cách duyệt trực tiếp. Các file tĩnh đó nó có nội dung không thay đổi động khi người dùng request tới nó. Vì thế nó không cần phải tạo bất cứ yêu cầu nào thông qua MVC Middleware (hay cách khác là request pipeline) mà chỉ cần trả nguyên nội dung về thôi. ASP.NET Core cung cấp một Middleware có sẵn chỉ phục vụ việc này.

Tạo mới project

Mở Visual Studio 2017 và tạo mới một project sử dụng Empty Project. Tên của Project là StaticFiles. Bạn có thể tham khảo bài viết hướng dẫn Bắt đầu khởi tạo ứng dụng ASP.NET Core. Chạy project và kiểm tra mọi thứ ok.

Static file middleware

Chúng ta cũng đã nói về Middleware và Request Pipeline trong ASP.NET Core trước đây. Để duyệt các static file chúng ta cần thêm StaticFiles Middleware vào. Middleware này có sẵn trong thư viện Microsoft.AspNetCore.StaticFiles. Nó không cần cài đặt gì vì nó là một phần của Microsoft.AspNetCore.App. Chúng ta có thể cấu hình ASP.NET Core để duyệt file tĩnh sử dụng extension method UseStaticFiles.

Mở file Startup.cs và đặt app.UseStaticFiles() trước app.Run:

public void Configure(IApplicationBuilder app, IHostingEnvironment env)

        {

            if (env.IsDevelopment())

            {

                app.UseDeveloperExceptionPage();

            }



            app.UseStaticFiles();





            app.Run(async (context) =>

            {

                await context.Response.WriteAsync("Hello World!");

            });

        }

Chú ý là app.Run là middleware ngắt. Nếu bạn đặt UseStaticFiles trước app.Run thì nó sẽ không được thực thi.

Static file ở đâu?

Theo quy tắc thì static file sẽ được lưu trong web root ở thư mục (<content-root>/wwwroot). Bạn có thể thay đổi nếu muốn

Content root

Content root là thư mục gốc của ứng dụng. Tất cả các file của ứng dụng như view, controller, pages, javascript hay bất cứ file nào thuộc về ứng dụng.

Content root tương tự như thư mục của ứng dụng để có thể thực thi hosting app.

Webroot

Web root thư mục trong content root nơi mà nó để các tài nguyên tĩnh như CSS, Javascript, hình ảnh..

Tạo mới static file

Để thêm static file, ví dụ bạn thêm test.html. Chọn thư mục wwwroot, click chuột phải và chọn AddàAdd new Item. Chọn HTML Page và đặt tên nó là test.html.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <p> Hello world from test.html</p>
</body>
</html>

Bảo mật static file
Giờ hãy chạy project và nhìn thấy dòng chữ “Hello World”. Giờ bạn có thể chỉnh sửa URL thêm vào test.html và refresh bạn sẽ thấy dòng chữ “Hello world from test.html”

Static file middleware không kiểm tra việc người dùng có được quyền xem file hay không. Nếu bạn chỉ muốn những người có quyền truy cập file thì bạn nên lưu nó bên ngoài thư mục wwwroot và bạn có thể cho phép duyệt file theo quyền với Controller/Action trả về FileResult.

UseStaticFile là một middleware ngắt

Static file là một Middleware ngắt. Nếu file tìm thấy nó sẽ trả về file và ngắt request pipeline. Nó sẽ gọi middleware kế tiếp chỉ khi nó không tìm thấy file.

Làm sao để đặt Content rooth path và web rooth path

Như đã nói đến ở trên thì các static file được đặt ở web root. Chúng ta có thể đặt content root là thư mục hiện tại. Nó đã được cài đặt mặc định trong phương thức CreateDefaultBuilder của Program.cs. CreateDefaultBuilder là một helper class chứa các logic làm việc với cấu hình.

Nó cài đặt content root của ứng dụng bằng cách gọi extension method UseContentRoot:

.UseContentRoot(Directory.GetCurrentDirectory())

Theo quy tắc thì webroot được đặt cho thư mục wwwroot. Bạn có thể thay đổi bằng cách sử dụng phương thức UseWebRoot.

Sử dụng Static Files trong ASP.NET Core