英文:
muddatagrid - make an hyperlink or a button
问题
如何在元素名称上创建超链接或按钮？
@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient
<!-- This is the MudDataGrid component -->
<MudDataGrid Items="@Elements.Take(4)">
<Columns>
<Column T="Element" Field="Number" Title="Nr" />
<Column T="Element" Field="Sign" />
<Column T="Element" Field="Name">
<!-- You can create a hyperlink or button here -->
<!-- Example: Creating a hyperlink -->
<Template Context="element">
<a href="#">@element.Name</a>
</Template>
</Column>
<Column T="Element" Field="Position" />
<Column T="Element" Field="Molar" Title="Molar mass" />
</Columns>
</MudDataGrid>
@code {
private IEnumerable<Element> Elements = new List<Element>();
protected override async Task OnInitializedAsync()
{
Elements = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable");
}
}
在上面的代码中，我在"Name"列中创建了一个超链接示例。您可以在模板中使用<a>标签来创建超链接，将其链接到您想要的目标页面。
英文:
This is the following link to try out the code
@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient
<MudDataGrid Items="@Elements.Take(4)">
<Columns>
<Column T="Element" Field="Number" Title="Nr" />
<Column T="Element" Field="Sign" />
<Column T="Element" Field="Name" />
<Column T="Element" Field="Position" />
<Column T="Element" Field="Molar" Title="Molar mass" />
</Columns>
</MudDataGrid>
@code {
private IEnumerable<Element> Elements = new List<Element>();
protected override async Task OnInitializedAsync()
{
Elements = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable");
}
}
using System.Collections.Generic;
using System.Text.Json.Serialization;
namespace MudBlazor.Examples.Data.Models
{
public class Element
{
public string Group { get; set; }
public int Position { get; set; }
public string Name { get; set; }
public int Number { get; set; }
[JsonPropertyName("small")]
public string Sign { get; set; }
public double Molar { get; set; }
public IList<int> Electrons { get; set; }
public override string ToString()
{
return $"{Sign} - {Name}";
}
}
}
How to make an hyperlink or a button over the element Name?
答案1
得分: 3
以下是翻译好的代码部分：
@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient
<MudDataGrid Items="@Elements.Take(4)">
<Columns>
<Column T="Element" Field="Number" Title="Nr" />
<Column T="Element" Field="Sign" />
<Column T="Element" Field="Name">
<CellTemplate>
<MudButton Size="@Size.Small" Variant="@Variant.Filled" Color="@Color.Primary" OnClick="@(context => this.Click(context.Item))">
@context.Item.Name
</MudButton>
</CellTemplate>
</Column>
<Column T="Element" Field="Position" />
<Column T="Element" Field="Molar" Title="Molar mass" />
</Columns>
</MudDataGrid>
@code {
private IEnumerable<Element> Elements = new List<Element>();
protected override async Task OnInitializedAsync()
{
Elements = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable");
}
private void Click(Element element)
{
Console.WriteLine($"Clicked: {element.Name}");
}
}
英文:
Something like this should do:
@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient
<MudDataGrid Items="@Elements.Take(4)">
<Columns>
<Column T="Element" Field="Number" Title="Nr" />
<Column T="Element" Field="Sign" />
<Column T="Element" Field="Name">
<CellTemplate>
<MudButton Size="@Size.Small" Variant="@Variant.Filled" Color="@Color.Primary" OnClick="@(() => this.Click(context.Item))">
@context.Item.Name
</MudButton>
</CellTemplate>
</Column>
<Column T="Element" Field="Position" />
<Column T="Element" Field="Molar" Title="Molar mass" />
</Columns>
</MudDataGrid>
@code {
private IEnumerable<Element> Elements = new List<Element>();
protected override async Task OnInitializedAsync()
{
Elements = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable");
}
private void Click(Element element)
{
Console.WriteLine($"Clicked: {element.Name}");
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论