ASP.NET Core là một Framework nguồn mở, đa nền tảng, dành cho việc xây dựng các ứng dụng web. Với ASP.NET Core, bạn có thể xây dựng các ứng dụng dịch vụ web, ứng dụng backend cho di động, và nhiều loại ứng dụng khác. ASP.NET Core có thể chạy trên nền tảng .NET Core hoặc .NET Framework, và bạn có thể sử dụng nó trên các hệ điều hành Linux, Windows, macOS. Bạn có thể host ứng dụng trên nhiều loại server như Kestrel, IIS, Nginx, Apache, cũng như tự host (chạy dịch vụ HTTP).
Để bắt đầu phát triển ứng dụng web, trước hết bạn cần biết về HTML, CSS, JavaScript và các framework phổ biến như Bootstrap và JQuery.
Bạn đang xem: Tạo ứng dụng trang web đầu tiên sử dụng ASP.NET Core
Contents
Tạo ứng dụng ASP.NET Core 3.X
Để tạo ứng dụng đầu tiên sử dụng ASP.NET Core, bạn cần tạo một thư mục mới cho dự án và chạy lệnh sau:
dotnet new web
Sau khi tạo cấu trúc dự án, bạn có thể mở thư mục dự án bằng Visual Studio Code. Lần đầu tiên mở dự án, bạn cần chọn menu View > Command Palette, gõ “.NET build” và chọn mục “.NET: Generate Assets for Build and Debug”. Điều này sẽ sinh ra các file cấu hình cho việc build và debug ứng dụng của bạn.
Cấu trúc file và thư mục trong dự án sẽ được tạo như sau:
- Program.cs
- Startup.cs
- wwwroot/
- css/
- js/
- html/
- images/
Để build và chạy ứng dụng, bạn có thể sử dụng các lệnh sau:
dotnet build
dotnet run
Xem thêm : Ngôn ngữ lập trình C là gì? Tính ứng dụng của ngôn ngữ lập trình C
Ứng dụng sẽ được chạy trên cổng 5000. Bạn có thể truy cập http://localhost:5000 để xem kết quả. Nếu muốn thiết lập cổng khác, bạn có thể chỉnh sửa file “Properties/launchSettings.json”.
Ngoài ra, bạn có thể sử dụng lệnh “dotnet watch run” để tự động build và chạy lại ứng dụng khi có sự thay đổi trong mã nguồn.
Tùy biến trang đầu tiên của ASP.NET Core
Trang web đầu tiên mặc định sẽ trả về một lời chào. Bạn có thể tùy biến trang này bằng cách chỉnh sửa code trong file “Startup.cs”. Ví dụ, để trả về một trang HTML đơn giản, bạn có thể sử dụng mã sau:
app.Run(async (context) =>
{
string html = @"
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Trang web đầu tiên</title>
</head>
<body>
<p>Đây là trang web đầu tiên</p>
</body>
</html>
";
await context.Response.WriteAsync(html);
});
Kích hoạt truy cập file tĩnh
Trang web của bạn có thể chứa các file tĩnh như CSS, JavaScript, hình ảnh, và file HTML. Các file này được lưu trong thư mục “wwwroot”. Để cho phép truy cập đến các file tĩnh này, bạn cần thêm middleware “UseStaticFiles” vào pipeline của ứng dụng. Bạn có thể làm điều này bằng cách thêm mã sau vào file “Startup.cs”:
app.UseStaticFiles();
Sau đó, bạn có thể truy cập các file trong thư mục “wwwroot” bằng cách sử dụng URL tương ứng. Ví dụ, nếu bạn có một file HTML tên là “helloworld.html” trong thư mục “wwwroot/html”, bạn có thể truy cập nó bằng đường dẫn http://localhost:5000/html/helloworld.html.
Tích hợp các thư viện JS, CSS
Để tích hợp các thư viện như Bootstrap và JQuery vào ứng dụng ASP.NET Core, bạn có thể sử dụng npm (trình quản lý package cho NodeJS). Đầu tiên, bạn cần cài đặt NodeJS và NPM.
Sau đó, tại thư mục dự án, bạn có thể chạy các lệnh sau để tải về và cài đặt các thư viện:
npm install bootstrap
npm install jquery
Xem thêm : Ngôn ngữ lập trình PHP là gì? Tất tần tật những điều bạn cần biết về PHP
Sau khi cài đặt thành công, các thư viện sẽ được lưu trong thư mục “node_modules”. Bạn có thể sử dụng các file của chúng trong ứng dụng bằng cách copy và sử dụng đường dẫn tương ứng.
Sử dụng BuildBundlerMinifier
Để tự động copy và tối ưu kích thước các file JS và CSS từ thư mục “node_modules” vào thư mục “wwwroot”, bạn có thể sử dụng công cụ BuildBundlerMinifier.
Đầu tiên, cài đặt BuildBundlerMinifier bằng lệnh sau:
dotnet add package BuildBundlerMinifier
Sau đó, tạo file “bundleconfig.json” trong thư mục gốc của dự án, và cập nhật nội dung sau:
[
{
"outputFileName": "wwwroot/css/bootstrap.min.css",
"inputFiles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css"
]
},
{
"outputFileName": "wwwroot/js/bootstrap.min.js",
"inputFiles": [
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
},
{
"outputFileName": "wwwroot/js/jquery.min.js",
"inputFiles": [
"node_modules/jquery/dist/jquery.min.js"
]
}
]
Khi bạn build dự án, BuildBundlerMinifier sẽ tự động copy và tối ưu kích thước các file CSS và JS từ thư mục “node_modules” vào thư mục “wwwroot”.
Để sử dụng các thư viện này trong trang web của bạn, bạn chỉ cần thêm các đường dẫn đến các file CSS và JS tương ứng trong mã HTML của trang.
Với những bước trên, bạn đã tạo thành công ứng dụng web đầu tiên sử dụng ASP.NET Core. Hãy tiếp tục khám phá và phát triển các tính năng thú vị khác của ASP.NET Core!
Nguồn: https://laptrinhc.edu.vn
Danh mục: Ngôn ngữ lập trình