Question

我无法终生搞清楚将类成员绑定到属性的正确语法。特别是在这种情况下，标签或Blazor标签的href属性。

我想要做的就是这个Vue.js的等效示例

<a :href="'/customers/' + customer.CustomerID">

我如何在Blazor组件中执行此操作？

我尝试过：

<a @bind-href="/customers/customer.CustomerID">

<a @bind-href="/customers/@customer.CustomerID">

<a href="/customers/customer.CustomerID">

<a href="/customers/@customer.CustomerID">

没有任何效果。 CustomerID是int类型。

Answer 1

假设我们已经定义了一个名为Customer的Blazor组件，并且希望从“索引”页面组件中调用它。您可以将锚元素放置在索引组件中，如下所示：

<a href="customer/@customer.CustomerID">Click me</a>

href属性的值是由两个段组成的url： 1. 客户，代表组件的名称。请注意，它不应以“ /”

开头

@ customer.CustomerID ，它是评估为客户ID的Razor表达式。它由在Index组件的@code块中定义的Customer类的实例变量的名称和CustomerID属性组成。当然，您可以通过其他方式提供值，例如：<a href="customer/1">Click me</a>

下面是Index组件的定义 Index.razor：

@page "/"

<a href="customer/@customer.CustomerID">Click me</a>
<a href="customer/2">Click me</a>

@code
{
    Customer customer = new Customer();

    public class Customer
    {
        public int CustomerID { get; set; } = 1;
        public string Name { get; set; } = "Microsoft";
    }
}

以下是“客户”组件的定义 Customer.razor：

@page "/customer"

@page "/customer/{CustomerID:int}"

<p>@CustomerID</p>

@code {
    [Parameter]
    public int CustomerID { get; set; }
}

请注意，Customer组件包含两个带有路由模板的@page指令。如果您想在不提供客户ID的情况下路由到组件，则使用第一个指令，例如：

<a href="customer">Click me</a>

当您要使用CustomerID参数路由到Customer组件时，使用第二个路由模板。还要注意，Customer组件包含带有Paramater属性的公共属性。此属性由Blazor填充，并带有路由到客户组件时传递给客户组件的参数。

您设置锚元素href属性失败的尝试显然是由于您不熟悉Blazor的路由系统这一简单事实，因此，这里是指向Blazor routing的文档的链接...祝你好运。

Answer 2

以下代码可完美运行。希望这会有所帮助。

<a href="https://google.com?test=@TestProperty">Test</a>


@code {
    public int TestProperty { get; set; } = 999;
}

Answer 3

在使用NavLink组件（而不是<a>标签）时，您必须使用：

href="@($"customer/{customer.CustomerID}")"

如何将类成员数据绑定到<a />或Blazor的<NavLink />的href属性？

3 个答案: