BlazorAddressTable

Blazor Addresses Table

This wiki page documents how to add a razor component which is similar to the Index Page/View when CRUD pages/views are scaffolded in MVC or Razor Pages.

The View (Details) CRUD page in this case is only worth creating as a Razor component so that it can be used when customers want to see their addresses individually. The Edit/Create pages can be created as a single Upsurt Razor Component.

_Imports.razor

Make sure that you put a using directive to all your folders

@using BlazorShoes
@using BlazorShoes.Models
@using BlazorShoes.Services
@using BlazorShoes.Shared
@using BlazorShoes.Controllers

Dependency Injection

Your AddressService or your AddressesControler must be injected into the table

@page "/Addresses/Index"
@inject AddressService addressService
@inject AddressesController controller;

<h3>Customer Addresses</h3>
<p>
    <a class="btn btn-primary" href="Addresses/Create">Add New Address</a>
</p>
<table class="table">
    <thead>
        <tr>
            <th>House No</th>
            <th>House Name</th>
            <th>Road Name</th>
            <th>Town</th>
            <th>Postcode</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
    @foreach (var item in Addresses) 
    {
        <tr>
            <td>@item.HouseNumber</td>
            <td>@item.HouseName</td>
            <td>@item.RoadName</td>
            <td>@item.PostTown</td>
            <td>@item.Postcode</td>
            <td>
                <a class="btn btn-success" href="/Addresses/Edit/@item.AddressId">Edit</a> 
                <a class="btn btn-info" href="/Addresses/Details/@item.AddressId">View</a> 
                <a class="btn btn-danger" href="/Addresses/Delete/@item.AddressId">Delete</a>
            </td>
        </tr>
    }
    </tbody>
</table>

Blazor Code

@code
{
    public List<Address> Addresses { get; set; }

    //private AddressesController controller;

    protected override void OnInitialized()
    {
        Addresses = controller.GetAddresses();
        //Addresses = addressService.GetAddresses();
    }

}