How to pass a string argument to the @onclick event in Blazor?

Question

I'm messing about with a Blazor App template created in Visual Studio 2019. I know the project is using the ASP.NET Core 3.0 but what version of Blazor it is, I don't know. It'll be pretty new though as I've only been messing around with it for a few days.

End Result: I was to pass an Id to another Blazor page using a URL parameter.

The bit I'm stuck on: it says on https://docs.microsoft.com/en-us/aspnet/core/blazor/routing?view=aspnetcore-3.0

Use Microsoft.AspNetCore.Components.NavigationManager to work with URIs and navigation in C# code. NavigationManager provides the event and methods shown in the following table. So for that reason, I added an icon with an @onclick event that, when clicked, should use the NavigationManager to go to another page but with an id in the URL.

I get this error for the code below:

Error CS7036 There is no argument given that corresponds to the required formal parameter 'linkAddress' of '__generated__CarsMainView.Navi(string, int)'

Here's my code:

    @if (Cars == null)
    {
        <p><em>Loading...</em></p>
    }
    else
    {
        @foreach (var car in Cars)
        {
            <div class="card">
                <img class="card-img-top" src="@car.ImageUrl" alt="Place holder" @onclick="(e => Show(car.Id))" data-toggle="modal" data-target="#carModal" />
                <div class="card-body">
                    <h5 class="card-title">@car.Make @car.Model</h5>
                    <p class="card-text">@car.Description</p>
                    <a href="@car.Url" class="btn btn-primary">Wiki</a>
                    <span class="fa fa-fighter-jet" @onclick="(() => Navi("carMoved", car.Id)"></span>
                </div>
                <div class="card-footer">
                    <button class="btn btn-secondary"></button>
                </div>
            </div>
        }
    }

@code {
    private void Navi(string linkAddress, int id)
    {
        navigationManager.NavigateTo($"{linkAddress}/{id}");
    }

    List<CarDetail> Cars;
    CarDetail CarToInsert;

    protected async Task Load()
    {
        Cars = await carService.GetCarsAsync();
    }

    protected override async Task OnInitializedAsync()
    {
        await Load();
        CarToInsert = new CarDetail();
    }
}

In the code above I want to send a string value containing the address to another page and an int value with the ID of the car. these values are passed into Navi(string, int) which should then direct me to that page. Problem is the string value is gives me the error mentioned above.

I know what you're thinking... I should use single quotes in my @onclick, so it would look like this instead.

@onclick="(() => Navi('carMoved', 1)"

I tried that. Problem is I get this error:

Too many characters in character literal

Any help would be much appreciated

Answer 1

Right... I'm a muppet.

I just changed the quotes around so it went from this:

<span class="fa fa-fighter-jet" @onclick="(() => Navi("carMoved", 1))"> 
</span>`

this this:

`<span class="fa fa-fighter-jet" @onclick='(() => Navi("carMoved", 1))'> 
</span>`

Now it works.

Answer 2

I would go with an even more readable way so you don't need those extra quotes around:

<span class="fa fa-fighter-jet" @onclick="@(e => Navi("carMoved", 1))"></span>

The same syntax also described here.