Các trang web thường lấy dữ liệu từ một nguồn động, chẳng hạn như cơ sở dữ liệu hoặc dịch vụ web, là một kỹ thuật cơ bản trong phát triển web. Trong bài này, bạn sẽ học cách truy cập dữ liệu và render nó trong HTML để hiển thị cho người dùng.
Tạo một registered data service
Nếu bạn muốn tạo một trang web động hiển thị thông tin thay đổi cho người dùng, bạn phải viết mã để lấy dữ liệu đó từ đâu đó. chúng ta sẽ cùng phân tích ví dụ WeatherForecast trong template của Blazor.Bằng cách sử dụng mã C # và Blazor để truy vấn cơ sở dữ liệu và sau đó định dạng các chi tiết dưới dạng HTML để người dùng có thể xem.
Trong ứng dụng Blazor Server, bạn có thể tạo một registered service để đại diện cho một nguồn dữ liệu và lấy dữ liệu từ đó.
Các nguồn dữ liệu bạn có thể sử dụng trong ứng dụng Blazor bao gồm cơ sở dữ liệu quan hệ, cơ sở dữ liệu NoSQL, dịch vụ web, các dịch vụ Azure khác nhau và nhiều hệ thống khác. Bạn có thể sử dụng các công nghệ .NET như Entity Framework, HTTP client và ODBC để truy vấn các nguồn đó. Những kỹ thuật này nằm ngoài phạm vi của mô-đun này. Tại đây, bạn sẽ học cách định dạng và sử dụng dữ liệu mà bạn thu được từ một trong những nguồn và công nghệ này.
Bắt đầu tạo registered service của bạn bằng cách viết một lớp xác định các thuộc tính của nó. Bạn có thể xem class WeatherForecast.cs, đây là ví dụ mà bạn có thể viết 1 class đại diện cho thông tin thời tiết của 1 ngày.
namespace BlazorServer.Data
{
public class WeatherForecast
{
public DateTime Date { get; set; }public int TemperatureC { get; set; }
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
public string? Summary { get; set; }
}
}
Lớp định nghĩa các thuộc tính và kiểu dữ liệu của thời tiết trong 1 ngày. Bạn phải đảm bảo các thuộc tính này khớp với lược đồ thời tiết trong nguồn dữ liệu.
Tiếp theo, định nghĩa service:
bạn có thể tham khảo WeatherForecastService.cs
namespace BlazorServer.Data
{
public class WeatherForecastService
{
private static readonly string[] Summaries = new[]
{
“Freezing”, “Bracing”, “Chilly”, “Cool”, “Mild”, “Warm”, “Balmy”, “Hot”, “Sweltering”, “Scorching”
};public Task<WeatherForecast[]> GetForecastAsync(DateTime startDate)
{
return Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast
{
Date = startDate.AddDays(index),
TemperatureC = Random.Shared.Next(-20, 55),
Summary = Summaries[Random.Shared.Next(Summaries.Length)]
}).ToArray());
}
}
}
Lưu ý rằng service sử dụng một asynchronous call để truy cập dữ liệu và trả về một tập hợp các đối tượng WeatherForecast. Nguồn dữ liệu có thể ở xa máy chủ nơi mã Blazor đang chạy. Trong trường hợp đó, hãy sử dụng cuộc gọi không đồng bộ. Sau đó, nếu nguồn dữ liệu phản hồi chậm, mã khác có thể tiếp tục chạy khi bạn chờ phản hồi.
Bạn cũng phải đăng ký service bằng cách thêm một dòng vào Thêm dịch vụ vào phần vùng chứa trong file Program.cs:
…
// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();…
Sử dụng service để lấy dữ liệu
Bây giờ bạn sử dụng service mà bạn đã xác định bằng cách gọi nó trong một Blazor component và lấy dữ liệu. Giả sử bạn có mã component sau và bạn muốn hiển thị thông tin thời tiết trong đó. Tham khảo từ file FetchData.razor
Inject the service
Trước khi bạn có thể gọi service từ component, bạn phải sử dụng dependency injection để thêm service. Thêm mã sau vào sau lệnh @page:
@using BlazorServer.Data
@inject WeatherForecastService ForecastService
Chỉ thị @inject thêm service vào component hiện tại và khởi tạo một thể hiện của nó. Trong chỉ thị (directive), chỉ định tên của lớp dịch vụ. Theo sau nó theo tên bạn muốn sử dụng cho phiên bản của dịch vụ trong thành phần này.
Ghi đè phương thức OnInitializedAsync
Gọi dịch vụ để lấy dữ liệu. Khi bạn gọi dịch vụ, hãy sử dụng từ khóa await vì cuộc gọi không đồng bộ:
@code {
private WeatherForecast[]? forecasts;protected override async Task OnInitializedAsync()
{
forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
}
}
Hiển thị dữ liệu cho người dùng
Bây giờ bạn có một số dữ liệu từ dịch vụ, hãy hiển thị nó cho người dùng. Trong ví dụ về WeatherForecast, chúng tôi mong muốn dịch vụ trả về danh sách các WeatherForecast mà người dùng có thể chọn. Blazor bao gồm một tập hợp phong phú các lệnh mà bạn có thể sử dụng để chèn dữ liệu này vào trang mà người dùng nhìn thấy.
Kiểm tra data
đầu tiên chúng ta cần kiểm tra dữ liệu có tồn tại hay không, Để chạy mã kết xuất có điều kiện trong thành phần Blazor, hãy sử dụng chỉ thị @if:
@if (forecasts == null)
{
<p><em>Loading…</em></p>
}
else
{
<!– This markup will be rendered once the WeatherForecast are loaded –>
}
Render dữ liệu cần hiển thị
Nếu Blazor thực thi câu lệnh else trong đoạn mã trước đó, bạn biết rằng một số WeatherForecast đã được lấy từ service. Nhiệm vụ tiếp theo của bạn là hiển thị WeatherForecast này cho người dùng. Hãy xây dựng một bảng HTML đơn giản để hiển thị chúng.
Chúng ta không biết sẽ có bao nhiêu WeatherForecast khi chúng tôi viết mã trang này. Chúng ta có thể sử dụng lệnh @foreach để lặp qua tất cả các đối tượng trong bộ sưu tập forecasts và hiển thị một hàng cho mỗi đối tượng:
@if (forecasts == null)
{
<p><em>Loading…</em></p>
}
else
{
<table class=”table”>
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
@foreach (var forecast in forecasts)
{
<tr>
<td>@forecast.Date.ToShortDateString()</td>
<td>@forecast.TemperatureC</td>
<td>@forecast.TemperatureF</td>
<td>@forecast.Summary</td>
</tr>
}
</tbody>
</table>
}
Kết quả hiển thị
