Call POST API ASP NET Core Blazor | Blazor CRUD using API Part-1

In this tutorial, I  will show you how to save data into database using Web API form Asp.Net Core Blazor #Webassembly application.

Code sample

@page "/ProductPages/Add"
@using BlazorApp.Models
@inject HttpClient Http
<h3>Add</h3>
<h5>@message</h5>
<EditForm Model="@product" OnValidSubmit="@AddProduct">
    <DataAnnotationsValidator />
    <div class="row">
        <div class="col-6">
           <div class="form-group">
               <label>Name</label>
               <InputText class="form-control" @bind-Value="@product.Name"></InputText>
               <ValidationMessage For="@(()=>product.Name)"/>
           </div>
           <div class="form-group">
               <label>Type</label>
               <InputText class="form-control" @bind-Value="@product.Type"></InputText>
               <ValidationMessage For="@(()=>product.Type)" />
           </div>
            <button type="submit" class="btn btn-info">Save</button>
        </div>
    </div>
</EditForm>
@code {

    Product product = new Product();
    string message = "";
    async Task AddProduct()
    {
        var data = await Http.PostJsonAsync<Product>("https://localhost:44309/api/Product/Add", product);
        message = "Save data successfully.";
    }
}