英文:
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}");}}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论