Start the client side

Let's start with each page, we want to make sure the Index.razor page have link to each of the pages hosting each database.

            <div class="card">
                <img src="/images/MetricExternalPNG.PNG" alt="Metric External Thread" class="card-img-top">
                <div class="card-body">
                    <h3>Metric External Thread Info Per ISO</h3>
                    <button class="btn btn-info btn-outline-success col-12" @onclick="()=>OpenMetricExternalPage()">Details</button>
                </div>
            </div>

This is a card component to the Metric External ISO page.

For each of the Metric External info set, we also use card to display:

<div class="card mt-3 border-5">
                    <table>
                        <thead>
                            <tr>
                                <th scope="col">Thread Designition</th>
                                <th scope="col">Thread Class</th>
                                <th scope="col">Major Diameter</th>
                                <th scope="col">Pitch Diameter</th>
                                <th scope="col">Minor Diameter</th>
                                <th scope="col"><button type="button" class=" btn btn-outline-dark btn-secondary" @onclick ="()=>OpenDrafterDetails(me)">Drafter Details</button></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="col">@me.CustomThreadDesignition</th>
                                <th scope="col">@me.Classification</th>
                                <th scope="col">@me.MajorDiaMin - @me.MajorDiaMax</th>
                                <th scope="col">@me.PitchDiaMin - @me.PitchDiaMax</th>
                                <th scope="col">@me.MinorDiaMin - @me.MinorDiaMax</th>
                                <th scope="col"><button type="button" class="btn btn-outline-info btn-primary" @onclick = "()=>OpenInspectorDetails(me)">Inspector Details</button></th>
                            </tr>
                        </tbody>
                    </table>
                </div>

Each card contains a table to display the most used data, and we also have a search bar for more convenient search functionality:

<div class="row">
        <input type="text" placeholder = "Type Designition To Search" aria-label = "Search Box" class="col-lg-8" @oninput="((txt)=>OnSearchInput((string)txt.Value))"/>
    </div>

private async Task FilterMetricExternals()
    {
        var output = await metricExternalData.GetAllMetricExternalsAsync();
        if (string.IsNullOrWhiteSpace(searchText)==false)
        {
            output = output.Where(me => me.CustomThreadDesignition.Contains(searchText, StringComparison.InvariantCultureIgnoreCase))
            .OrderBy(me => me.InternalId)
            .ToList();
        }
        metricExternals = output;
        await SaveFilterState();
    }
    private async Task OnSearchInput(string searchInput)
    {
        searchText = searchInput;
        await FilterMetricExternals();
    }