Erick Kurniawan

Tutorial ini adalah kelanjutan dari tutorial sebelumnya tentang ASP.NET Core Minimal API, berikut daftar tutorial sebelumnya yang dapat anda baca terlebih dahulu:

–Minimal API & .NET 8
–ASP.NET Core Minimal API CRUD with ADO.NET
–ASP.NET Core Minimal API CRUD with EF

Pada tutorial ini akan dibuat contoh program untuk mengakses web API yang telah dibuat di artikel sebelumnya. aplikasi client yang digunakan adalah Blazor Web Assembly.

Membuat Blazor Project

Untuk membuat Blazor Project pada Visual Studio Code tambahkan project baru kemudian pilih Blazor WebAssembly project. Tambahkan BlazorClient sebagai nama Projectnya.

Setelah berhasil membuat Blazor project langkah selanjutnya adalah bagaimana untuk mengakses API dari Blazor.

Mengakses API dari Blazor

Untuk mengakses Author API yang sudah dibuat sebelumnya dengan Blazor Client diperlukan beberapa library yang harus ditambahkan via NuGet Package Manager. Buka NuGet Gallery extension kemudian tambahkan library berikut.

– System.Net.Http.Json
– Microsoft.Extensions.Http

Karena pada project ini menggunakan .NET 8 maka pilih versi 8 pada library tersebut. Langkah selanjutnya adalah menambahkan folder dengan nama Services pada Blazor Project. Folder ini akan berisi file yang akan digunakan untuk mengakses API yang sudah dibuat sebelumnya.

Pada folder Services, tambahkan file interface dengan nama IAuthor.cs, kemudian tambahkan method yang akan diimplementasikan kemudian.

	public interface IAuthor
	{
		Task<IEnumerable<AuthorReadViewModel>> GetAuthors();
	}

Method GetAuthors akan digunakan untuk mengambil semua data Author. Untuk menampung data dengan tipe Author dari API dibutuhkan class. Buat folder dengan nama Models, kemudian tambahkan class dengan nama AuthorReadViewModel.cs, kemudian tambahkan kode berikut ini:

public class AuthorReadViewModel
{
        public int AuthorId { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
}

Kemudian tambahkan juga class dengan nama AuthorService.cs pada folder Services. Class ini adalah implementasi dari method GetAuthors.

	public class AuthorService : IAuthor
	{
        private readonly HttpClient _httpClient;

      public AuthorService(HttpClient httpClient)
		{
            _httpClient = httpClient;
		}

        public async Task<IEnumerable<AuthorReadViewModel>> GetAuthors()
        {
            return await _httpClient.GetFromJsonAsync<IEnumerable<AuthorReadViewModel>>($"api/Authors");
        }
    }

Pada class diatas dapat dilihat penggunaan library HttpClient untuk mengakses API Author. Untuk mendaftarkan services HttpClient, tambahkan juga kode berikut pada Program.cs.

builder.Services.AddHttpClient<IAuthor,AuthorService>(
    client => client.BaseAddress = new Uri("https://localhost:7135"));

Halaman Untuk Menampilkan Hasil

Untuk menampilkan data yang sudah berhasil diambil dari Author API pada halaman, tambahkan halaman AuthorPage.razor pada folder Pages. Kemudian tambahkan juga file AuthorPage.razor.cs untuk menambahkan kode c#-nya.

Berikut adalah kode pada class AuthorPage.razor.cs

	public partial class AuthorPage
	{
        public IEnumerable<AuthorReadViewModel> Authors { get; set; }

        [Inject]
        public IAuthor AuthorService { get; set; }

        protected override async Task OnInitializedAsync()
        {
            Authors = (await AuthorService.GetAuthors()).ToList();
        }
    }

Kemudian tambahkan juga kode razor pada halaman AuthorPage.razor.

@page "/authorpage"

<h3>Authors List</h3>

@if (Authors == null)
{
    <div class="spinner"></div>
}
else
{
    <div class="card-deck">
        @foreach (var author in Authors)
        {
            <div class="card m-3" style="min-width: 18rem; max-width:30.5%;">
                <div class="card-header">
                    <h3>@author.FirstName @author.LastName</h3>
                </div>
            </div>
        }
    </div>
}

Kode diatas digunakan untuk menampilkan semua data Author yang diperoleh dari Author API. Jalankan aplikasi Blazor Client tersebut dan tampilkan halaman /authorpage, maka dapat dilihat hasil sebagai berikut: