Nguon: Microsoft Learn · .NET 8.0

Bắt đầu với ASP.NET Core

Nguồn: Get started with ASP.NET Core | Phiên bản: .NET 8.0

Trong bài viết này

Lưu ý: Đây không phải phiên bản mới nhất của bài viết này. Để xem phiên bản hiện tại, hãy xem bài viết phiên bản .NET 10.

Cảnh báo: Phiên bản ASP.NET Core này không còn được hỗ trợ. Để biết thêm thông tin, xem Chính sách hỗ trợ .NET và .NET Core. Để xem phiên bản hiện tại, hãy xem bài viết phiên bản .NET 10.

Phần 1: Tạo Blazor Web App

Hướng dẫn này trình bày cách tạo, chạy và chỉnh sửa một ASP.NET Core Blazor Web App sử dụng .NET CLI (giao diện dòng lệnh .NET). Blazor là một frontend web framework (khung giao diện người dùng web) của .NET hỗ trợ cả server-side rendering (kết xuất phía máy chủ) và client interactivity (tương tác phía máy khách) trong một mô hình lập trình duy nhất.

Bạn sẽ học được cách:

Điều kiện tiên quyết (Prerequisites)

Tải và cài đặt .NET SDK mới nhất tại Download .NET.

Tạo một Blazor Web App

Mở command shell (cửa sổ dòng lệnh) tại vị trí phù hợp cho ứng dụng mẫu và sử dụng lệnh sau để tạo một Blazor Web App. Tùy chọn -o|--output tạo một thư mục cho dự án và đặt tên dự án là BlazorSample:

code
dotnet new blazor -o BlazorSample

Chạy ứng dụng

Chuyển đến thư mục BlazorSample bằng lệnh sau:

code
cd BlazorSample

Lệnh dotnet watch chạy ứng dụng và mở trình duyệt mặc định của bạn đến trang chủ của ứng dụng:

code
dotnet watch

!Blazor Web App đang chạy trong Microsoft Edge với trang chủ được hiển thị trên giao diện.

Sử dụng thanh điều hướng bên (sidebar navigation) của ứng dụng, truy cập trang Counter (Bộ đếm), nơi bạn có thể chọn nút Click me để tăng giá trị bộ đếm.

!Trang Counter được hiển thị sau khi nút 'Click me' được chọn một lần, cho thấy bộ đếm đã tăng lên giá trị một.

Thay đổi ứng dụng

Để trình duyệt mở với trang Counter đang được tải. Bằng cách sử dụng lệnh dotnet watch để chạy ứng dụng, bạn có thể thực hiện các thay đổi đối với markup (mã đánh dấu) và code của ứng dụng mà không cần phải rebuild (xây dựng lại) ứng dụng để phản ánh các thay đổi trong trình duyệt.

Razor component (thành phần Razor) Counter hiển thị trang web Counter được đặt tại Components/Pages/Counter.razor trong dự án. Razor là một cú pháp kết hợp HTML markup với code C# được thiết kế cho năng suất của nhà phát triển.

Mở file Counter.razor trong một text editor (trình soạn thảo văn bản) và chú ý một số dòng thú vị hiển thị nội dung và làm cho tính năng bộ đếm của component hoạt động.

Components/Pages/Counter.razor:

razor
@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

File bắt đầu với một dòng chỉ ra đường dẫn tương đối của component (/counter):

razor
@page "/counter"

Tiêu đề của trang được thiết lập bởi các thẻ <PageTitle>:

razor
<PageTitle>Counter</PageTitle>

Tiêu đề H1 được hiển thị:

razor
<h1>Counter</h1>

Một phần tử paragraph (<p>) hiển thị giá trị đếm hiện tại, được lưu trữ trong một biến có tên currentCount:

razor
<p role="status">Current count: @currentCount</p>

Một nút (<button>) cho phép người dùng tăng bộ đếm, điều này xảy ra khi một lần click vào nút thực thi một phương thức C# có tên IncrementCount:

razor
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

Khối @code chứa code C# mà component thực thi:

csharp
private int currentCount = 0;

private void IncrementCount()
{
    currentCount++;
}

Hãy thay đổi mức tăng của bộ đếm trong phương thức IncrementCount.

Thay đổi dòng để currentCount được tăng thêm mười mỗi khi IncrementCount được gọi:

code
- currentCount++;
+ currentCount += 10;

Lưu file.

Ngay khi bạn lưu file, ứng dụng đang chạy sẽ được cập nhật tự động vì bạn đã sử dụng lệnh dotnet watch. Quay lại ứng dụng trong trình duyệt và chọn nút Click me trên trang Counter. Quan sát cách bộ đếm bây giờ tăng từ giá trị hiện tại là một lên giá trị mười một. Mỗi lần nút được chọn, giá trị tăng thêm mười.

!Trang Counter được hiển thị sau khi nút 'Click me' được chọn một lần, cho thấy bộ đếm đã tăng lên giá trị mười một.

Tắt ứng dụng

Thực hiện các bước sau:

Chúc mừng! Bạn đã hoàn thành thành công hướng dẫn này.

Các bước tiếp theo

Trong hướng dẫn này, bạn đã học được cách:

Phần 2: Tạo Razor Pages App

Hướng dẫn này trình bày cách tạo và chạy một ASP.NET Core web app sử dụng .NET CLI.

Để xem các hướng dẫn về Blazor, xem Các hướng dẫn ASP.NET Core Blazor.

Bạn sẽ học được cách:

Điều kiện tiên quyết (Prerequisites)

Tải và cài đặt .NET SDK mới nhất tại Download .NET.

Tạo Razor Pages app

Mở command shell tại vị trí phù hợp cho ứng dụng mẫu và sử dụng lệnh sau để tạo một Razor Pages app. Tùy chọn -o|--output tạo một thư mục cho dự án và đặt tên dự án là RazorPagesSample:

code
dotnet new webapp -o RazorPagesSample

Chạy ứng dụng

Chuyển đến thư mục RazorPagesSample bằng lệnh sau:

code
cd RazorPagesSample

Lệnh dotnet watch chạy ứng dụng và mở trình duyệt mặc định của bạn đến trang chủ của ứng dụng:

code
dotnet watch

!Trang chủ của web app.

Thay đổi ứng dụng

Mở file Pages/Index.cshtml trong một text editor.

Sau dòng có lời chào "Welcome", thêm dòng sau để hiển thị ngày và giờ hệ thống cục bộ:

html
<p>The time on the server is @DateTime.Now</p>

Lưu các thay đổi.

Ngay khi bạn lưu file, ứng dụng đang chạy sẽ được cập nhật tự động vì bạn đã sử dụng lệnh dotnet watch.

Làm mới trang trong trình duyệt để xem kết quả:

!Trang chủ của web app hiển thị thay đổi đã được thực hiện.

Tắt ứng dụng

Để tắt ứng dụng:

Chúc mừng! Bạn đã hoàn thành thành công hướng dẫn này.

Các bước tiếp theo

Trong hướng dẫn này, bạn đã học được cách:

Để tìm hiểu thêm về các nguyên tắc cơ bản (fundamentals) của ASP.NET Core, xem:

Tổng quan về ASP.NET Core fundamentals

Các hướng dẫn bổ sung (Additional tutorials)

Sử dụng Blazor (Minimal APIs)

Loại ứng dụng (App type)Kịch bản (Scenario)Hướng dẫn (Tutorials)
Web appPhát triển web server và client mới với BlazorXây dựng ứng dụng danh sách việc cần làm với Blazor và Xây dựng ứng dụng cơ sở dữ liệu phim với Blazor (Tổng quan)
Web APIXử lý dữ liệu phía máy chủ với Minimal APIsHướng dẫn: Tạo Minimal API với ASP.NET Core
Remote Procedure Call (RPC) appDịch vụ contract-first sử dụng Protocol BuffersTạo .NET gRPC client và server trong ASP.NET Core
Real-time app (ứng dụng thời gian thực)Giao tiếp hai chiều server/clientBắt đầu với ASP.NET Core SignalR

Sử dụng Controller-based Web API

Loại ứng dụng (App type)Kịch bản (Scenario)Hướng dẫn (Tutorials)
Web appPhát triển web server và client mới với BlazorXây dựng ứng dụng danh sách việc cần làm với Blazor và Xây dựng ứng dụng cơ sở dữ liệu phim với Blazor (Tổng quan)
Web APIXử lý dữ liệu phía máy chủHướng dẫn: Tạo web API dựa trên controller với ASP.NET Core
Remote Procedure Call (RPC) appDịch vụ contract-first sử dụng Protocol BuffersTạo .NET gRPC client và server trong ASP.NET Core
Real-time app (ứng dụng thời gian thực)Giao tiếp hai chiều server/clientBắt đầu với ASP.NET Core SignalR

Tài nguyên bổ sung (Additional resources)