如何在Blazor中将字符串参数传递给@onclick事件？

Question

我正在使用Visual Studio 2019创建的Blazor应用程序模板进行尝试。 我知道该项目正在使用ASP.NET Core 3.0，但不知道它使用的是哪个版本的Blazor。不过这应该是很新的，因为我只是尝试了几天。

目标结果： 我想通过URL参数将Id传递到另一个Blazor页面。

我卡住的部分： 在https://learn.microsoft.com/en-us/aspnet/core/blazor/routing?view=aspnetcore-3.0上写着：

使用Microsoft.AspNetCore.Components.NavigationManager在C#代码中处理URI和导航。 NavigationManager提供了下表所示的事件和方法。 因此，出于这个原因，我添加了一个具有@onclick事件的图标，当单击时，应使用NavigationManager转到另一页，但其中包含URL的id。

以下是我的代码，它报错：

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

这是我的代码：

    @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();
    }
}

在上面的代码中，我想发送一个包含地址的字符串值和一辆车的ID的int值到另一个页面。这些值被传递到Navi(string, int)中，该函数应该将我引导到该页面。问题是字符串值会给我上述错误。

我知道你在想什么...我应该在@onclick中使用单引号，所以它看起来像这样。

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

我尝试过那样做。问题是我得到了这个错误：

字符文字中的字符过多

非常感谢任何帮助。

- user1456781

Answer 1

对...我是个木偶。

我只是改了引号，就从这里变成了：

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

转换为：

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

现在它可以工作了。

- user1456781

Answer 2

我会采用更易读的方式，这样您就不需要额外添加引号：

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

同样的语法也在这里进行了描述。

- Zsolt

Answer 3

您也可以尝试这个：

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

- Dwight