ASP.NET Core là một Framework nguồn mở, đa nền tảng xây dựng trên .NET Core dành cho việc xây dựng các ứng dụng dựa trên kết nối internet, cụ thể sử dụng ASP.NET Core có thể:
- Xây dựng các ứng dụng dịch vụ web, IoT, backend cho ứng dụng di động (API).
- Ứng dụng có thể chạy trên .NET Core hay .NET Framework
- Có thể sử dụng các cộng cụ để làm việc với ASP.NET trên Linux, Windows, macOS
- Có thể host ứng dụng trên Kestrel, IIS, Nginx, Apache, Docker thậm chí tự host (tự chạy dịch vụ HTTP)
- Sau khi thành thạo ASP.NET Core thì có thể sử dụng đến ASP.NET Core MVC để hỗ trợ kiến trúc MVC (Model-View-Controller), để phát triển ứng dụng module hóa cao hơn và được hỗ trợ các công nghệ như Razor
Tạo ứng dụng ASP.NET Core 3.X
Ta sẽ bắt đầu với ứng dụng ASP.NET đơn giản nhất, là một trang web - khi truy cập in ra lời chào. Tạo thư mục chứa dự án đặt tên là HelloWorld, trong thư mục đó gõ lệnh sau để tạo ra cấu trúc dự án ứng dụng này: dotnet new web
Nếu trên máy chưa có .NET Core thì vui lòng cài đặt: Cài đặt .NET Core trên Ubuntu, Windows, macOS
Sau đó mở thư mục dự án bằng Visual Studio Code. Cài đặt C# extension cho VS:
Vào thư mục project, chọn menu View > Command Palette..., gõ .NET build rồi chọn mục .NET: Generate Assets for Build and Debug. Lệnh này để nó sinh ra file cấu hình để VSC build ứng dụng, gồm 2 file sinh ra tại: .vscode/launch.json và .vscode/tasks.json
Cấu trúc file, thư mục trong dự án như hình dưới, đầu tiên đang có thư mục wwwroot nơi sau này sẽ chứa các file css, js, ảnh ... File Properties/lauchSettings.json chứa các thiết lập...
Nếu không nhìn thấy thư mục wwwroot hãy tạo nó thủ công
Giờ để build ứng dụng gõ lệnh: dotnet build
Để build và chạy ứng dụng luôn gõ: dotnet run
Ngoài ra để tự động build và chạy lại khi mã cập nhật sử dụng lệnh: dotnet watch run
Giờ sẽ tùy biến trang đầu tiên
Tại thư mục dự án, gõ lệnh sau để lấy về Bootstrap: npm i bootstrap@4.6.0 --save
Kích hoạt SSL (truy cập với https) ở môi trường phát triển
Thực hiện lệnh sau:
dotnet dev-certs https --clean
dotnet dev-certs https --trust
Tùy biến trang đâu tiên của ASP.NET Core
Ứng dụng web mặc đinh vừa tạo ra có hàm Main là điểm mồi chạy ứng dụng, với nội dung code như sau (Program.cs):
Kích hoạt truy cập file tĩnh
Trang HTML của bạn trả về có thể chứa các URL dẫn đến các file tĩnh như các css, js, hình ảnh,... Thậm chí là một file html. Các file này đều chứa trong thư mục wwwroot của dự án. Trước tiên kích hoạt cho phép truy cập đến tài nguyên tĩnh bằng thêm vào đoạn code sau
Tích hợp CSS Bootstrap, JQuery vào ASP.NET
Ta sẽ sử dụng npm (trình quản lý package cho NodeJS) để tải Bootstrap về. Trước tiên, nếu thư mục gốc dự án chưa có file package.json (lưu tên các package) thì cần tạo file đó, đưa vào đó nội dung trống.
{
}
Hoặc có thể gõ npm init để nó sinh ra file này
Sau khi lệnh chạy xong, nó tải về bootstrap lưu trong thư mục node_modules và nó cũng thông báo để cần cài thêm popper.js@^1.16.1 và jquery@1.9.1, gõ thêm lệnh sau để lấy về popper.js@^1.16.1 và jquery@1.9.1:
npm i popper.js@^1.16.1 --save
npm i jquery@1.9.1 --save
Sử dụng BuildBundlerMinifier
Các thư viện trên, mã của chúng đều chứa trong node_modules, để sử dụng ta có thể cần copy các file js,css vào thư mục trong wwwroot, để làm điều đó một cách tự động thì dùng đến BuildBundlerMinifier
BuildBundlerMinifier là công cụ đóng gọi và tối ưu kích thước cho JS, CSS, HTML. Nó là một package cài thêm cho VSC (trong Visual Studio có sẵn)
Hãy gõ lệnh sau để cài đặt: dotnet add package BuildBundlerMinifier
Giờ ta muốn, khi thi hành build thì BuildBundlerMinifier sẽ copy node_modules/bootstrap/dist/js/bootstrap.min.js vào wwwroot/js/bootstrap.min.js
Tạo file bundleconfig.json ở thư mục gốc và cập nhật vào nó nội dung
Khi đã có file này, mỗi khi build dự án, thì nó sẽ copy và minify các file css, js cho bạn.
Sửa lại code có trả về trang với Bootstrap
