Khởi tạo Web app đầu tiên trong ASP.NET Core

2022-08-06 22:26:48 | khoảng 5 phút đọc

Xin chào các bạn, mình là Huy, một developer. Trong bài hôm nay chúng ta sẽ cùng nhau khởi tạo ASP.NET Core Web app đầu tiên bằng cách sử dụng .NET Core CLI, một tool mạnh mẽ được tích hợp sẵn trong .NET Core SDK.

Mục tiêu trong bài học hôm nay chúng ta sẽ tiếp cận cách:

  • Tạo một dự án web app.
  • Tin tưởng chứng chỉ phát triển.
  • Chạy ứng dụng.
  • Chỉnh sửa Razor page.

Sau khi kết thúc, chúng ta sẽ có được một web app chạy phía máy local của mình.

Tạo dự án web app

Thông thường có hai cách để tạo một dự án web app trên ASP.NET Core:

  • Visual Studio
  • .NET CLI

Nhưng ở bài này mình sẽ hướng dẫn cách thứ hai đó chính là sử dụng .NET CLI, một phần vì nó đều có cách dùng giống nhau ở mọi hệ điều hành. Ngoài ra việc làm quen với bộ công cụ .NET CLI mạnh mẽ này sẽ giúp chúng ta rất nhiều trong quá trình làm việc với ASP.NET nói riêng và môi trường .NET nói chung.

Mở terminal của các bạn lên, vào thư mục mà bạn muốn lưu trữ dự án và chạy dòng lệnh sau:

dotnet new webapp -o aspnetcoreapp

Lệnh trên dùng để tạo một dự án web app. Tham số -o aspnetcore tạo một thư mục được đặt tên là aspnetcore chứa source code của ứng dụng.

Tin tưởng chứng chỉ phát triển

Việc này giúp ta có thể chạy địa chỉ tên miền với chứng thực HTTPS trên môi trường local.

Để thực hiện tin tưởng chứng chỉ phát triển chúng ta thực hiện như sau:

Windows

Chạy lệnh sau:

dotnet dev-certs https --trust

Sau khi chạy lên trên, một bảng thông báo sẽ hiện ra:

Bảng thông báo xác nhận tin tưởng chứng chỉ phát triển với .NET Core trên Windows

Nhấn Yes để hoàn tất.

macOS

Chạy lệnh sau:

dotnet dev-certs https --trust

Sau khi chạy lệnh trên, một thông báo sẽ hiện ra và yêu cầu bạn nhập mật khẩu máy tính của bạn để chấp nhận tin tưởng chứng chỉ.

Bảng thông báo xác nhận tin tưởng chứng chỉ phát triển với .NET Core trên macOS

Chạy ứng dụng

Để chạy ứng dụng này, ta thực hiện các dòng lệnh bên dưới:

cd aspnetcoreapp
dotnet watch run

Sau khi quá trình khởi đông hoàn tất, trình duyệt sẽ truy cập đến địa chỉ https://localhost:{port} với {port} là một số port ngẫu nhiên.

Chạy ASP.NET Core web app trên trình duyệt

Chỉnh sửa Razor page

Ta có thể thực hành sửa đổi nội dung trang hiện tại một chút. Các bạn mở Visual Studio lên, mở dự án aspnetcoreapp mà chúng ta vừa tạo. Ở đây mình sử dụng Visual Studio for Mac nên giao diện có hơn khác một tí so với hệ điều hành Windows.

Dự án ASP.NET Core web app trên Visual Studio for Mac

Tiếp đến, các bạn mở file Pages/Index.cshtml lên và chỉnh sửa code theo hướng dẫn bên dưới:

@page
@model IndexModel
@{
ViewData["Title"] = "Home page";
}
 
<div class="text-center">
<h1 class="display-4">Welcome</h1>
- <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
+ <p>Hello, world! The time on the server is @DateTime.Now</p>
</div>

Đoạn code trên sẽ hiển thị câu chào và ngày giờ hiện tại trên giao diện trang chủ.

Lưu lại thay đổi, sau đó quay lại trình duyệt tải lại trang. Chúng ta sẽ có kết quả như hình bên dưới:

Kết quả chỉnh sửa Razor page

Tổng kết

Qua bài này chúng ta đã biết cách khởi tạo một web app với ASP.NET Core, đồng thời chạy và làm quen với Razor page. Hi vọng bài việt này giúp ích được cho mọi người. Cảm ơn các bạn đã quan tâm theo dõi, hẹn gặp lại!

search
Bài viết
Series
Thẻ

Không tìm thấy kết quả nào.