Blazor Components Summary

Question

User2041008840 posted

Hello, 
I have created a bunch of blazor wasm components for reusability and reduce line of code. 
I want to give the summary info for it. Like when I hover the tag
<GridView></GridView> It should show the summary info or tooltip that 

"The table element which is mostly used to show data in table form" like that or something. 

Is it possible? 

Answer 1

User1535942433 posted

Hi Prathamesh Shende,

As far as I think, HTML and Razor markup are placed in a Razor file (.razor). C# code is placed in a code-behind file defined as a partial class (.cs) to show the summary.

Just like this:

TestTable.razor:

@typeparam TItem
<table class="table">
    <thead>
        <tr>@TableHeader</tr>
    </thead>
    <tbody>
        @foreach (var item in Items)
        {
            <tr>@RowTemplate(item)</tr>
        }
    </tbody>
</table>

TestTable.razor.cs:

using Microsoft.AspNetCore.Components;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

 

namespace WebApplication23.Shared
{
    /// <summary>
    /// This is TestTable,it is a TableTemplate component
    /// </summary>
     public partial class TestTable<TItem>{

     /// <param name="TableHeader">It is a TableHeader</param>
    [Parameter]
    public RenderFragment TableHeader { get; set; }
    /// <param name="RowTemplate">It is a RowTemplate</param>
    [Parameter]
    public RenderFragment<TItem> RowTemplate { get; set; }
    /// <param name="Items">It is datasource</param>
    [Parameter]
   public IReadOnlyList<TItem> Items { get; set; }
   }
}

Index.razor:

<TestTable Items="pets" Context="pet">
    <TableHeader>
        <th>ID</th>
        <th>Name</th>
    </TableHeader>
    <RowTemplate>
        <td>@pet.PetId</td>
        <td>@pet.Name</td>
    </RowTemplate>
</TestTable>

 

@code {
    private List<Pet> pets = new()
    {
        new Pet { PetId = 2, Name = "Mr. Bigglesworth" },
        new Pet { PetId = 4, Name = "Salem Saberhagen" },
        new Pet { PetId = 7, Name = "K-9" }
    };
    private class Pet
    {
        public int PetId { get; set; }
        public string Name { get; set; }
    }
}

Result:

Note:It may run slow.

More details,you could refer to below articles:

https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-5.0#partial-class-support

https://docs.microsoft.com/en-us/dotnet/csharp/codedoc#param

Best regards,

Yijing Sun