CODEWITHSUNDEEP
data-bindingmudblazor
SvdSinner
SvdSinner

Reputation: 1048

MudBlazor: Mudlink in a MudTable

I am trying to customize the link of a MudLink in a MudTable.

This works:

<MudTable Items="@TicketList" >
    <RowTemplate>
        <MudTd DataLabel="Subject">@context.Subject</MudTd>
    </RowTemplate>
</MudTable>

But this does not: (Compiler error: The name 'context' does not exist in the current context.)

<MudTable Items="@TicketList" >
    <RowTemplate>
        <MudTd DataLabel="Subject"><MudLink Href="/ticket/Edit/@context.Id">@context.Subject</MudLink></MudTd>
    </RowTemplate>
</MudTable>

How do I generate the Href in the MudLink based on the row's bound data?

Upvotes: 3

Views: 2542

Answers (1)

Bart Kiers
Bart Kiers

Reputation: 170178

I don't see how the code you've posted could result in the error you mentioned. The error you'd get when trying <MudLink Href="/ticket/Edit/@context.Id"> is something like this: "Component attributes do not support complex content (mixed C# and markup)...". Instead, you should do: <MudLink Href="@($"/ticket/Edit/{context.Id}")">.

Here's a demo that works:

<MudTable Items="@this.tickets">
  <HeaderContent>
    <MudTh>Id</MudTh>
    <MudTh>Subject</MudTh>
    <MudTh>Link</MudTh>
  </HeaderContent>
  <RowTemplate>
    <MudTd DataLabel="Id">
      @context.Id
    </MudTd>
    <MudTd DataLabel="Subject">
      @context.Subject
    </MudTd>
    <MudTd DataLabel="Link">
      <MudLink Href="@($"/ticket/Edit/{context.Id}")">@context.Id</MudLink>
    </MudTd>
  </RowTemplate>
</MudTable>

@code {
  private List<Ticket> tickets = new();

  protected override void OnInitialized()
  {
    this.tickets = new List<Ticket>
    {
      new() { Id = "123", Subject = "mu" },
      new() { Id = "456", Subject = "foo" }
    };
  }

  public class Ticket
  {
    public string Id { get; set; }

    public string Subject { get; set; }
  }
}

Try online: https://try.mudblazor.com/snippet/cumGuVltGdrWbDqC

Upvotes: 6

Related Questions