My website is supposed to pull up a new page that represents the data of the object you want to edit. However, it can’t seem to locate the page despite having the correct value input. I believe that the issue lies in how I’m having it search for the page.

It should be accepting the ‘string’ of data that represents the item and using that to create the page.

here is the code for the button to access the webpage from he index page:

@page "/"
@inherits VehicleDataModel

<h1>Vehicle Data</h1>

@if (vehList == null)
{
    <p><em>Loading...</em></p>
}
else
{
    @if (vehList.Count > 0)
    {


        <table class="table table-striped align-middle table-bordered">
            <thead class="table-success">
                <tr class="text-center">
                    <th>Vehicles</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var veh in vehList)
                {

                    <tr class="text-center">
                        <td>@veh.VehicleNumber</td>
                        <td>
                           <a href='/vehiclelist/edit/@string.Format(@veh.VehicleNumber)' class="btn btn-outline-dark" role="button">Edit</a>
                           
                            <button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteVehModal"
                                    @onclick="(() => DeleteConfirm(veh.VehicleNumber))">
                                Delete
                            </button>
                        </td>
                    </tr>
            </tbody>
        </table>
else
{
    <div class="d-flex justify-content-center">
        <h4>No record found</h4>
    </div>
}

here is the code from the razor page form it calls that should manage the page itself:

@page "/vehiclelist/add"
@page "/vehiclelist/edit/@string.Format({vehID:string})"
<!--page "/vehicle/edit/{vehID:int}"
-->

@inherits AddEditVehicleModel

<h1>@Title Vehicle</h1>
<hr />

<EditForm Model="@veh" OnValidSubmit="SaveVehicle">
    <DataAnnotationsValidator />
    <div class="mb-3">
        <label for="vehicle" class="form-label">Vehicle</label>
        <div class="col-md-4">
            <InputText class="form-control" @bind-Value="veh.VehicleNumber" />
        </div>
        <ValidationMessage For="@(() => veh.VehicleNumber)" />
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-primary">Save</button>
        <button type="button" class="btn btn-light" @onclick="Cancel">Cancel</button>
    </div>
</EditForm>

And finally, here is the backend for the above page:

using Microsoft.AspNetCore.Components;
using Fireserver.Data;
using Fireserver.Models;

namespace Fireserver.Pages
{
    public class AddEditVehicleModel : ComponentBase
    {

        [Inject]
        protected VehicleService VehicleService { get; set; } = null!;
        [Inject]
        public NavigationManager? UrlNavigationManager { get; set; }
        [Parameter]
        public string? vehID { get; set; }

        protected string Title = "Add";
        public Vehicle veh = new();


        protected override async Task OnParametersSetAsync()
        {
            if (vehID != null)
            {
                Title = "Edit";
                veh = await VehicleService.Details(vehID);
            }
        }

        protected async Task SaveVehicle()
        {
            if (veh.VehicleNumber != null)
            {
                await Task.Run(() =>
                {
                    VehicleService.Edit(veh);
                });
            }
            else
            {
                await Task.Run(() =>
                {
                    VehicleService.Create(veh);
                });
            }
            Cancel();
        }

        public void Cancel()
        {
            if (UrlNavigationManager != null)
            {
                UrlNavigationManager.NavigateTo("/");
            }
        }
    }
}

I have tried modifying how it accepts the input for each page using different html values and techniques, but most of them either throw up an error when the button is clicked and the rest send me to the error page setup for when it can’t find the page designated.

Ideally, it should send me to a new page with the description of the item clicked as part of the url displaying said item in a format fit to edit it.

I have the main function that should work implemented in the code above as well as another one commented to show the orignal way I had set it up.